[{"data":1,"prerenderedAt":3704},["ShallowReactive",2],{"component-meta-pagination":3,"components-pagination":31,"component-docs-pagination":696,"component-stories-tabs-pagination":1645,"$fntEwaC_vExaUIA5o0zRa9aAB0NaVm3PY0tsQN1i4S1g":1669,"$fftzqO3QrAjxB2qDH4BOh8gBnvtpXboO68ISRYA6J_DY":2143,"nav-component-doc-meta":2992,"$fEjZpFH0sX5lf9r5DqHjpE5W7CJ1Rj0Oiu25ygAOvmSk":3121,"$f-RGmrDYjuEsZhtVa50ar2w-UNYqDV6qaRR6GRRiJ8Yk":3445,"component-parts-pagination":3454,"$fxNFHl6oAEqYICBlbY7Kf5FoxQ8MHHF92LCha9vCI7C0":3546,"edit-url-/components/pagination":1643,"example-stories-pagination":3679,"$fsnSGTjxJbwbyeIKGKRLM1aZyvHCO750tb-yYxbPAr8k":3688},{"name":4,"tagName":5,"description":6,"status":7,"isNew":8,"category":9,"lightDom":10,"properties":11,"slots":18,"events":22,"cssProperties":23,"stateAttributes":28,"methods":29,"dependencies":30},"Pagination","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/query syncing, cursors and any data\nfetching; Nord supplies the semantic/layout primitives, the styling and the\n\u003Ccode>paginate()\u003C/code> math utility for building the page window.\n\nAs a root it is a \u003Ccode>navigation\u003C/code> landmark — it sets \u003Ccode>role=\"navigation\"\u003C/code> and a\ndefault accessible label so screen-reader users can jump to it. Compose the\nlower-level primitives inside it:\n\n- \u003Ca href=\"/components/pagination-content/\">Pagination Content\u003C/a> — the list row.\n- \u003Ca href=\"/components/pagination-item/\">Pagination Item\u003C/a> — a slot in the row.\n- \u003Ca href=\"/components/pagination-link/\">Pagination Link\u003C/a> — a page link (set \u003Ccode>current\u003C/code>).\n- \u003Ca href=\"/components/pagination-previous/\">Pagination Previous\u003C/a> — the previous control.\n- \u003Ca href=\"/components/pagination-next/\">Pagination Next\u003C/a> — the next control.\n- \u003Ca href=\"/components/pagination-ellipsis/\">Pagination Ellipsis\u003C/a> — the collapsed-pages marker.\n\nBring your own interactive element — an \u003Ccode><a>\u003C/code> (e.g. a framework \u003Ccode><Link>\u003C/code> /\n\u003Ccode><NuxtLink>\u003C/code>) or a \u003Ccode>nord-button\u003C/code> — and own its \u003Ccode>href\u003C/code>, navigation and\n\u003Ccode>disabled\u003C/code> state. See the framework adapters in the docs.","ready",false,"navigation","true",[12],{"name":13,"attribute":13,"type":14,"default":15,"description":16,"reflects":17,"fieldRelated":8},"loading","boolean","false","Dims the pagination and disables interaction while results are loading.",true,[19],{"name":20,"description":21},"(default)","Default slot for the composed pagination primitives.",[],[24],{"name":25,"default":26,"description":27},"--n-pagination-gap","var(--n-space-xs)","Controls the spacing between pagination controls.",[],[],[],{"id":32,"title":33,"body":34,"description":62,"extension":690,"meta":691,"navigation":17,"path":692,"seo":693,"stem":694,"__hash__":695},"componentUsage/components/pagination/readme.md","Readme",{"type":35,"value":36,"toc":683},"minimark",[37,42,56,78,117,541,552,557,563,598,606,647,679],[38,39,41],"h2",{"id":40},"usage","Usage",[43,44,45,46,50,51,55],"p",{},"Pagination is the navigation root for moving through a paginated collection. It is ",[47,48,49],"strong",{},"composition-first",": it owns no page state, renders no controls, and emits no events. Your app owns the page state, URLs, cursors and any data fetching; Nord supplies the semantic/layout primitives, the styling, and the ",[52,53,54],"code",{},"paginate()"," math utility for building the page window.",[57,58,63],"pre",{"className":59,"code":60,"language":61,"meta":62,"style":62},"language-js shiki shiki-themes github-light github-dark","import '@nordhealth/components/lib/Pagination'\n","js","",[52,64,65],{"__ignoreMap":62},[66,67,70,74],"span",{"class":68,"line":69},"line",1,[66,71,73],{"class":72},"szBVR","import",[66,75,77],{"class":76},"sZZnC"," '@nordhealth/components/lib/Pagination'\n",[43,79,80,81,84,85,88,89,92,93,96,97,100,101,104,105,108,109,112,113,116],{},"Compose the primitives inside it, bringing your own interactive element — an ",[52,82,83],{},"\u003Ca>"," (e.g. a framework ",[52,86,87],{},"\u003CLink>"," / ",[52,90,91],{},"\u003CNuxtLink>"," for crawlable, SSR-friendly links) or a ",[52,94,95],{},"nord-button",". You own each link's ",[52,98,99],{},"href",", navigation and ",[52,102,103],{},"disabled"," state. Mark the active page with ",[52,106,107],{},"current"," on the ",[52,110,111],{},"nord-pagination-link"," and it mirrors ",[52,114,115],{},"aria-current=\"page\""," onto your link.",[57,118,122],{"className":119,"code":120,"language":121,"meta":62,"style":62},"language-html shiki shiki-themes github-light github-dark","\u003Cnord-pagination>\n  \u003Cnord-pagination-content>\n    \u003Cnord-pagination-item>\n      \u003Cnord-pagination-previous>\n        \u003Cnord-button square href=\"?page=1\">\n          \u003Cnord-icon name=\"arrow-left-small\">\u003C/nord-icon>\n          \u003Cnord-visually-hidden>Previous\u003C/nord-visually-hidden>\n        \u003C/nord-button>\n      \u003C/nord-pagination-previous>\n    \u003C/nord-pagination-item>\n    \u003Cnord-pagination-item>\n      \u003Cnord-pagination-link current>\n        \u003Cnord-button variant=\"primary\" href=\"?page=1\">1\u003C/nord-button>\n      \u003C/nord-pagination-link>\n    \u003C/nord-pagination-item>\n    \u003Cnord-pagination-item>\n      \u003Cnord-pagination-link>\n        \u003Cnord-button variant=\"plain\" href=\"?page=2\">2\u003C/nord-button>\n      \u003C/nord-pagination-link>\n    \u003C/nord-pagination-item>\n    \u003Cnord-pagination-item>\n      \u003Cnord-pagination-ellipsis>\u003C/nord-pagination-ellipsis>\n    \u003C/nord-pagination-item>\n    \u003Cnord-pagination-item>\n      \u003Cnord-pagination-next>\n        \u003Cnord-button square href=\"?page=2\">\n          \u003Cnord-icon name=\"arrow-right-small\">\u003C/nord-icon>\n          \u003Cnord-visually-hidden>Next\u003C/nord-visually-hidden>\n        \u003C/nord-button>\n      \u003C/nord-pagination-next>\n    \u003C/nord-pagination-item>\n  \u003C/nord-pagination-content>\n\u003C/nord-pagination>\n","html",[52,123,124,136,147,158,169,192,216,231,241,251,261,270,282,310,319,328,337,346,374,383,392,401,415,424,433,443,460,480,494,503,512,521,531],{"__ignoreMap":62},[66,125,126,130,133],{"class":68,"line":69},[66,127,129],{"class":128},"sVt8B","\u003C",[66,131,5],{"class":132},"s9eBZ",[66,134,135],{"class":128},">\n",[66,137,139,142,145],{"class":68,"line":138},2,[66,140,141],{"class":128},"  \u003C",[66,143,144],{"class":132},"nord-pagination-content",[66,146,135],{"class":128},[66,148,150,153,156],{"class":68,"line":149},3,[66,151,152],{"class":128},"    \u003C",[66,154,155],{"class":132},"nord-pagination-item",[66,157,135],{"class":128},[66,159,161,164,167],{"class":68,"line":160},4,[66,162,163],{"class":128},"      \u003C",[66,165,166],{"class":132},"nord-pagination-previous",[66,168,135],{"class":128},[66,170,172,175,177,181,184,187,190],{"class":68,"line":171},5,[66,173,174],{"class":128},"        \u003C",[66,176,95],{"class":132},[66,178,180],{"class":179},"sScJk"," square",[66,182,183],{"class":179}," href",[66,185,186],{"class":128},"=",[66,188,189],{"class":76},"\"?page=1\"",[66,191,135],{"class":128},[66,193,195,198,201,204,206,209,212,214],{"class":68,"line":194},6,[66,196,197],{"class":128},"          \u003C",[66,199,200],{"class":132},"nord-icon",[66,202,203],{"class":179}," name",[66,205,186],{"class":128},[66,207,208],{"class":76},"\"arrow-left-small\"",[66,210,211],{"class":128},">\u003C/",[66,213,200],{"class":132},[66,215,135],{"class":128},[66,217,219,221,224,227,229],{"class":68,"line":218},7,[66,220,197],{"class":128},[66,222,223],{"class":132},"nord-visually-hidden",[66,225,226],{"class":128},">Previous\u003C/",[66,228,223],{"class":132},[66,230,135],{"class":128},[66,232,234,237,239],{"class":68,"line":233},8,[66,235,236],{"class":128},"        \u003C/",[66,238,95],{"class":132},[66,240,135],{"class":128},[66,242,244,247,249],{"class":68,"line":243},9,[66,245,246],{"class":128},"      \u003C/",[66,248,166],{"class":132},[66,250,135],{"class":128},[66,252,254,257,259],{"class":68,"line":253},10,[66,255,256],{"class":128},"    \u003C/",[66,258,155],{"class":132},[66,260,135],{"class":128},[66,262,264,266,268],{"class":68,"line":263},11,[66,265,152],{"class":128},[66,267,155],{"class":132},[66,269,135],{"class":128},[66,271,273,275,277,280],{"class":68,"line":272},12,[66,274,163],{"class":128},[66,276,111],{"class":132},[66,278,279],{"class":179}," current",[66,281,135],{"class":128},[66,283,285,287,289,292,294,297,299,301,303,306,308],{"class":68,"line":284},13,[66,286,174],{"class":128},[66,288,95],{"class":132},[66,290,291],{"class":179}," variant",[66,293,186],{"class":128},[66,295,296],{"class":76},"\"primary\"",[66,298,183],{"class":179},[66,300,186],{"class":128},[66,302,189],{"class":76},[66,304,305],{"class":128},">1\u003C/",[66,307,95],{"class":132},[66,309,135],{"class":128},[66,311,313,315,317],{"class":68,"line":312},14,[66,314,246],{"class":128},[66,316,111],{"class":132},[66,318,135],{"class":128},[66,320,322,324,326],{"class":68,"line":321},15,[66,323,256],{"class":128},[66,325,155],{"class":132},[66,327,135],{"class":128},[66,329,331,333,335],{"class":68,"line":330},16,[66,332,152],{"class":128},[66,334,155],{"class":132},[66,336,135],{"class":128},[66,338,340,342,344],{"class":68,"line":339},17,[66,341,163],{"class":128},[66,343,111],{"class":132},[66,345,135],{"class":128},[66,347,349,351,353,355,357,360,362,364,367,370,372],{"class":68,"line":348},18,[66,350,174],{"class":128},[66,352,95],{"class":132},[66,354,291],{"class":179},[66,356,186],{"class":128},[66,358,359],{"class":76},"\"plain\"",[66,361,183],{"class":179},[66,363,186],{"class":128},[66,365,366],{"class":76},"\"?page=2\"",[66,368,369],{"class":128},">2\u003C/",[66,371,95],{"class":132},[66,373,135],{"class":128},[66,375,377,379,381],{"class":68,"line":376},19,[66,378,246],{"class":128},[66,380,111],{"class":132},[66,382,135],{"class":128},[66,384,386,388,390],{"class":68,"line":385},20,[66,387,256],{"class":128},[66,389,155],{"class":132},[66,391,135],{"class":128},[66,393,395,397,399],{"class":68,"line":394},21,[66,396,152],{"class":128},[66,398,155],{"class":132},[66,400,135],{"class":128},[66,402,404,406,409,411,413],{"class":68,"line":403},22,[66,405,163],{"class":128},[66,407,408],{"class":132},"nord-pagination-ellipsis",[66,410,211],{"class":128},[66,412,408],{"class":132},[66,414,135],{"class":128},[66,416,418,420,422],{"class":68,"line":417},23,[66,419,256],{"class":128},[66,421,155],{"class":132},[66,423,135],{"class":128},[66,425,427,429,431],{"class":68,"line":426},24,[66,428,152],{"class":128},[66,430,155],{"class":132},[66,432,135],{"class":128},[66,434,436,438,441],{"class":68,"line":435},25,[66,437,163],{"class":128},[66,439,440],{"class":132},"nord-pagination-next",[66,442,135],{"class":128},[66,444,446,448,450,452,454,456,458],{"class":68,"line":445},26,[66,447,174],{"class":128},[66,449,95],{"class":132},[66,451,180],{"class":179},[66,453,183],{"class":179},[66,455,186],{"class":128},[66,457,366],{"class":76},[66,459,135],{"class":128},[66,461,463,465,467,469,471,474,476,478],{"class":68,"line":462},27,[66,464,197],{"class":128},[66,466,200],{"class":132},[66,468,203],{"class":179},[66,470,186],{"class":128},[66,472,473],{"class":76},"\"arrow-right-small\"",[66,475,211],{"class":128},[66,477,200],{"class":132},[66,479,135],{"class":128},[66,481,483,485,487,490,492],{"class":68,"line":482},28,[66,484,197],{"class":128},[66,486,223],{"class":132},[66,488,489],{"class":128},">Next\u003C/",[66,491,223],{"class":132},[66,493,135],{"class":128},[66,495,497,499,501],{"class":68,"line":496},29,[66,498,236],{"class":128},[66,500,95],{"class":132},[66,502,135],{"class":128},[66,504,506,508,510],{"class":68,"line":505},30,[66,507,246],{"class":128},[66,509,440],{"class":132},[66,511,135],{"class":128},[66,513,515,517,519],{"class":68,"line":514},31,[66,516,256],{"class":128},[66,518,155],{"class":132},[66,520,135],{"class":128},[66,522,524,527,529],{"class":68,"line":523},32,[66,525,526],{"class":128},"  \u003C/",[66,528,144],{"class":132},[66,530,135],{"class":128},[66,532,534,537,539],{"class":68,"line":533},33,[66,535,536],{"class":128},"\u003C/",[66,538,5],{"class":132},[66,540,135],{"class":128},[43,542,543,544,547,548,551],{},"The root sets ",[52,545,546],{},"role=\"navigation\""," and a default accessible label, so you don't need to wrap it in a ",[52,549,550],{},"\u003Cnav>",". It renders in the light DOM, so you can style it directly with your own CSS or Tailwind utilities.",[553,554,556],"h3",{"id":555},"building-the-page-window","Building the page window",[43,558,559,560,562],{},"For numbered pages with known totals, the ",[52,561,54],{}," utility returns the sequence of page numbers (and ellipsis markers) to render, keeping the window centred on the current page:",[57,564,566],{"className":59,"code":565,"language":61,"meta":62,"style":62},"import { paginate } from '@nordhealth/components'\n\npaginate(currentPage, pageCount) // → [1, \"…\", 4, 5, 6, \"…\", 50]\n",[52,567,568,581,586],{"__ignoreMap":62},[66,569,570,572,575,578],{"class":68,"line":69},[66,571,73],{"class":72},[66,573,574],{"class":128}," { paginate } ",[66,576,577],{"class":72},"from",[66,579,580],{"class":76}," '@nordhealth/components'\n",[66,582,583],{"class":68,"line":138},[66,584,585],{"emptyLinePlaceholder":17},"\n",[66,587,588,591,594],{"class":68,"line":149},[66,589,590],{"class":179},"paginate",[66,592,593],{"class":128},"(currentPage, pageCount) ",[66,595,597],{"class":596},"sJ8bj","// → [1, \"…\", 4, 5, 6, \"…\", 50]\n",[43,599,600,601,88,603,605],{},"Map the tokens to ",[52,602,111],{},[52,604,408],{}," yourself — see the docs page for Next.js, Nuxt and TanStack adapters.",[607,608,612,616],"div",{"className":609},[610,611],"n-usage","n-usage-do",[553,613,615],{"id":614},"do","Do",[617,618,619,623,629,638],"ul",{},[620,621,622],"li",{},"Treat your app as the source of truth: own page state, URLs and cursors, and supply the links.",[620,624,625,626,628],{},"Use ",[52,627,54],{}," to compute the numbered page window for known totals.",[620,630,631,632,634,635,637],{},"Set ",[52,633,107],{}," on the active ",[52,636,111],{}," so it announces as the current page.",[620,639,640,641,643,644,646],{},"For icon-only previous/next, put a ",[52,642,223],{}," label inside the ",[52,645,95],{},".",[607,648,651,655],{"className":649},[610,650],"n-usage-dont",[553,652,654],{"id":653},"dont","Don't",[617,656,657,660,673],{},[620,658,659],{},"Don't expect it to render controls or change page on its own — you supply the markup.",[620,661,662,663,666,667,669,670,672],{},"Don't put an ",[52,664,665],{},"aria-label"," on a ",[52,668,95],{}," host; use a ",[52,671,223],{}," child instead.",[620,674,675,676,678],{},"Don't add a second ",[52,677,550],{}," around the root — it is already a navigation landmark.",[680,681,682],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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 .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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":62,"searchDepth":138,"depth":138,"links":684},[685],{"id":40,"depth":138,"text":41,"children":686},[687,688,689],{"id":555,"depth":149,"text":556},{"id":614,"depth":149,"text":615},{"id":653,"depth":149,"text":654},"md",{},"/components/pagination/readme",{"description":62},"components/pagination/readme","GxNmXaSxT43hg2SEW2MDF-0FBBs6fmyyxabqH_WfiaE",{"id":697,"title":4,"body":698,"description":1637,"extension":690,"isNew":17,"meta":1638,"navigation":17,"path":1639,"seo":1640,"status":1641,"stem":1642,"updated":1643,"__hash__":1644},"componentDocs/component-docs/pagination.md",{"type":35,"value":699,"toc":1620},[700,702,708,711,765,787,794,800,803,845,848,852,856,861,864,868,874,878,882,898,902,906,909,912,916,923,927,929,934,982,997,1001,1004,1008,1017,1147,1151,1156,1455,1459,1472,1566,1570,1617],[38,701,41],{"id":40},[43,703,45,704,50,706,55],{},[47,705,49],{},[52,707,54],{},[43,709,710],{},"Import the parts you need — each import registers its custom element:",[57,712,714],{"className":59,"code":713,"language":61,"meta":62,"style":62},"import \"@nordhealth/components/lib/Pagination\"\nimport \"@nordhealth/components/lib/PaginationContent\"\nimport \"@nordhealth/components/lib/PaginationItem\"\nimport \"@nordhealth/components/lib/PaginationLink\"\nimport \"@nordhealth/components/lib/PaginationPrevious\"\nimport \"@nordhealth/components/lib/PaginationNext\"\nimport \"@nordhealth/components/lib/PaginationEllipsis\"\n",[52,715,716,723,730,737,744,751,758],{"__ignoreMap":62},[66,717,718,720],{"class":68,"line":69},[66,719,73],{"class":72},[66,721,722],{"class":76}," \"@nordhealth/components/lib/Pagination\"\n",[66,724,725,727],{"class":68,"line":138},[66,726,73],{"class":72},[66,728,729],{"class":76}," \"@nordhealth/components/lib/PaginationContent\"\n",[66,731,732,734],{"class":68,"line":149},[66,733,73],{"class":72},[66,735,736],{"class":76}," \"@nordhealth/components/lib/PaginationItem\"\n",[66,738,739,741],{"class":68,"line":160},[66,740,73],{"class":72},[66,742,743],{"class":76}," \"@nordhealth/components/lib/PaginationLink\"\n",[66,745,746,748],{"class":68,"line":171},[66,747,73],{"class":72},[66,749,750],{"class":76}," \"@nordhealth/components/lib/PaginationPrevious\"\n",[66,752,753,755],{"class":68,"line":194},[66,754,73],{"class":72},[66,756,757],{"class":76}," \"@nordhealth/components/lib/PaginationNext\"\n",[66,759,760,762],{"class":68,"line":218},[66,761,73],{"class":72},[66,763,764],{"class":76}," \"@nordhealth/components/lib/PaginationEllipsis\"\n",[43,766,767,768,84,770,88,772,92,774,96,776,100,778,780,781,783,784,786],{},"Compose the primitives inside the root, bringing your own interactive element — an ",[52,769,83],{},[52,771,87],{},[52,773,91],{},[52,775,95],{},[52,777,99],{},[52,779,103],{}," state. The root sets ",[52,782,546],{}," and a default accessible label for you, so there's no separate ",[52,785,550],{}," to add.",[43,788,789,790,793],{},"Pagination is navigation-only. A typical data-table footer pairs the numbered pages with a results summary and a page-size selector — but those are your app's own plain elements (a text node and a ",[52,791,792],{},"nord-select","), not pagination sub-components:",[795,796],"example-usage",{"component":797,"name":798,"story":799},"pagination","Pagination overview","Overview",[43,801,802],{},"The primitives are:",[617,804,805,813,818,823,833,840],{},[620,806,807,809,810,812],{},[52,808,5],{}," — the navigation root (a ",[52,811,9],{}," landmark).",[620,814,815,817],{},[52,816,144],{}," — the list row that lays its items out horizontally.",[620,819,820,822],{},[52,821,155],{}," — a single slot in the row.",[620,824,825,827,828,830,831,116],{},[52,826,111],{}," — a page link; set ",[52,829,107],{}," on the active page and it mirrors ",[52,832,115],{},[620,834,835,88,837,839],{},[52,836,166],{},[52,838,440],{}," — the previous/next controls.",[620,841,842,844],{},[52,843,408],{}," — the collapsed-pages marker (…) with a hidden label.",[43,846,847],{},"Pagination renders in the light DOM, so you can style it directly with your own CSS or Tailwind utilities.",[38,849,851],{"id":850},"examples","Examples",[553,853,855],{"id":854},"simple","Simple",[43,857,858,859,646],{},"Plain numbered pages with no previous/next controls. Mark the active page with ",[52,860,107],{},[795,862],{"component":797,"name":863,"story":855},"Simple pagination",[553,865,867],{"id":866},"numbered-pages","Numbered pages",[43,869,870,871,873],{},"The classic numbered pager: previous, the page-window numbers around the current page, an ellipsis for the collapsed gap, and next. Use the ",[52,872,54],{}," utility to compute which numbers (and ellipses) to render around the current page.",[795,875],{"component":797,"name":876,"story":877},"Numbered pagination","Numbered",[553,879,881],{"id":880},"icons-only","Icons only",[43,883,884,885,887,888,890,891,894,895,897],{},"A \"Rows per page\" selector on one end and icon-only previous/next on the other, justified to the row's two ends. For an icon-only ",[52,886,95],{},", put a ",[52,889,223],{}," label ",[47,892,893],{},"inside"," the button — never an ",[52,896,665],{}," on the host.",[795,899],{"component":797,"name":900,"story":901},"Icon-only pagination","IconsOnly",[553,903,905],{"id":904},"cursor-pagination","Cursor pagination",[43,907,908],{},"For collections with unknown totals (e.g. relay-style cursors), compose previous/next only. Your app enables or disables each control from its API response's page info.",[795,910],{"component":797,"name":905,"story":911},"Cursor",[553,913,915],{"id":914},"right-to-left","Right-to-left",[43,917,918,919,922],{},"The primitives use logical properties, so in a right-to-left document they mirror automatically — set ",[52,920,921],{},"dir=\"rtl\""," on a wrapping element. Provide localized previous/next labels and page numbers yourself.",[795,924],{"component":797,"name":925,"story":926},"Right-to-left pagination","Rtl",[38,928,556],{"id":555},[43,930,559,931,933],{},[52,932,54],{}," utility returns the sequence of page numbers (and ellipsis markers) to render, keeping the window centred on the current page and collapsing long gaps into a single ellipsis:",[57,935,937],{"className":59,"code":936,"language":61,"meta":62,"style":62},"import { paginate } from \"@nordhealth/components\"\n\n// paginate(currentPage, pageCount, pagesShown = 7)\npaginate(6, 50) // → [1, \"…\", 4, 5, 6, 7, 8, \"…\", 50]\n",[52,938,939,950,954,959],{"__ignoreMap":62},[66,940,941,943,945,947],{"class":68,"line":69},[66,942,73],{"class":72},[66,944,574],{"class":128},[66,946,577],{"class":72},[66,948,949],{"class":76}," \"@nordhealth/components\"\n",[66,951,952],{"class":68,"line":138},[66,953,585],{"emptyLinePlaceholder":17},[66,955,956],{"class":68,"line":149},[66,957,958],{"class":596},"// paginate(currentPage, pageCount, pagesShown = 7)\n",[66,960,961,963,966,970,973,976,979],{"class":68,"line":160},[66,962,590],{"class":179},[66,964,965],{"class":128},"(",[66,967,969],{"class":968},"sj4cs","6",[66,971,972],{"class":128},", ",[66,974,975],{"class":968},"50",[66,977,978],{"class":128},") ",[66,980,981],{"class":596},"// → [1, \"…\", 4, 5, 6, 7, 8, \"…\", 50]\n",[43,983,600,984,986,987,989,990,993,994,996],{},[52,985,111],{}," (for numbers) and ",[52,988,408],{}," (for the ",[52,991,992],{},"\"…\""," marker) yourself, setting ",[52,995,107],{}," on the token that equals the current page.",[38,998,1000],{"id":999},"framework-integration","Framework integration",[43,1002,1003],{},"Pagination is composition-first, so integration is just rendering your own links from your own state. Bind clicks/navigation with whatever your framework provides — there is no custom event to listen for.",[553,1005,1007],{"id":1006},"nextjs","Next.js",[43,1009,625,1010,1013,1014,1016],{},[52,1011,1012],{},"next/link"," for the page links so navigation is client-side and crawlable. Compute the window with ",[52,1015,54],{}," and read the current page from the URL.",[57,1018,1022],{"className":1019,"code":1020,"language":1021,"meta":62,"style":62},"language-tsx shiki shiki-themes github-light github-dark","import Link from \"next/link\"\nimport { paginate } from \"@nordhealth/components\"\n\nexport function Results({ page, pageCount }: { page: number; pageCount: number }) {\n  return (\n    \u003Cnord-pagination>\n      \u003Cnord-pagination-content>\n        {paginate(page, pageCount).map((token, i) =>\n          token === \"…\" ? (\n            \u003Cnord-pagination-item key={`gap-${i}`}>\n              \u003Cnord-pagination-ellipsis />\n            \u003C/nord-pagination-item>\n          ) : (\n            \u003Cnord-pagination-item key={token}>\n              {/* `current` mirrors aria-current onto the \u003Ca> */}\n              \u003Cnord-pagination-link current={token === page}>\n                \u003CLink href={`?page=${token}`}>{token}\u003C/Link>\n              \u003C/nord-pagination-link>\n            \u003C/nord-pagination-item>\n          )\n        )}\n      \u003C/nord-pagination-content>\n    \u003C/nord-pagination>\n  )\n}\n","tsx",[52,1023,1024,1029,1034,1038,1043,1048,1053,1058,1063,1068,1073,1078,1083,1088,1093,1098,1103,1108,1113,1117,1122,1127,1132,1137,1142],{"__ignoreMap":62},[66,1025,1026],{"class":68,"line":69},[66,1027,1028],{},"import Link from \"next/link\"\n",[66,1030,1031],{"class":68,"line":138},[66,1032,1033],{},"import { paginate } from \"@nordhealth/components\"\n",[66,1035,1036],{"class":68,"line":149},[66,1037,585],{"emptyLinePlaceholder":17},[66,1039,1040],{"class":68,"line":160},[66,1041,1042],{},"export function Results({ page, pageCount }: { page: number; pageCount: number }) {\n",[66,1044,1045],{"class":68,"line":171},[66,1046,1047],{},"  return (\n",[66,1049,1050],{"class":68,"line":194},[66,1051,1052],{},"    \u003Cnord-pagination>\n",[66,1054,1055],{"class":68,"line":218},[66,1056,1057],{},"      \u003Cnord-pagination-content>\n",[66,1059,1060],{"class":68,"line":233},[66,1061,1062],{},"        {paginate(page, pageCount).map((token, i) =>\n",[66,1064,1065],{"class":68,"line":243},[66,1066,1067],{},"          token === \"…\" ? (\n",[66,1069,1070],{"class":68,"line":253},[66,1071,1072],{},"            \u003Cnord-pagination-item key={`gap-${i}`}>\n",[66,1074,1075],{"class":68,"line":263},[66,1076,1077],{},"              \u003Cnord-pagination-ellipsis />\n",[66,1079,1080],{"class":68,"line":272},[66,1081,1082],{},"            \u003C/nord-pagination-item>\n",[66,1084,1085],{"class":68,"line":284},[66,1086,1087],{},"          ) : (\n",[66,1089,1090],{"class":68,"line":312},[66,1091,1092],{},"            \u003Cnord-pagination-item key={token}>\n",[66,1094,1095],{"class":68,"line":321},[66,1096,1097],{},"              {/* `current` mirrors aria-current onto the \u003Ca> */}\n",[66,1099,1100],{"class":68,"line":330},[66,1101,1102],{},"              \u003Cnord-pagination-link current={token === page}>\n",[66,1104,1105],{"class":68,"line":339},[66,1106,1107],{},"                \u003CLink href={`?page=${token}`}>{token}\u003C/Link>\n",[66,1109,1110],{"class":68,"line":348},[66,1111,1112],{},"              \u003C/nord-pagination-link>\n",[66,1114,1115],{"class":68,"line":376},[66,1116,1082],{},[66,1118,1119],{"class":68,"line":385},[66,1120,1121],{},"          )\n",[66,1123,1124],{"class":68,"line":394},[66,1125,1126],{},"        )}\n",[66,1128,1129],{"class":68,"line":403},[66,1130,1131],{},"      \u003C/nord-pagination-content>\n",[66,1133,1134],{"class":68,"line":417},[66,1135,1136],{},"    \u003C/nord-pagination>\n",[66,1138,1139],{"class":68,"line":426},[66,1140,1141],{},"  )\n",[66,1143,1144],{"class":68,"line":435},[66,1145,1146],{},"}\n",[553,1148,1150],{"id":1149},"nuxtjs","Nuxt.js",[43,1152,625,1153,1155],{},[52,1154,91],{}," for the page links and read the current page from the route.",[57,1157,1161],{"className":1158,"code":1159,"language":1160,"meta":62,"style":62},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup lang=\"ts\">\nimport { paginate } from \"@nordhealth/components\"\n\nconst props = defineProps\u003C{ pageCount: number }>()\nconst route = useRoute()\nconst page = computed(() => Number(route.query.page ?? 1))\nconst tokens = computed(() => paginate(page.value, props.pageCount))\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-pagination>\n    \u003Cnord-pagination-content>\n      \u003Cnord-pagination-item v-for=\"(token, i) in tokens\" :key=\"i\">\n        \u003Cnord-pagination-ellipsis v-if=\"token === '…'\" />\n        \u003Cnord-pagination-link v-else :current=\"token === page\">\n          \u003CNuxtLink :to=\"{ query: { ...route.query, page: token } }\">{{ token }}\u003C/NuxtLink>\n        \u003C/nord-pagination-link>\n      \u003C/nord-pagination-item>\n    \u003C/nord-pagination-content>\n  \u003C/nord-pagination>\n\u003C/template>\n","vue",[52,1162,1163,1183,1193,1197,1227,1242,1275,1296,1304,1308,1317,1325,1333,1357,1374,1393,1415,1423,1431,1439,1447],{"__ignoreMap":62},[66,1164,1165,1167,1170,1173,1176,1178,1181],{"class":68,"line":69},[66,1166,129],{"class":128},[66,1168,1169],{"class":132},"script",[66,1171,1172],{"class":179}," setup",[66,1174,1175],{"class":179}," lang",[66,1177,186],{"class":128},[66,1179,1180],{"class":76},"\"ts\"",[66,1182,135],{"class":128},[66,1184,1185,1187,1189,1191],{"class":68,"line":138},[66,1186,73],{"class":72},[66,1188,574],{"class":128},[66,1190,577],{"class":72},[66,1192,949],{"class":76},[66,1194,1195],{"class":68,"line":149},[66,1196,585],{"emptyLinePlaceholder":17},[66,1198,1199,1202,1205,1208,1211,1214,1218,1221,1224],{"class":68,"line":160},[66,1200,1201],{"class":72},"const",[66,1203,1204],{"class":968}," props",[66,1206,1207],{"class":72}," =",[66,1209,1210],{"class":179}," defineProps",[66,1212,1213],{"class":128},"\u003C{ ",[66,1215,1217],{"class":1216},"s4XuR","pageCount",[66,1219,1220],{"class":72},":",[66,1222,1223],{"class":968}," number",[66,1225,1226],{"class":128}," }>()\n",[66,1228,1229,1231,1234,1236,1239],{"class":68,"line":171},[66,1230,1201],{"class":72},[66,1232,1233],{"class":968}," route",[66,1235,1207],{"class":72},[66,1237,1238],{"class":179}," useRoute",[66,1240,1241],{"class":128},"()\n",[66,1243,1244,1246,1249,1251,1254,1257,1260,1263,1266,1269,1272],{"class":68,"line":194},[66,1245,1201],{"class":72},[66,1247,1248],{"class":968}," page",[66,1250,1207],{"class":72},[66,1252,1253],{"class":179}," computed",[66,1255,1256],{"class":128},"(() ",[66,1258,1259],{"class":72},"=>",[66,1261,1262],{"class":179}," Number",[66,1264,1265],{"class":128},"(route.query.page ",[66,1267,1268],{"class":72},"??",[66,1270,1271],{"class":968}," 1",[66,1273,1274],{"class":128},"))\n",[66,1276,1277,1279,1282,1284,1286,1288,1290,1293],{"class":68,"line":218},[66,1278,1201],{"class":72},[66,1280,1281],{"class":968}," tokens",[66,1283,1207],{"class":72},[66,1285,1253],{"class":179},[66,1287,1256],{"class":128},[66,1289,1259],{"class":72},[66,1291,1292],{"class":179}," paginate",[66,1294,1295],{"class":128},"(page.value, props.pageCount))\n",[66,1297,1298,1300,1302],{"class":68,"line":233},[66,1299,536],{"class":128},[66,1301,1169],{"class":132},[66,1303,135],{"class":128},[66,1305,1306],{"class":68,"line":243},[66,1307,585],{"emptyLinePlaceholder":17},[66,1309,1310,1312,1315],{"class":68,"line":253},[66,1311,129],{"class":128},[66,1313,1314],{"class":132},"template",[66,1316,135],{"class":128},[66,1318,1319,1321,1323],{"class":68,"line":263},[66,1320,141],{"class":128},[66,1322,5],{"class":132},[66,1324,135],{"class":128},[66,1326,1327,1329,1331],{"class":68,"line":272},[66,1328,152],{"class":128},[66,1330,144],{"class":132},[66,1332,135],{"class":128},[66,1334,1335,1337,1339,1342,1344,1347,1350,1352,1355],{"class":68,"line":284},[66,1336,163],{"class":128},[66,1338,155],{"class":132},[66,1340,1341],{"class":179}," v-for",[66,1343,186],{"class":128},[66,1345,1346],{"class":76},"\"(token, i) in tokens\"",[66,1348,1349],{"class":179}," :key",[66,1351,186],{"class":128},[66,1353,1354],{"class":76},"\"i\"",[66,1356,135],{"class":128},[66,1358,1359,1361,1363,1366,1368,1371],{"class":68,"line":312},[66,1360,174],{"class":128},[66,1362,408],{"class":132},[66,1364,1365],{"class":179}," v-if",[66,1367,186],{"class":128},[66,1369,1370],{"class":76},"\"token === '…'\"",[66,1372,1373],{"class":128}," />\n",[66,1375,1376,1378,1380,1383,1386,1388,1391],{"class":68,"line":321},[66,1377,174],{"class":128},[66,1379,111],{"class":132},[66,1381,1382],{"class":179}," v-else",[66,1384,1385],{"class":179}," :current",[66,1387,186],{"class":128},[66,1389,1390],{"class":76},"\"token === page\"",[66,1392,135],{"class":128},[66,1394,1395,1397,1400,1403,1405,1408,1411,1413],{"class":68,"line":330},[66,1396,197],{"class":128},[66,1398,1399],{"class":132},"NuxtLink",[66,1401,1402],{"class":179}," :to",[66,1404,186],{"class":128},[66,1406,1407],{"class":76},"\"{ query: { ...route.query, page: token } }\"",[66,1409,1410],{"class":128},">{{ token }}\u003C/",[66,1412,1399],{"class":132},[66,1414,135],{"class":128},[66,1416,1417,1419,1421],{"class":68,"line":339},[66,1418,236],{"class":128},[66,1420,111],{"class":132},[66,1422,135],{"class":128},[66,1424,1425,1427,1429],{"class":68,"line":348},[66,1426,246],{"class":128},[66,1428,155],{"class":132},[66,1430,135],{"class":128},[66,1432,1433,1435,1437],{"class":68,"line":376},[66,1434,256],{"class":128},[66,1436,144],{"class":132},[66,1438,135],{"class":128},[66,1440,1441,1443,1445],{"class":68,"line":385},[66,1442,526],{"class":128},[66,1444,5],{"class":132},[66,1446,135],{"class":128},[66,1448,1449,1451,1453],{"class":68,"line":394},[66,1450,536],{"class":128},[66,1452,1314],{"class":132},[66,1454,135],{"class":128},[553,1456,1458],{"id":1457},"tanstack-table","TanStack Table",[43,1460,1461,1462,1465,1466,1468,1469,1471],{},"TanStack owns the table's 0-based ",[52,1463,1464],{},"pageIndex","; use ",[52,1467,54],{}," only for the visible page window and map page ↔ ",[52,1470,1464],{}," at the boundary.",[57,1473,1477],{"className":1474,"code":1475,"language":1476,"meta":62,"style":62},"language-ts shiki shiki-themes github-light github-dark","import { paginate } from \"@nordhealth/components\"\n\nconst pageCount = table.getPageCount()\nconst page = table.getState().pagination.pageIndex + 1 // 1-based for paginate()\n\nconst tokens = paginate(page, pageCount)\n// Render each numeric token as a nord-pagination-link whose click calls:\n//   table.setPageIndex(token - 1)\n// and the ellipsis token as a nord-pagination-ellipsis.\n","ts",[52,1478,1479,1489,1493,1510,1534,1538,1551,1556,1561],{"__ignoreMap":62},[66,1480,1481,1483,1485,1487],{"class":68,"line":69},[66,1482,73],{"class":72},[66,1484,574],{"class":128},[66,1486,577],{"class":72},[66,1488,949],{"class":76},[66,1490,1491],{"class":68,"line":138},[66,1492,585],{"emptyLinePlaceholder":17},[66,1494,1495,1497,1500,1502,1505,1508],{"class":68,"line":149},[66,1496,1201],{"class":72},[66,1498,1499],{"class":968}," pageCount",[66,1501,1207],{"class":72},[66,1503,1504],{"class":128}," table.",[66,1506,1507],{"class":179},"getPageCount",[66,1509,1241],{"class":128},[66,1511,1512,1514,1516,1518,1520,1523,1526,1529,1531],{"class":68,"line":160},[66,1513,1201],{"class":72},[66,1515,1248],{"class":968},[66,1517,1207],{"class":72},[66,1519,1504],{"class":128},[66,1521,1522],{"class":179},"getState",[66,1524,1525],{"class":128},"().pagination.pageIndex ",[66,1527,1528],{"class":72},"+",[66,1530,1271],{"class":968},[66,1532,1533],{"class":596}," // 1-based for paginate()\n",[66,1535,1536],{"class":68,"line":171},[66,1537,585],{"emptyLinePlaceholder":17},[66,1539,1540,1542,1544,1546,1548],{"class":68,"line":194},[66,1541,1201],{"class":72},[66,1543,1281],{"class":968},[66,1545,1207],{"class":72},[66,1547,1292],{"class":179},[66,1549,1550],{"class":128},"(page, pageCount)\n",[66,1552,1553],{"class":68,"line":218},[66,1554,1555],{"class":596},"// Render each numeric token as a nord-pagination-link whose click calls:\n",[66,1557,1558],{"class":68,"line":233},[66,1559,1560],{"class":596},"//   table.setPageIndex(token - 1)\n",[66,1562,1563],{"class":68,"line":243},[66,1564,1565],{"class":596},"// and the ellipsis token as a nord-pagination-ellipsis.\n",[38,1567,1569],{"id":1568},"accessibility","Accessibility",[617,1571,1572,1585,1596,1610],{},[620,1573,1574,1575,1577,1578,1580,1581,1584],{},"The root is a ",[52,1576,9],{}," landmark with a default accessible label, so screen-reader users can jump to it. Override it with your own ",[52,1579,665],{}," or ",[52,1582,1583],{},"aria-labelledby"," when a page has more than one pager.",[620,1586,1587,1588,1590,1591,1593,1594,116],{},"Mark the active page by setting ",[52,1589,107],{}," on its ",[52,1592,111],{},"; it mirrors ",[52,1595,115],{},[620,1597,1598,1599,890,1601,1603,1604,1606,1607,1609],{},"For icon-only previous/next controls, put a ",[52,1600,223],{},[47,1602,893],{}," the ",[52,1605,95],{}," (never an ",[52,1608,665],{}," on the host). Disable a control when there is nowhere to go.",[620,1611,1612,1613,1616],{},"The ellipsis glyph is hidden from assistive tech and carries a visually-hidden label; localise it with the ",[52,1614,1615],{},"label"," property.",[680,1618,1619],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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 .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":62,"searchDepth":138,"depth":138,"links":1621},[1622,1623,1630,1631,1636],{"id":40,"depth":138,"text":41},{"id":850,"depth":138,"text":851,"children":1624},[1625,1626,1627,1628,1629],{"id":854,"depth":149,"text":855},{"id":866,"depth":149,"text":867},{"id":880,"depth":149,"text":881},{"id":904,"depth":149,"text":905},{"id":914,"depth":149,"text":915},{"id":555,"depth":138,"text":556},{"id":999,"depth":138,"text":1000,"children":1632},[1633,1634,1635],{"id":1006,"depth":149,"text":1007},{"id":1149,"depth":149,"text":1150},{"id":1457,"depth":149,"text":1458},{"id":1568,"depth":138,"text":1569},"Composition-first navigation primitives for paging through a collection — your app owns the state, Nord owns the semantics, layout and styling.",{},"/component-docs/pagination",{"title":4,"description":1637},"alpha","component-docs/pagination",null,"fH68U8aTFV5pqemO04bunQ4eZXX2OL4RtMlq3fi2mk8",{"hasPlayground":17,"stories":1646},[1647,1649,1653,1656,1659,1663,1666],{"id":1648,"name":799,"exportName":799},"components-pagination--overview",{"id":1650,"name":1651,"exportName":1651,"html":1652},"components-pagination--loading","Loading","\u003Cnord-pagination loading>\n        \u003Cnord-pagination-content>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-previous>\n              \u003Cnord-button square href=\"#\">\n                \u003Cnord-icon name=\"arrow-left-small\">\u003C/nord-icon>\n                \u003Cnord-visually-hidden>Previous\u003C/nord-visually-hidden>\n              \u003C/nord-button>\n            \u003C/nord-pagination-previous>\n          \u003C/nord-pagination-item>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-link>\n              \u003Cnord-button variant=\"plain\" href=\"#\">1\u003C/nord-button>\n            \u003C/nord-pagination-link>\n          \u003C/nord-pagination-item>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-link current>\n              \u003Cnord-button variant=\"primary\" href=\"#\">2\u003C/nord-button>\n            \u003C/nord-pagination-link>\n          \u003C/nord-pagination-item>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-link>\n              \u003Cnord-button variant=\"plain\" href=\"#\">3\u003C/nord-button>\n            \u003C/nord-pagination-link>\n          \u003C/nord-pagination-item>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-next>\n              \u003Cnord-button square href=\"#\">\n                \u003Cnord-icon name=\"arrow-right-small\">\u003C/nord-icon>\n                \u003Cnord-visually-hidden>Next\u003C/nord-visually-hidden>\n              \u003C/nord-button>\n            \u003C/nord-pagination-next>\n          \u003C/nord-pagination-item>\n        \u003C/nord-pagination-content>\n      \u003C/nord-pagination>",{"id":1654,"name":877,"exportName":877,"html":1655},"components-pagination--numbered","\u003Cnord-pagination>\n        \u003Cnord-pagination-content>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-previous>\n              \u003Cnord-button square href=\"#\">\n                \u003Cnord-icon name=\"arrow-left-small\">\u003C/nord-icon>\n                \u003Cnord-visually-hidden>Previous\u003C/nord-visually-hidden>\n              \u003C/nord-button>\n            \u003C/nord-pagination-previous>\n          \u003C/nord-pagination-item>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-link>\n              \u003Cnord-button variant=\"plain\" href=\"#\">1\u003C/nord-button>\n            \u003C/nord-pagination-link>\n          \u003C/nord-pagination-item>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-link current>\n              \u003Cnord-button variant=\"primary\" href=\"#\">2\u003C/nord-button>\n            \u003C/nord-pagination-link>\n          \u003C/nord-pagination-item>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-link>\n              \u003Cnord-button variant=\"plain\" href=\"#\">3\u003C/nord-button>\n            \u003C/nord-pagination-link>\n          \u003C/nord-pagination-item>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-ellipsis>\u003C/nord-pagination-ellipsis>\n          \u003C/nord-pagination-item>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-next>\n              \u003Cnord-button square href=\"#\">\n                \u003Cnord-icon name=\"arrow-right-small\">\u003C/nord-icon>\n                \u003Cnord-visually-hidden>Next\u003C/nord-visually-hidden>\n              \u003C/nord-button>\n            \u003C/nord-pagination-next>\n          \u003C/nord-pagination-item>\n        \u003C/nord-pagination-content>\n      \u003C/nord-pagination>",{"id":1657,"name":855,"exportName":855,"html":1658},"components-pagination--simple","\u003Cnord-pagination>\n        \u003Cnord-pagination-content>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-link>\n              \u003Cnord-button variant=\"plain\" href=\"#\">1\u003C/nord-button>\n            \u003C/nord-pagination-link>\n          \u003C/nord-pagination-item>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-link current>\n              \u003Cnord-button variant=\"primary\" href=\"#\">2\u003C/nord-button>\n            \u003C/nord-pagination-link>\n          \u003C/nord-pagination-item>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-link>\n              \u003Cnord-button variant=\"plain\" href=\"#\">3\u003C/nord-button>\n            \u003C/nord-pagination-link>\n          \u003C/nord-pagination-item>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-link>\n              \u003Cnord-button variant=\"plain\" href=\"#\">4\u003C/nord-button>\n            \u003C/nord-pagination-link>\n          \u003C/nord-pagination-item>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-link>\n              \u003Cnord-button variant=\"plain\" href=\"#\">5\u003C/nord-button>\n            \u003C/nord-pagination-link>\n          \u003C/nord-pagination-item>\n        \u003C/nord-pagination-content>\n      \u003C/nord-pagination>",{"id":1660,"name":1661,"exportName":901,"html":1662},"components-pagination--icons-only","Icons Only","\u003Cnord-stack direction=\"horizontal\" align-items=\"center\" justify-content=\"space-between\">\n        \u003Cnord-select label=\"Rows per page\" hide-label size=\"m\">\n          \u003Coption value=\"10\">10\u003C/option>\n          \u003Coption value=\"25\" selected>25\u003C/option>\n          \u003Coption value=\"50\">50\u003C/option>\n          \u003Coption value=\"100\">100\u003C/option>\n        \u003C/nord-select>\n        \u003Cnord-pagination style=\"inline-size: auto; margin: 0;\">\n          \u003Cnord-pagination-content>\n            \u003Cnord-pagination-item>\n              \u003Cnord-pagination-previous>\n                \u003Cnord-button square href=\"#\">\n                  \u003Cnord-icon name=\"arrow-left-small\">\u003C/nord-icon>\n                  \u003Cnord-visually-hidden>Previous\u003C/nord-visually-hidden>\n                \u003C/nord-button>\n              \u003C/nord-pagination-previous>\n            \u003C/nord-pagination-item>\n            \u003Cnord-pagination-item>\n              \u003Cnord-pagination-next>\n                \u003Cnord-button square href=\"#\">\n                  \u003Cnord-icon name=\"arrow-right-small\">\u003C/nord-icon>\n                  \u003Cnord-visually-hidden>Next\u003C/nord-visually-hidden>\n                \u003C/nord-button>\n              \u003C/nord-pagination-next>\n            \u003C/nord-pagination-item>\n          \u003C/nord-pagination-content>\n        \u003C/nord-pagination>\n      \u003C/nord-stack>",{"id":1664,"name":911,"exportName":911,"html":1665},"components-pagination--cursor","\u003Cnord-pagination>\n        \u003Cnord-pagination-content>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-previous>\n              \u003Cnord-button href=\"#\" disabled>\n                \u003Cnord-icon name=\"arrow-left-small\">\u003C/nord-icon>\n                Previous\n              \u003C/nord-button>\n            \u003C/nord-pagination-previous>\n          \u003C/nord-pagination-item>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-next>\n              \u003Cnord-button href=\"#\">\n                Next\n                \u003Cnord-icon name=\"arrow-right-small\">\u003C/nord-icon>\n              \u003C/nord-button>\n            \u003C/nord-pagination-next>\n          \u003C/nord-pagination-item>\n        \u003C/nord-pagination-content>\n      \u003C/nord-pagination>",{"id":1667,"name":926,"exportName":926,"html":1668},"components-pagination--rtl","\u003Cdiv dir=\"rtl\">\n        \u003Cnord-pagination>\n          \u003Cnord-pagination-content>\n            \u003Cnord-pagination-item>\n              \u003Cnord-pagination-previous>\n                \u003Cnord-button square href=\"#\">\n                  \u003Cnord-icon name=\"arrow-right-small\">\u003C/nord-icon>\n                  \u003Cnord-visually-hidden>السابق\u003C/nord-visually-hidden>\n                \u003C/nord-button>\n              \u003C/nord-pagination-previous>\n            \u003C/nord-pagination-item>\n            \u003Cnord-pagination-item>\n              \u003Cnord-pagination-link>\n                \u003Cnord-button variant=\"plain\" href=\"#\">١\u003C/nord-button>\n              \u003C/nord-pagination-link>\n            \u003C/nord-pagination-item>\n            \u003Cnord-pagination-item>\n              \u003Cnord-pagination-link current>\n                \u003Cnord-button variant=\"primary\" href=\"#\">٢\u003C/nord-button>\n              \u003C/nord-pagination-link>\n            \u003C/nord-pagination-item>\n            \u003Cnord-pagination-item>\n              \u003Cnord-pagination-link>\n                \u003Cnord-button variant=\"plain\" href=\"#\">٣\u003C/nord-button>\n              \u003C/nord-pagination-link>\n            \u003C/nord-pagination-item>\n            \u003Cnord-pagination-item>\n              \u003Cnord-pagination-ellipsis label=\"مزيد من الصفحات\">\u003C/nord-pagination-ellipsis>\n            \u003C/nord-pagination-item>\n            \u003Cnord-pagination-item>\n              \u003Cnord-pagination-next>\n                \u003Cnord-button square href=\"#\">\n                  \u003Cnord-icon name=\"arrow-left-small\">\u003C/nord-icon>\n                  \u003Cnord-visually-hidden>التالي\u003C/nord-visually-hidden>\n                \u003C/nord-button>\n              \u003C/nord-pagination-next>\n            \u003C/nord-pagination-item>\n          \u003C/nord-pagination-content>\n        \u003C/nord-pagination>\n      \u003C/div>",[1670,1692,1705,1710,1715,1720,1724,1728,1732,1737,1741,1745,1758,1771,1780,1784,1788,1792,1796,1814,1818,1859,1863,1892,1896,1900,1903,1907,1948,1958,1962,1966,1970,1974,1991,2000,2004,2008,2029,2033,2037,2041,2045,2049,2053,2057,2066,2069,2073,2077,2081,2094,2098,2107,2111,2115,2124,2128,2132,2136,2140],{"name":1671,"tagName":1672,"description":1673,"category":1674,"status":7,"isNew":8,"lightDom":17,"parts":1675},"Accordion","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.","structure",[1676,1680,1684,1688],{"name":1677,"tagName":1678,"description":1679},"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":1681,"tagName":1682,"description":1683},"AccordionItem","nord-accordion-item","Accordion Item groups an Accordion Header and\nits Accordion Panel within an\nAccordion.",{"name":1685,"tagName":1686,"description":1687},"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":1689,"tagName":1690,"description":1691},"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":1693,"tagName":1694,"description":1695,"category":1674,"status":7,"isNew":8,"lightDom":8,"parts":1696},"Aside","nord-aside","Container for the right-side rail + drawer pattern in the app shell.",[1697,1701],{"name":1698,"tagName":1699,"description":1700},"AsideDrawer","nord-aside-drawer","A drawer panel inside \u003Cnord-aside>.",{"name":1702,"tagName":1703,"description":1704},"AsideTrigger","nord-aside-trigger","Rail button that toggles a \u003Cnord-aside-drawer> inside \u003Cnord-aside>.",{"name":1706,"tagName":1707,"description":1708,"category":1709,"status":7,"isNew":8,"lightDom":17},"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.","form",{"name":1711,"tagName":1712,"description":1713,"category":1714,"status":7,"isNew":8,"lightDom":8},"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.","image",{"name":1716,"tagName":1717,"description":1718,"category":1719,"status":7,"isNew":8,"lightDom":8},"Badge","nord-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":1721,"tagName":1722,"description":1723,"category":1719,"status":7,"isNew":8,"lightDom":8},"Banner","nord-banner","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":1725,"tagName":95,"description":1726,"category":1727,"status":7,"isNew":8,"lightDom":8},"Button","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":1729,"tagName":1730,"description":1731,"category":1727,"status":7,"isNew":8,"lightDom":8},"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":1733,"tagName":1734,"description":1735,"category":1736,"status":7,"isNew":8,"lightDom":8},"Calendar","nord-calendar","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.","list",{"name":1738,"tagName":1739,"description":1740,"category":1674,"status":7,"isNew":8,"lightDom":8},"Card","nord-card","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":1742,"tagName":1743,"description":1744,"category":1709,"status":7,"isNew":8,"lightDom":8},"Checkbox","nord-checkbox","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":1746,"tagName":1747,"description":1748,"category":1674,"status":7,"isNew":8,"lightDom":17,"parts":1749},"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.",[1750,1754],{"name":1751,"tagName":1752,"description":1753},"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":1755,"tagName":1756,"description":1757},"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":1759,"tagName":1760,"description":1761,"category":1709,"status":7,"isNew":8,"lightDom":17,"parts":1762},"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/search field whose text is discarded on\ncommit. For a free-text input with suggestions where the typed text is the\nvalue, use Autocomplete instead.",[1763,1767],{"name":1764,"tagName":1765,"description":1766},"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/nord-combobox-option>\n  \u003C/nord-combobox-group>\n\u003C/nord-combobox>\n`\n\nContained options inherit this label as their group. The element renders\nnothing itself and is hidden with display: none`.",{"name":1768,"tagName":1769,"description":1770},"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/nord-combobox-option>\n  \u003Cnord-combobox-option value=\"feature\">Feature\u003C/nord-combobox-option>\n\u003C/nord-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":1772,"tagName":1773,"description":1774,"category":1727,"status":7,"isNew":8,"lightDom":8,"parts":1775},"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.",[1776],{"name":1777,"tagName":1778,"description":1779},"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":1781,"tagName":1782,"description":1783,"category":1709,"status":7,"isNew":8,"lightDom":8},"DatePicker","nord-date-picker","\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":1785,"tagName":1786,"description":1787,"category":1709,"status":7,"isNew":8,"lightDom":17},"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/YYYY-MM-DD;\nthe convenience start-date / end-date props and the valueAsDateRange\ngetter/setter 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":1789,"tagName":1790,"description":1791,"category":1674,"status":7,"isNew":8,"lightDom":8},"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":1793,"tagName":1794,"description":1795,"category":1674,"status":7,"isNew":8,"lightDom":8},"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":1797,"tagName":1798,"description":1799,"category":1800,"status":7,"isNew":8,"lightDom":8,"parts":1801},"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",[1802,1806,1810],{"name":1803,"tagName":1804,"description":1805},"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":1807,"tagName":1808,"description":1809},"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":1811,"tagName":1812,"description":1813},"DropdownSubmenu","nord-dropdown-submenu","Dropdown submenu nests a secondary menu within a parent dropdown.",{"name":1815,"tagName":1816,"description":1817,"category":1719,"status":7,"isNew":8,"lightDom":8},"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":1819,"tagName":1820,"description":1821,"category":1709,"status":7,"isNew":8,"lightDom":17,"parts":1822},"Field","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/hint/error and takes\nits accessible name, description and invalid/disabled state from the Field.",[1823,1827,1831,1835,1839,1843,1847,1851,1855],{"name":1824,"tagName":1825,"description":1826},"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":1828,"tagName":1829,"description":1830},"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":1832,"tagName":1833,"description":1834},"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":1836,"tagName":1837,"description":1838},"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":1840,"tagName":1841,"description":1842},"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":1844,"tagName":1845,"description":1846},"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":1848,"tagName":1849,"description":1850},"FieldSeparator","nord-field-separator","Field Separator draws a thin divider between sections inside a\nField Group.",{"name":1852,"tagName":1853,"description":1854},"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":1856,"tagName":1857,"description":1858},"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":1860,"tagName":1861,"description":1862,"category":1709,"status":7,"isNew":8,"lightDom":8},"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":1864,"tagName":1865,"description":1866,"category":1709,"status":7,"isNew":8,"lightDom":17,"parts":1867},"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.",[1868,1872,1876,1880,1884,1888],{"name":1869,"tagName":1870,"description":1871},"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":1873,"tagName":1874,"description":1875},"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/clear/remove and leaves the active\nfilters and any URL/query state to your app.",{"name":1877,"tagName":1878,"description":1879},"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":1881,"tagName":1882,"description":1883},"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/positions the popout and sets\naria-controls/aria-haspopup/aria-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/query state.",{"name":1885,"tagName":1886,"description":1887},"FilterInput","nord-filter-input","Filter Input is a compact search/text 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/query 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":1889,"tagName":1890,"description":1891},"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/query 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":1893,"tagName":1894,"description":1895,"category":1674,"status":7,"isNew":8,"lightDom":8},"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":1897,"tagName":1898,"description":1899,"category":1674,"status":7,"isNew":8,"lightDom":8},"Header","nord-header","The header is a block of designated space for labelling the currently\nviewed context as well as providing primary actions.",{"name":1901,"tagName":200,"description":1902,"category":1714,"status":7,"isNew":8,"lightDom":8},"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":1904,"tagName":1905,"description":1906,"category":1709,"status":7,"isNew":8,"lightDom":8},"Input","nord-input","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":1908,"tagName":1909,"description":1910,"category":1736,"status":7,"isNew":8,"lightDom":17,"parts":1911},"Item","nord-item","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.",[1912,1916,1920,1924,1928,1932,1936,1940,1944],{"name":1913,"tagName":1914,"description":1915},"ItemActions","nord-item-actions","Item Actions holds the trailing controls of an Item,\nsuch as buttons or a chevron.",{"name":1917,"tagName":1918,"description":1919},"ItemContent","nord-item-content","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":1921,"tagName":1922,"description":1923},"ItemDescription","nord-item-description","Item Description is the secondary, muted line of text in an\nItem. It is clamped to two lines.",{"name":1925,"tagName":1926,"description":1927},"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":1929,"tagName":1930,"description":1931},"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":1933,"tagName":1934,"description":1935},"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":1937,"tagName":1938,"description":1939},"ItemMedia","nord-item-media","Item Media holds the leading visual of an Item, such as\nan icon, an avatar or an image.",{"name":1941,"tagName":1942,"description":1943},"ItemSeparator","nord-item-separator","Item Separator draws a horizontal divider between Item\nrows inside an Item Group.",{"name":1945,"tagName":1946,"description":1947},"ItemTitle","nord-item-title","Item Title is the primary line of text in an Item.",{"name":1949,"tagName":1950,"description":1951,"category":1952,"status":7,"isNew":8,"lightDom":17,"parts":1953},"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.","text",[1954],{"name":1955,"tagName":1956,"description":1957},"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/kbd> \u003Ckbd>K\u003C/kbd>.",{"name":1959,"tagName":1960,"description":1961,"category":1674,"status":7,"isNew":8,"lightDom":8},"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":1963,"tagName":1964,"description":1965,"category":1727,"status":7,"isNew":8,"lightDom":8},"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":1967,"tagName":1968,"description":1969,"category":1719,"status":7,"isNew":8,"lightDom":17},"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":1971,"tagName":1972,"description":1973,"category":1800,"status":7,"isNew":8,"lightDom":8},"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":1975,"tagName":1976,"description":1977,"category":9,"status":7,"isNew":8,"lightDom":8,"parts":1978},"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.",[1979,1983,1987],{"name":1980,"tagName":1981,"description":1982},"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":1984,"tagName":1985,"description":1986},"NavItem","nord-nav-item","Navigation item populates sidebar navigation with links.\nEvery item should be placed inside a navigation group.",{"name":1988,"tagName":1989,"description":1990},"NavToggle","nord-nav-toggle","Nav toggle hides and shows the primary navigation inside \u003Cnord-layout>.",{"name":1992,"tagName":1993,"description":1994,"category":1719,"status":7,"isNew":8,"lightDom":8,"parts":1995},"Notification","nord-notification","Notifications provide important information that requires action or acknowledgement.\nA notification is displayed until the user dismisses it.",[1996],{"name":1997,"tagName":1998,"description":1999},"NotificationGroup","nord-notification-group","Notification group is used to position and style a group of notifications.",{"name":2001,"tagName":2002,"description":2003,"category":1709,"status":7,"isNew":8,"lightDom":17},"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/Page\nstepping, Home/End to the bounds, press-and-hold auto-repeat, optional\nwheel/scrub, 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/max\ngovern interactive stepping and (unless allow-out-of-range is set) clamp the\nvalue; required only surfaces as required/aria-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/valuemin/valuemax/valuetext: those are only valid on a\nrange role (e.g. spinbutton/slider) and would fail aria-allowed-attr\nvalidation on a text input. This mirrors what Base UI's NumberFieldInput\nactually ships (only aria-roledescription).",{"name":2005,"tagName":2006,"description":2007,"category":1709,"status":7,"isNew":8,"lightDom":17},"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 / keychain autofill and native pattern/required 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":4,"tagName":5,"description":2009,"category":9,"status":7,"isNew":8,"lightDom":17,"parts":2010},"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/query syncing, cursors and any data\nfetching; Nord supplies the semantic/layout 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> /\n\u003CNuxtLink>) or a nord-button — and own its href, navigation and\ndisabled state. See the framework adapters in the docs.",[2011,2014,2017,2020,2023,2026],{"name":2012,"tagName":144,"description":2013},"PaginationContent","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":2015,"tagName":408,"description":2016},"PaginationEllipsis","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":2018,"tagName":155,"description":2019},"PaginationItem","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":2021,"tagName":111,"description":2022},"PaginationLink","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":2024,"tagName":440,"description":2025},"PaginationNext","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":2027,"tagName":166,"description":2028},"PaginationPrevious","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":2030,"tagName":2031,"description":2032,"category":1800,"status":7,"isNew":8,"lightDom":8},"Popout","nord-popout","Popouts are small overlays that open on demand. They let users access additional content and actions without cluttering the page.",{"name":2034,"tagName":2035,"description":2036,"category":1719,"status":7,"isNew":8,"lightDom":8},"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":2038,"tagName":2039,"description":2040,"category":1719,"status":7,"isNew":8,"lightDom":8},"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":2042,"tagName":2043,"description":2044,"category":1714,"status":7,"isNew":8,"lightDom":8},"Qrcode","nord-qrcode","QR Code component is used for providing information or links\nto users which they can quickly scan with their smartphone.",{"name":2046,"tagName":2047,"description":2048,"category":1709,"status":7,"isNew":8,"lightDom":8},"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":2050,"tagName":2051,"description":2052,"category":1709,"status":7,"isNew":8,"lightDom":8},"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":2054,"tagName":2055,"description":2056,"category":1674,"status":7,"isNew":8,"lightDom":8},"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":2058,"tagName":2059,"description":2060,"category":1727,"status":7,"isNew":8,"lightDom":8,"parts":2061},"SegmentedControl","nord-segmented-control","Segmented control is used to pick one choice from a set of\nclosely related choices, and immediately apply that selection.",[2062],{"name":2063,"tagName":2064,"description":2065},"SegmentedControlItem","nord-segmented-control-item","Segmented control items populate a segmented control with options.\nEvery item should be placed inside a segmented control.",{"name":2067,"tagName":792,"description":2068,"category":1709,"status":7,"isNew":8,"lightDom":8},"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":2070,"tagName":2071,"description":2072,"category":1719,"status":7,"isNew":8,"lightDom":8},"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":2074,"tagName":2075,"description":2076,"category":1719,"status":7,"isNew":8,"lightDom":8},"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":2078,"tagName":2079,"description":2080,"category":1674,"status":7,"isNew":8,"lightDom":8},"Stack","nord-stack","Stack component manages layout of immediate children along the\nvertical or horizontal axis with optional spacing between each child.",{"name":2082,"tagName":2083,"description":2084,"category":9,"status":7,"isNew":8,"lightDom":8,"parts":2085},"Tab","nord-tab","The interactive tab button for use within the tab group component.",[2086,2090],{"name":2087,"tagName":2088,"description":2089},"TabGroup","nord-tab-group","Tab Group allows multiple panels to be contained within a single window,\nusing tabs as a navigational element.",{"name":2091,"tagName":2092,"description":2093},"TabPanel","nord-tab-panel","The panel which contains content that can be revealed using a tab\nin the tab group component.",{"name":2095,"tagName":2096,"description":2097,"category":1736,"status":7,"isNew":8,"lightDom":8},"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":2099,"tagName":2100,"description":2101,"category":1952,"status":7,"isNew":8,"lightDom":8,"parts":2102},"Tag","nord-tag","Tags represent a set of keywords that help label, categorize,\nand organize objects. Commonly used to signify the attributes of an object.",[2103],{"name":2104,"tagName":2105,"description":2106},"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":2108,"tagName":2109,"description":2110,"category":1709,"status":7,"isNew":8,"lightDom":8},"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":2112,"tagName":2113,"description":2114,"category":1709,"status":7,"isNew":8,"lightDom":8},"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":2116,"tagName":2117,"description":2118,"category":1719,"status":7,"isNew":8,"lightDom":8,"parts":2119},"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.",[2120],{"name":2121,"tagName":2122,"description":2123},"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":2125,"tagName":2126,"description":2127,"category":1709,"status":7,"isNew":8,"lightDom":8},"Toggle","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":2129,"tagName":2130,"description":2131,"category":1800,"status":7,"isNew":8,"lightDom":8},"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":2133,"tagName":2134,"description":2135,"category":1674,"status":7,"isNew":8,"lightDom":8},"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":2137,"tagName":2138,"description":2139,"category":1952,"status":7,"isNew":8,"lightDom":8},"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":2141,"tagName":223,"description":2142,"category":1952,"status":7,"isNew":8,"lightDom":8},"VisuallyHidden","Visually hidden is used when an element needs to be available\nto assistive technologies like screen readers, but be otherwise\nhidden.",[2144,2172,2210,2227,2251,2258,2288,2315,2376,2405,2447,2489,2531,2548,2560,2572,2579,2634,2686,2698,2711,2723,2746,2766,2782,2814,2821,2872,2891,2913,2943,2963,2971],{"name":2145,"displayName":1671,"description":2146,"usageContent":2147,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2152},"pcnf-accordion","Accordions allow users to expand and collapse sections of content, facilitating efficient information organization.","\u003Cdiv class=\"n-usage n-usage-do\">\n\u003Ch3>Do\u003C/h3>\n\u003Cul>\n\u003Cli>Use accordions to manage lengthy content: Implement accordions to organize extensive information, such as FAQs or detailed guides, allowing users to access specific sections without being overwhelmed by the full content.\u003C/li>\n\u003Cli>Employ accordions for step-by-step processes: Utilize accordions to guide users through sequential tasks, presenting each step individually to maintain focus and reduce cognitive load.\u003C/li>\n\u003Cli>Apply accordions when space is limited: In scenarios with constrained space, such as mobile interfaces, use accordions to present content compactly, enabling users to navigate information efficiently.\u003C/li>\n\u003C/ul>\n\u003C/div>\n\u003Cdiv class=\"n-usage n-usage-dont\">\n\u003Ch3>Don't\u003C/h3>\n\u003Cul>\n\u003Cli>Avoid overcomplicating content areas: Refrain from adding non-essential links, buttons, or additional subsections inside the accordion content, as this can make the interface complicated and challenging to navigate.\u003C/li>\n\u003Cli>Don't neglect hover states: Ensure that interactive elements within the accordion have clear hover states to communicate interactivity effectively.\u003C/li>\n\u003Cli>Avoid inconsistent behavior: Ensure that the accordion's expand/collapse behavior is predictable and consistent to prevent user confusion.\u003C/li>\n\u003C/ul>\n\u003C/div>","Provet","New Frontend","#401197","https://frontend-review.provetcloud.com",[2153,2158,2163,2167],{"name":2154,"displayName":2155,"url":2156,"code":2157},"basic","Basic","/main/#/922/product-patterns/usage-examples/accordion/basic","\u003Cscript setup lang=\"ts\">\nimport BaseAccordion from '@/components/base/Accordion.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBaseAccordion header=\"I am an accordion\">\n    \u003Cp class=\"n:py-s\">\n      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident\n      aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam\n      totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit,\n      quibusdam?\n    \u003C/p>\n  \u003C/BaseAccordion>\n\u003C/template>\n",{"name":2159,"displayName":2160,"url":2161,"code":2162},"custom-controllers","Custom controllers","/main/#/922/product-patterns/usage-examples/accordion/custom-controllers","\u003Cscript setup lang=\"ts\">\nimport BaseAccordion from '@/components/base/Accordion.vue'\n\nconst isCollapsed = ref(false)\nconst isDisabled = ref(false)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cdiv\n      slot=\"header-end\"\n      class=\"n:mbs-s n:mbe-l n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\"\n    >\n      \u003Cnord-button\n        type=\"button\"\n        size=\"s\"\n        :disabled=\"isDisabled\"\n        @click=\"isCollapsed = !isCollapsed\"\n      >\n        {{ isCollapsed ? 'Expand' : 'Collapse' }}\n      \u003C/nord-button>\n\n      \u003Cnord-button type=\"button\" size=\"s\" @click=\"isDisabled = !isDisabled\">\n        {{ isDisabled ? 'Enabled' : 'Disable' }}\n      \u003C/nord-button>\n    \u003C/div>\n\n    \u003CBaseAccordion\n      v-model:collapsed=\"isCollapsed\"\n      header-gap=\"l\"\n      :disabled=\"isDisabled\"\n    >\n      \u003Ctemplate #header>\n        \u003Cspan class=\"n:font-heading\">Some title\u003C/span>\n      \u003C/template>\n\n      \u003Ctemplate #header-description>\n        \u003Cspan class=\"n:font-default n:text-weaker\"> Some description \u003C/span>\n      \u003C/template>\n\n      \u003Cdiv class=\"n:py-s\">\n        It is also possible to add header actions. There will be plenty of cases\n        where we'll use a\n        \u003Cnord-tag size=\"s\">BaseAccordion\u003C/nord-tag> to wrap forms, in such\n        scenarios both the \u003Cb>Submit/Save\u003C/b> and \u003Cb>Cancel\u003C/b> buttons can be\n        placed under the card's \u003Ci>header-end\u003C/i> slot.\n        \u003Cdl>\n          \u003Cdt>\n            Additionally, the component expose useful methods to collapse,\n            expand and/or toggle the card's state. The methods names are:\n          \u003C/dt>\n          \u003Cdd>\n            \u003Cul>\n              \u003Cli>\u003Cpre>collapse\u003C/pre>\u003C/li>\n              \u003Cli>\u003Cpre>expand\u003C/pre>\u003C/li>\n              \u003Cli>\u003Cpre>toggleAccordion\u003C/pre>\u003C/li>\n            \u003C/ul>\n          \u003C/dd>\n        \u003C/dl>\n      \u003C/div>\n    \u003C/BaseAccordion>\n  \u003C/div>\n\u003C/template>\n",{"name":103,"displayName":2164,"url":2165,"code":2166},"Disabled","/main/#/922/product-patterns/usage-examples/accordion/disabled","\u003Cscript setup lang=\"ts\">\nimport BaseAccordion from '@/components/base/Accordion.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBaseAccordion header=\"With disabled\" disabled>\n    \u003Cp class=\"n:py-s\">\n      The toggle to expand/collapse the card can also be disabled by using the\n      \u003Ci>disabled\u003C/i> prop. This becomes handy in cases you want to ensure the\n      content of the card is visible, such as an \u003Cb>inline edit\u003C/b> form is\n      loaded and while the form is not submitted, you need the card to remain\n      expanded so the content is visible.\n    \u003C/p>\n  \u003C/BaseAccordion>\n\u003C/template>\n",{"name":2168,"displayName":2169,"url":2170,"code":2171},"with-initial-state","With initial state","/main/#/922/product-patterns/usage-examples/accordion/with-initial-state","\u003Cscript setup lang=\"ts\">\nimport BaseAccordion from '@/components/base/Accordion.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBaseAccordion header=\"With collapsed initial state\" collapsed>\n    \u003Cdiv class=\"n:py-s\">\n      The \u003Cnord-tag size=\"s\">BaseAccordion\u003C/nord-tag> component has two main\n      states:\n      \u003Cdl>\n        \u003Cdt class=\"n:font-heading\">Expanded\u003C/dt>\n        \u003Cdd>\n          \u003Cul>\n            \u003Cli>This is the default state of the component.\u003C/li>\n            \u003Cli>\n              The card content is fully visible and accessible to the user.\n            \u003C/li>\n          \u003C/ul>\n        \u003C/dd>\n        \u003Cdt class=\"n:font-heading\">Collapsed\u003C/dt>\n        \u003Cdd>\n          \u003Cul>\n            \u003Cli>\n              To render the card in a collapsed state, you can use the\n              \u003Ci>collapsed\u003C/i> prop.\n            \u003C/li>\n            \u003Cli>\n              When collapsed, the card content is hidden, and only the header or\n              title is visible.\n            \u003C/li>\n            \u003Cli>\n              This can be useful for conserving space or creating an\n              accordion-style layout.\n            \u003C/li>\n          \u003C/ul>\n        \u003C/dd>\n      \u003C/dl>\n    \u003C/div>\n  \u003C/BaseAccordion>\n\u003C/template>\n",{"name":2173,"displayName":2174,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2175},"pcnf-address","Address",[2176,2179,2184,2187,2192,2197,2202,2207],{"name":2154,"displayName":2155,"url":2177,"code":2178},"/main/#/922/product-patterns/usage-examples/address/basic","\u003Cscript setup lang=\"ts\">\nimport { z } from 'zod'\nimport { useAddressValidation } from '@/composables/address.js'\nimport { useAuth } from '@/composables/useAuth.js'\nimport { useFormValidation } from '@/composables/useFormValidation.js'\nimport FormAddressField from '@/components/form/AddressField.vue'\n\nconst { activeDepartment } = useAuth()\nconst activeDepartmentCountry = computed(\n  () => activeDepartment.value.attributes?.country,\n)\n\nconst inlineForm = ref(false)\n\n// Form logic:\nconst formElement = useTemplateRef('formRef')\nconst { handleErrors } = useFormValidation(formElement)\nconst addressValidationchema = useAddressValidation()\nconst formSchema = z.object({\n  address: addressValidationchema,\n})\nconst validationSchema = toTypedSchema(formSchema)\nconst initialValues = {\n  address: {\n    street_address: '',\n    street_address_2: '',\n    street_address_3: '',\n    zip_code: '',\n    city: '',\n    state: '',\n    country: activeDepartmentCountry.value || '',\n  },\n}\nconst { handleSubmit } = useForm({\n  validationSchema,\n  initialValues,\n})\nconst onSubmit = handleSubmit(\n  (data) => {\n    console.log(data)\n  },\n  () => handleErrors(),\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cform\n    ref=\"formRef\"\n    v-data-pc=\"'demo-form'\"\n    class=\"form-main\"\n    @submit=\"onSubmit\"\n  >\n    \u003Cnord-card padding=\"l\">\n      \u003Ch2 slot=\"header\">Address Form - Standard example\u003C/h2>\n      \u003Cdiv slot=\"header-end\">\n        \u003Cnord-toggle label=\"Inline forms\" @change=\"inlineForm = !inlineForm\">\n        \u003C/nord-toggle>\n      \u003C/div>\n\n      \u003CFormAddressField\n        hide-label\n        label=\"Address\"\n        name=\"address\"\n        :inline-edit=\"inlineForm\"\n      />\n\n      \u003Cnord-button class=\"n:mbs-l\" variant=\"primary\"> Submit \u003C/nord-button>\n    \u003C/nord-card>\n  \u003C/form>\n\u003C/template>\n",{"name":2180,"displayName":2181,"url":2182,"code":2183},"custom-labels","Custom labels","/main/#/922/product-patterns/usage-examples/address/custom-labels","\u003Cscript setup lang=\"ts\">\nimport { z } from 'zod'\nimport { useAddressValidation } from '@/composables/address.js'\nimport { useAuth } from '@/composables/useAuth.js'\nimport { useFormValidation } from '@/composables/useFormValidation.js'\nimport FormAddressField from '@/components/form/AddressField.vue'\n\nconst { activeDepartment } = useAuth()\nconst activeDepartmentCountry = computed(\n  () => activeDepartment.value.attributes?.country,\n)\n\nconst formElement = useTemplateRef('formRef')\nconst { handleErrors } = useFormValidation(formElement)\nconst addressValidationSchema = useAddressValidation()\nconst formSchema = z.object({\n  address: addressValidationSchema,\n})\nconst validationSchema = toTypedSchema(formSchema)\nconst initialValues = {\n  address: {\n    street_address: '',\n    street_address_2: '',\n    street_address_3: '',\n    zip_code: '',\n    city: '',\n    state: '',\n    country: activeDepartmentCountry.value || '',\n  },\n}\nconst { handleSubmit } = useForm({\n  validationSchema,\n  initialValues,\n})\nconst onSubmit = handleSubmit(\n  (data) => {\n    console.log(data)\n  },\n  () => handleErrors(),\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cform\n    ref=\"formRef\"\n    v-data-pc=\"'demo-form'\"\n    class=\"form-main\"\n    @submit=\"onSubmit\"\n  >\n    \u003Cnord-card padding=\"l\">\n      \u003Ch2 slot=\"header\">Address Form - Custom Labels Example\u003C/h2>\n\n      \u003CFormAddressField\n        label=\"Address\"\n        name=\"address\"\n        :field-labels=\"{\n          streetAddress: 'Location address',\n          streetAddress2: 'Location address 2',\n          streetAddress3: 'Location address 3',\n          zipCode: 'Postal code',\n          state: 'Region',\n        }\"\n      />\n\n      \u003Cnord-button class=\"n:mbs-l\" variant=\"primary\"> Submit \u003C/nord-button>\n    \u003C/nord-card>\n  \u003C/form>\n\u003C/template>\n",{"name":103,"displayName":2164,"url":2185,"code":2186},"/main/#/922/product-patterns/usage-examples/address/disabled","\u003Cscript setup lang=\"ts\">\nimport { z } from 'zod'\nimport { useAddressValidation } from '@/composables/address.js'\nimport { useAuth } from '@/composables/useAuth.js'\nimport { useFormValidation } from '@/composables/useFormValidation.js'\nimport FormAddressField from '@/components/form/AddressField.vue'\n\nconst { activeDepartment } = useAuth()\nconst activeDepartmentCountry = computed(\n  () => activeDepartment.value.attributes?.country,\n)\n\nconst formElement = useTemplateRef('formRef')\nconst { handleErrors } = useFormValidation(formElement)\nconst addressValidationSchema = useAddressValidation()\nconst formSchema = z.object({\n  address: addressValidationSchema,\n})\nconst validationSchema = toTypedSchema(formSchema)\nconst initialValues = {\n  address: {\n    street_address: '',\n    street_address_2: '',\n    street_address_3: '',\n    zip_code: '',\n    city: '',\n    state: '',\n    country: activeDepartmentCountry.value || '',\n  },\n}\nconst { handleSubmit } = useForm({\n  validationSchema,\n  initialValues,\n})\nconst onSubmit = handleSubmit(\n  (data) => {\n    console.log(data)\n  },\n  () => handleErrors(),\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cform\n    ref=\"formRef\"\n    v-data-pc=\"'demo-form'\"\n    class=\"form-main\"\n    @submit=\"onSubmit\"\n  >\n    \u003Cnord-card padding=\"l\">\n      \u003Ch2 slot=\"header\">Address Form - Disabled Example\u003C/h2>\n\n      \u003CFormAddressField label=\"Address\" name=\"address\" disabled />\n\n      \u003Cnord-button class=\"n:mbs-l\" variant=\"primary\" disabled>\n        Submit\n      \u003C/nord-button>\n    \u003C/nord-card>\n  \u003C/form>\n\u003C/template>\n",{"name":2188,"displayName":2189,"url":2190,"code":2191},"hidden-fields","Hidden fields","/main/#/922/product-patterns/usage-examples/address/hidden-fields","\u003Cscript setup lang=\"ts\">\nimport { z } from 'zod'\nimport { useAddressValidation } from '@/composables/address.js'\nimport { useAuth } from '@/composables/useAuth.js'\nimport { useFormValidation } from '@/composables/useFormValidation.js'\nimport FormAddressField from '@/components/form/AddressField.vue'\n\nconst { activeDepartment } = useAuth()\nconst activeDepartmentCountry = computed(\n  () => activeDepartment.value.attributes?.country,\n)\n\nconst formElement = useTemplateRef('formRef')\nconst { handleErrors } = useFormValidation(formElement)\nconst addressValidationSchema = useAddressValidation()\nconst formSchema = z.object({\n  address: addressValidationSchema,\n})\nconst validationSchema = toTypedSchema(formSchema)\nconst initialValues = {\n  address: {\n    street_address: '',\n    street_address_2: '',\n    street_address_3: '',\n    zip_code: '',\n    city: '',\n    state: '',\n    country: activeDepartmentCountry.value || '',\n  },\n}\nconst { handleSubmit } = useForm({\n  validationSchema,\n  initialValues,\n})\nconst onSubmit = handleSubmit(\n  (data) => {\n    console.log(data)\n  },\n  () => handleErrors(),\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cform\n    ref=\"formRef\"\n    v-data-pc=\"'demo-form'\"\n    class=\"form-main\"\n    @submit=\"onSubmit\"\n  >\n    \u003Cnord-card padding=\"l\">\n      \u003Ch2 slot=\"header\">Address Form - Hidden Fields Example\u003C/h2>\n\n      \u003CFormAddressField label=\"Address\" name=\"address\" hide-country />\n\n      \u003Cnord-button class=\"n:mbs-l\" variant=\"primary\"> Submit \u003C/nord-button>\n    \u003C/nord-card>\n  \u003C/form>\n\u003C/template>\n",{"name":2193,"displayName":2194,"url":2195,"code":2196},"read-only","Read only","/main/#/922/product-patterns/usage-examples/address/read-only","\u003Cscript setup lang=\"ts\">\nimport { useDisplayNames } from '@/composables/intl.js'\nimport type { AddressData } from '@/composables/address.js'\nimport BaseFormattedAddress from '@/components/base/formatted/Address.vue'\nimport BaseReadOnlyField from '@/components/base/read-only/Field.vue'\nimport BaseCardInnerSection from '@/components/base/card/InnerSection.vue'\nconst { regionName } = useDisplayNames()\n\nconst addresses: AddressData[] = [\n  {\n    country: 'FI',\n    streetAddress: 'Kluuvikatu 4',\n    city: 'Helsinki',\n    zipCode: '00100',\n  },\n  {\n    country: 'NO',\n    streetAddress: 'Fridtjof Nansens vei 6',\n    city: 'Oslo',\n    zipCode: '0369',\n  },\n  {\n    country: 'SE',\n    streetAddress: 'Kapellgränd 10',\n    city: 'Stockholm',\n    zipCode: '116 25',\n  },\n  {\n    country: 'DK',\n    streetAddress: 'Dyrlægevej 48',\n    city: 'Frederiksberg',\n    zipCode: '1870',\n  },\n  {\n    country: 'US',\n    streetAddress: '3601 Lyon St',\n    city: 'San Francisco',\n    state: 'CA',\n    zipCode: '94123',\n  },\n  {\n    country: 'GB',\n    city: 'London',\n    zipCode: 'SW1A 0AA',\n  },\n  {\n    country: 'IT',\n    streetAddress: 'Piazza di San Lorenzo, 9',\n    city: 'Firenze',\n    state: 'FI',\n    zipCode: '50123',\n  },\n  {\n    country: 'ES',\n    streetAddress: 'Ctra. de Vallvidrera al Tibidabo, 111',\n    streetAddress2: 'Sarrià-Sant Gervasi',\n    city: 'Barcelona',\n    zipCode: '08035',\n  },\n  {\n    country: 'DE',\n    streetAddress: 'Pariser Platz 104',\n    city: 'Berlin',\n    zipCode: '10117',\n  },\n  {\n    country: 'EE',\n    streetAddress: 'Raekoja plats 1',\n    city: 'Tallinn',\n    zipCode: '10146',\n  },\n  {\n    country: 'NL',\n    streetAddress: 'Museumplein 6',\n    city: 'Amsterdam',\n    zipCode: '1071 DJ',\n  },\n  {\n    country: 'PT',\n    streetAddress: 'Esplanada Dom Carlos I 23',\n    city: 'Lisbon',\n    zipCode: '1990-005',\n  },\n]\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBaseCardInnerSection>\n    \u003CBaseReadOnlyField\n      v-for=\"address in addresses\"\n      :key=\"address.country\"\n      :label=\"address.country ? regionName(address.country) : ''\"\n    >\n      \u003CBaseFormattedAddress v-bind=\"address\" />\n    \u003C/BaseReadOnlyField>\n  \u003C/BaseCardInnerSection>\n\u003C/template>\n",{"name":2198,"displayName":2199,"url":2200,"code":2201},"with-custom-keys","With custom keys","/main/#/922/product-patterns/usage-examples/address/with-custom-keys","\u003Cscript setup lang=\"ts\">\nimport { z } from 'zod'\nimport { useAddressValidation } from '@/composables/address.js'\nimport { useAuth } from '@/composables/useAuth.js'\nimport { useFormValidation } from '@/composables/useFormValidation.js'\nimport FormAddressField from '@/components/form/AddressField.vue'\n\nconst { activeDepartment } = useAuth()\nconst activeDepartmentCountry = computed(\n  () => activeDepartment.value.attributes?.country,\n)\nconst isUSDepartment = computed(() => activeDepartmentCountry.value === 'US')\n\nconst inlineForm = ref(false)\n\nconst formElement = useTemplateRef('formRef')\nconst { handleErrors } = useFormValidation(formElement)\nconst addressValidationchema = useAddressValidation({\n  fieldNames: {\n    streetAddress: 'home_address',\n    streetAddress2: 'home_address_2',\n    streetAddress3: 'home_address_3',\n    state: activeDepartmentCountry.value === 'US' ? 'state' : 'country_region',\n  },\n})\nconst formSchema = z.object({\n  address: addressValidationchema,\n})\nconst validationSchema = toTypedSchema(formSchema)\nconst initialValues = {\n  address: {\n    // Custom key names:\n    // - naming `home_address` instead of `street address`.\n    // - naming `state` for US and `country_region` for other countries.\n    home_address: '',\n    home_address_2: '',\n    home_address_3: '',\n    zip_code: '',\n    city: '',\n    [activeDepartmentCountry.value === 'US' ? 'state' : 'country_region']: '',\n    country: activeDepartmentCountry.value || '',\n  },\n}\nconst { handleSubmit } = useForm({\n  validationSchema,\n  initialValues,\n})\nconst onSubmit = handleSubmit(\n  (data) => {\n    console.log(data)\n  },\n  () => handleErrors(),\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cform\n    ref=\"formRef\"\n    v-data-pc=\"'demo-form'\"\n    class=\"form-main\"\n    @submit=\"onSubmit\"\n  >\n    \u003Cnord-card padding=\"l\">\n      \u003Ch2 slot=\"header\">Address Form - Custom keys example\u003C/h2>\n      \u003Cdiv slot=\"header-end\">\n        \u003Cnord-toggle label=\"Inline forms\" @change=\"inlineForm = !inlineForm\">\n        \u003C/nord-toggle>\n      \u003C/div>\n\n      \u003CFormAddressField\n        hide-label\n        label=\"Address\"\n        name=\"address\"\n        :field-names=\"{\n          streetAddress: 'home_address',\n          streetAddress2: 'home_address_2',\n          streetAddress3: 'home_address_3',\n          state: isUSDepartment ? 'state' : 'country_region',\n        }\"\n        :inline-edit=\"inlineForm\"\n      />\n\n      \u003Cnord-button class=\"n:mbs-l\" variant=\"primary\"> Submit \u003C/nord-button>\n    \u003C/nord-card>\n  \u003C/form>\n\u003C/template>\n",{"name":2203,"displayName":2204,"url":2205,"code":2206},"with-form-multiple","With form multiple","/main/#/922/product-patterns/usage-examples/address/with-form-multiple","\u003Cscript setup lang=\"ts\">\nimport { z } from 'zod'\nimport { useAddressValidation } from '@/composables/address.js'\nimport { useAuth } from '@/composables/useAuth.js'\nimport { useFormValidation } from '@/composables/useFormValidation.js'\nimport BaseStackDivided from '@/components/base/stack/Divided.vue'\nimport FormAddressField from '@/components/form/AddressField.vue'\n\nconst { activeDepartment } = useAuth()\nconst activeDepartmentCountry = computed(\n  () => activeDepartment.value.attributes?.country,\n)\n\nconst inlineForm = ref(false)\n\n// Form logic:\nconst formElement = useTemplateRef('formRef')\nconst { handleErrors: handleErrors } = useFormValidation(formElement)\nconst formSchema = z.object({\n  multiple_addresses: useAddressValidation().array(),\n})\nconst validationSchema = toTypedSchema(formSchema)\nconst initialValues = {\n  multiple_addresses: [\n    {\n      street_address: '',\n      street_address_2: '',\n      street_address_3: '',\n      zip_code: '',\n      city: '',\n      state: '',\n      country: activeDepartmentCountry.value || '',\n    },\n  ],\n}\nconst { handleSubmit } = useForm({\n  validationSchema,\n  initialValues,\n})\nconst onSubmit = handleSubmit(\n  (data) => {\n    console.log(data)\n  },\n  () => handleErrors(),\n)\n\nconst { remove, push, fields } = useFieldArray('multiple_addresses')\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cform\n    ref=\"formRef\"\n    v-data-pc=\"'demo-form'\"\n    class=\"form-main\"\n    @submit=\"onSubmit\"\n  >\n    \u003Cnord-card padding=\"l\">\n      \u003Ch2 slot=\"header\">Address - Multiple addresses example\u003C/h2>\n\n      \u003CBaseStackDivided>\n        \u003Cdiv v-for=\"(field, idx) in fields\" :key=\"field.key\">\n          \u003CFormAddressField\n            hide-label\n            label=\"Multiple Addresses\"\n            :name=\"`multiple_addresses[${idx}]`\"\n            :inline-edit=\"inlineForm\"\n          />\n          \u003Cnord-button\n            class=\"n:mbs-m\"\n            square\n            type=\"button\"\n            aria-label=\"Delete\"\n            @click=\"remove(idx)\"\n          >\n            \u003Cnord-icon size=\"s\" name=\"interface-delete\">\u003C/nord-icon>\n          \u003C/nord-button>\n        \u003C/div>\n\n        \u003Cnord-button\n          class=\"n:mbs-m\"\n          type=\"button\"\n          @click=\"push(initialValues.multiple_addresses[0])\"\n        >\n          Add new address\n        \u003C/nord-button>\n      \u003C/BaseStackDivided>\n\n      \u003Cnord-button class=\"n:mbs-l\" variant=\"primary\"> Submit \u003C/nord-button>\n    \u003C/nord-card>\n  \u003C/form>\n\u003C/template>\n",{"name":2168,"displayName":2169,"url":2208,"code":2209},"/main/#/922/product-patterns/usage-examples/address/with-initial-state","\u003Cscript setup lang=\"ts\">\nimport { z } from 'zod'\nimport { useAddressValidation } from '@/composables/address.js'\nimport { useFormValidation } from '@/composables/useFormValidation.js'\nimport FormAddressField from '@/components/form/AddressField.vue'\n\nconst formElement = useTemplateRef('formRef')\nconst { handleErrors } = useFormValidation(formElement)\nconst addressValidationSchema = useAddressValidation()\nconst formSchema = z.object({\n  address: addressValidationSchema,\n})\nconst validationSchema = toTypedSchema(formSchema)\nconst initialValues = {\n  address: {\n    street_address: 'Drottninggatan 50',\n    street_address_2: '',\n    street_address_3: '',\n    zip_code: '11121',\n    city: 'Stockholm',\n    state: 'SE-AB',\n    country: 'SE',\n  },\n}\nconst { handleSubmit } = useForm({\n  validationSchema,\n  initialValues,\n})\nconst onSubmit = handleSubmit(\n  (data) => {\n    console.log(data)\n  },\n  () => handleErrors(),\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cform\n    ref=\"formRef\"\n    v-data-pc=\"'demo-form'\"\n    class=\"form-main\"\n    @submit=\"onSubmit\"\n  >\n    \u003Cnord-card padding=\"l\">\n      \u003Ch2 slot=\"header\">Address Form - With Initial State Example\u003C/h2>\n\n      \u003CFormAddressField label=\"Address\" name=\"address\" />\n\n      \u003Cnord-button class=\"n:mbs-l\" variant=\"primary\"> Submit \u003C/nord-button>\n    \u003C/nord-card>\n  \u003C/form>\n\u003C/template>\n",{"name":2211,"displayName":2212,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2213},"pcnf-billing-summary","Billing Summary",[2214,2217,2222],{"name":2154,"displayName":2155,"url":2215,"code":2216},"/main/#/922/product-patterns/usage-examples/billing-summary/basic","\u003Cscript setup lang=\"ts\">\nimport type { TableSummaryData } from '@/components/BillingSummary.vue'\nimport BillingSummary from '@/components/BillingSummary.vue'\n\nconst summaryData = {\n  header: [['Invoice total', '$73.00']],\n  body: [['Prepayment balance', '$0.00']],\n  footer: ['Amount due', '$73.00'],\n} satisfies TableSummaryData\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBillingSummary :data=\"summaryData\" />\n\u003C/template>\n",{"name":2218,"displayName":2219,"url":2220,"code":2221},"with-multiple-body-items","With multiple body items","/main/#/922/product-patterns/usage-examples/billing-summary/with-multiple-body-items","\u003Cscript setup lang=\"ts\">\nimport type { TableSummaryData } from '@/components/BillingSummary.vue'\nimport BillingSummary from '@/components/BillingSummary.vue'\n\nconst summaryData = {\n  header: [['Invoice total', '$73.00']],\n  body: [\n    ['Prepayment balance', '$0.00'],\n    ['Cash payment', '$3.00'],\n    ['Card payment', '$5.00'],\n  ],\n  footer: ['Amount due', '$65.00'],\n} satisfies TableSummaryData\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBillingSummary :data=\"summaryData\" />\n\u003C/template>\n",{"name":2223,"displayName":2224,"url":2225,"code":2226},"with-multiple-columns","With multiple columns","/main/#/922/product-patterns/usage-examples/billing-summary/with-multiple-columns","\u003Cscript setup lang=\"ts\">\nimport type { TableSummaryData } from '@/components/BillingSummary.vue'\nimport BillingSummary from '@/components/BillingSummary.vue'\n\nconst summaryData = {\n  header: [['Invoice total', '', '$73.00']],\n  body: [\n    ['Card payment', '24/10/2024', '-$400.00'],\n    ['Discount', '24/10/2024', '-$100.00'],\n  ],\n  footer: ['Amount due', '', '$73.00'],\n} satisfies TableSummaryData\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBillingSummary :data=\"summaryData\" />\n\u003C/template>\n",{"name":2228,"displayName":2229,"description":2230,"usageContent":2231,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2232},"pcnf-breadcrumbs","Breadcrumbs","Breadcrumbs show the navigation path users followed to arrive at the current page, making it simple to return to earlier sections.","\u003Cdiv class=\"n-usage n-usage-do\">\n\u003Ch3>Do\u003C/h3>\n\u003Cul>\n\u003Cli>Use breadcrumbs to display a hierarchy of pages and improve navigation.\u003C/li>\n\u003Cli>Include breadcrumbs to represent a hierarchy with multiple parent pages.\u003C/li>\n\u003Cli>Show the current page in the breadcrumbs if its title is not visible elsewhere on the page.\u003C/li>\n\u003C/ul>\n\u003C/div>\n\u003Cdiv class=\"n-usage n-usage-dont\">\n\u003Ch3>Don't\u003C/h3>\n\u003Cul>\n\u003Cli>Avoid using breadcrumbs if the page only has a single parent page. Use a Link instead.\u003C/li>\n\u003Cli>Don't use breadcrumbs to indicate progress in a task.\u003C/li>\n\u003Cli>Prevent redundancy. Exclude the current page from breadcrumbs if its title is already displayed on the page.\u003C/li>\n\u003C/ul>\n\u003C/div>",[2233,2236,2241,2246],{"name":2154,"displayName":2155,"url":2234,"code":2235},"/main/#/922/product-patterns/usage-examples/breadcrumbs/basic","\u003Cscript setup lang=\"ts\">\nimport {\n  type BreadcrumbsType,\n  useBreadcrumbs,\n} from '@/composables/useBreadcrumbs.js'\nimport AppBreadcrumbs from '@/components/app/Breadcrumbs.vue'\nconst route = useRoute()\nconst breadcrumbs = ref\u003CBreadcrumbsType>({\n  category: 'common.breadcrumbs.label',\n  items: [\n    {\n      // @ts-expect-error - translation string\n      label: 'Breadcrumbs 1',\n      to: {\n        path: route.path,\n        query: { consultation_id: 1 },\n      },\n    },\n    {\n      // @ts-expect-error - translation string\n      label: 'Breadcrumbs 2',\n      to: {\n        path: route.path,\n        query: { consultation_id: 2 },\n      },\n    },\n  ],\n})\n\nuseBreadcrumbs().mutate(breadcrumbs.value)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CAppBreadcrumbs />\n\u003C/template>\n",{"name":2237,"displayName":2238,"url":2239,"code":2240},"external","External","/main/#/922/product-patterns/usage-examples/breadcrumbs/external","\u003Cscript setup lang=\"ts\">\nimport {\n  type BreadcrumbsType,\n  useBreadcrumbs,\n} from '@/composables/useBreadcrumbs.js'\nimport AppBreadcrumbs from '@/components/app/Breadcrumbs.vue'\nconst route = useRoute()\nconst breadcrumbs = ref\u003CBreadcrumbsType>({\n  category: 'common.breadcrumbs.label',\n  items: [\n    {\n      // @ts-expect-error - translation string\n      label: 'Breadcrumbs 1 (external)',\n      to: 'https://nordhealth.design',\n      external: true,\n      target: '_blank',\n    },\n    {\n      // @ts-expect-error - translation string\n      label: 'Breadcrumbs 2',\n      to: {\n        path: route.path,\n        query: { consultation_id: 2 },\n      },\n    },\n  ],\n})\n\nuseBreadcrumbs().mutate(breadcrumbs.value)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CAppBreadcrumbs />\n\u003C/template>\n",{"name":2242,"displayName":2243,"url":2244,"code":2245},"mutate","Mutate","/main/#/922/product-patterns/usage-examples/breadcrumbs/mutate","\u003Cscript setup lang=\"ts\">\nimport {\n  type BreadcrumbsType,\n  useBreadcrumbs,\n} from '@/composables/useBreadcrumbs.js'\nimport { pad } from '@/utils/number.js'\nimport AppBreadcrumbs from '@/components/app/Breadcrumbs.vue'\nconst route = useRoute()\nconst maxBreadcrumbs = 5\nconst breadcrumbsCount = ref(2)\nconst breadcrumbs = ref\u003CBreadcrumbsType>({\n  category: 'common.breadcrumbs.label',\n  items: [],\n})\n\nfunction updateBreadcrumbsCount(event: Event) {\n  breadcrumbsCount.value = Number((event.target as HTMLInputElement).value)\n}\n\nwatchEffect(() => {\n  // reset the breadcrumbs\n  breadcrumbs.value.items = []\n\n  for (let step = 0; step \u003C breadcrumbsCount.value; step++) {\n    if (breadcrumbsCount.value === 1 || step === breadcrumbsCount.value - 1) {\n      /**\n       * ! The example below demonstrates how to use interpolation with a translation string\n       */\n      breadcrumbs.value.items.push({\n        // @ts-expect-error - translation string\n        label: `Breadcrumbs ${pad(step + 1)}`,\n        to: { path: route.path, query: { consultation_id: step } },\n      })\n    } else {\n      breadcrumbs.value.items.push({\n        // @ts-expect-error - translation string\n        label: `Breadcrumbs ${pad(step + 1)}`,\n        to: { path: route.path, query: { consultation_id: pad(step + 1, 9) } },\n      })\n    }\n  }\n\n  useBreadcrumbs().mutate(breadcrumbs.value)\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n    \u003CAppBreadcrumbs />\n\n    \u003Cnord-card padding=\"l\">\n      \u003Ch2 slot=\"header\">Breadcrumbs component\u003C/h2>\n\n      \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n        \u003Cnord-range\n          label=\"Breadcrumbs count\"\n          :value=\"breadcrumbsCount.toString()\"\n          :min=\"1\"\n          :max=\"maxBreadcrumbs\"\n          @input=\"updateBreadcrumbsCount\"\n        />\n\n        \u003Cp>See the example below.\u003C/p>\n\n        \u003Ccode\n          class=\"n:rounded-default n:border n:bg-status-neutral-weak n:p-s n:text-default\"\n        >\n          useBreadcrumbs().mutate({{ breadcrumbs }})\n        \u003C/code>\n      \u003C/div>\n    \u003C/nord-card>\n  \u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\ncode {\n  white-space: pre-wrap;\n}\n\u003C/style>\n",{"name":2247,"displayName":2248,"url":2249,"code":2250},"target-blank","Target blank","/main/#/922/product-patterns/usage-examples/breadcrumbs/target-blank","\u003Cscript setup lang=\"ts\">\nimport {\n  type BreadcrumbsType,\n  useBreadcrumbs,\n} from '@/composables/useBreadcrumbs.js'\nimport AppBreadcrumbs from '@/components/app/Breadcrumbs.vue'\nconst route = useRoute()\nconst breadcrumbs = ref\u003CBreadcrumbsType>({\n  category: 'common.breadcrumbs.label',\n  items: [\n    {\n      // @ts-expect-error - translation string\n      label: 'Breadcrumbs 1 (new tab)',\n      to: {\n        path: route.path,\n        query: { consultation_id: 1 },\n      },\n      target: '_blank',\n    },\n    {\n      // @ts-expect-error - translation string\n      label: 'Breadcrumbs 2',\n      to: {\n        path: route.path,\n        query: { consultation_id: 2 },\n      },\n    },\n  ],\n})\n\nuseBreadcrumbs().mutate(breadcrumbs.value)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CAppBreadcrumbs />\n\u003C/template>\n",{"name":2252,"displayName":2253,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2254},"pcnf-bulk-actions-header","Bulk Actions Header",[2255],{"name":2154,"displayName":2155,"url":2256,"code":2257},"/main/#/922/product-patterns/usage-examples/bulk-actions-header/basic","\u003Cscript lang=\"ts\" setup>\nimport { createColumnHelper } from '@tanstack/vue-table'\nimport BaseButton from '@/components/base/Button.vue'\nimport BaseCardDataTable from '@/components/base/card/DataTable.vue'\nimport BaseErrorCard from '@/components/base/ErrorCard.vue'\nimport BaseLoadingCard from '@/components/base/LoadingCard.vue'\nimport type { UsersListResponse } from '@/models/users.js'\nimport {\n  useDataTableStateWithPagination,\n  useDataTableWithState,\n  useHasAllPageRowsSelected,\n} from '@/composables/dataTable.js'\nimport {\n  ECellType,\n  type ColumnSchema,\n  useDataTableColumns,\n} from '@/composables/dataTableColumns.js'\nimport { useDataTableUrlState } from '@/composables/dataTableState.js'\nimport { useUserListQuery } from '@/composables/users.js'\nimport useTranslation from '@/composables/useTranslation.js'\n\nconst tPage = useTranslation('pages.users.list')\n\ntype UserRow = UsersListResponse['data'][0]\n\nconst tableState = useDataTableUrlState('list')\nconst query = useUserListQuery(tableState.pagination, tableState.sorting)\n\nconst columnSchema = computed\u003CColumnSchema\u003CUserRow>[]>(() => [\n  {\n    id: 'id',\n    accessorKey: 'id',\n    header: tPage('columns.id'),\n    cellType: ECellType.SmallId,\n  },\n  {\n    id: 'email',\n    accessorKey: 'attributes.email',\n    header: tPage('columns.email'),\n    cellType: ECellType.Email,\n  },\n  {\n    id: 'first_name',\n    accessorKey: 'attributes.first_name',\n    header: tPage('columns.firstName'),\n  },\n  {\n    id: 'last_name',\n    accessorKey: 'attributes.last_name',\n    header: tPage('columns.lastName'),\n  },\n])\n\nconst { columns } = useDataTableColumns(\n  createColumnHelper\u003CUserRow>(),\n  columnSchema,\n)\n\nconst data = computed(() => query.data?.data || [])\nconst { tableStateWithPagination } = useDataTableStateWithPagination({\n  tableState,\n  query,\n})\nconst table = useDataTableWithState(\n  {\n    data,\n    columns,\n    manualPagination: true,\n    manualSorting: true,\n    enableRowSelection: true,\n    getRowId: (row) => row.id,\n  },\n  tableStateWithPagination,\n)\n\nconst hasAllPageRowsSelected = useHasAllPageRowsSelected(\n  tableState.rowSelection,\n  data,\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBaseErrorCard v-if=\"query.isError\" />\n  \u003CBaseLoadingCard v-else-if=\"query.isPending\" />\n  \u003CBaseCardDataTable\n    v-else\n    heading=\"Bulk Actions Header\"\n    :table\n    :row-selection=\"tableState.rowSelection.value\"\n    :has-all-page-rows-selected\n    :is-loading=\"query.isPlaceholderData\"\n    table-caption=\"Bulk actions header example\"\n  >\n    \u003Ctemplate #bulk-actions>\n      \u003CBaseButton size=\"s\"> Export \u003C/BaseButton>\n      \u003CBaseButton size=\"s\"> Action 1 \u003C/BaseButton>\n    \u003C/template>\n  \u003C/BaseCardDataTable>\n\u003C/template>\n",{"name":2259,"displayName":2260,"description":2261,"usageContent":2262,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2263},"pcnf-card-collapsible","Card Collapsible","Card collapsible is designed to organize related content in a space-efficient way. It allows users to expand or collapse sections.","\u003Cdiv class=\"n-usage n-usage-do\">\n\u003Ch3>Do\u003C/h3>\n\u003Cul>\n\u003Cli>Use it when users need to view multiple sections simultaneously.\u003C/li>\n\u003Cli>Use it to streamline pages and minimize scrolling, especially for non-essential content that doesn't require immediate interaction.\u003C/li>\n\u003C/ul>\n\u003C/div>\n\u003Cdiv class=\"n-usage n-usage-dont\">\n\u003Ch3>Don't\u003C/h3>\n\u003Cul>\n\u003Cli>Avoid using collapses when users need to switch quickly between sections, as it may push other content down.\u003C/li>\n\u003Cli>Avoid nesting collapses, as multiple layers of hidden content can create a tedious and frustrating user experience.\u003C/li>\n\u003C/ul>\n\u003C/div>",[2264,2267,2270,2275,2278,2283],{"name":2154,"displayName":2155,"url":2265,"code":2266},"/main/#/922/product-patterns/usage-examples/card-collapsible/basic","\u003Cscript setup lang=\"ts\">\nimport BaseCardCollapsible from '@/components/base/card/Collapsible.vue'\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBaseCardCollapsible title=\"I am a collapsible card\">\n    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident\n    aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam\n    totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit,\n    quibusdam?\n  \u003C/BaseCardCollapsible>\n\u003C/template>\n",{"name":103,"displayName":2164,"url":2268,"code":2269},"/main/#/922/product-patterns/usage-examples/card-collapsible/disabled","\u003Cscript setup lang=\"ts\">\nimport BaseCardCollapsible from '@/components/base/card/Collapsible.vue'\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBaseCardCollapsible title=\"With disabled toggle\" disabled>\n    The toggle to expand/collapse the card can also be disabled by using the\n    \u003Ci>disabled\u003C/i> prop. This becomeshandy in cases you want to ensure the\n    content of the card is visible, such as an \u003Cb>inline edit\u003C/b> form is loaded\n    and while the form is not submitted, you need the card to remain expanded so\n    the content is visible.\n  \u003C/BaseCardCollapsible>\n\u003C/template>\n",{"name":2271,"displayName":2272,"url":2273,"code":2274},"with-header-actions","With header actions","/main/#/922/product-patterns/usage-examples/card-collapsible/with-header-actions","\u003Cscript setup lang=\"ts\">\nimport BaseCardCollapsible from '@/components/base/card/Collapsible.vue'\n\nconst cardCollapsibleElement =\n  useTemplateRef\u003CInstanceType\u003Ctypeof BaseCardCollapsible>>('cardCollapsibleRef')\nconst isCardWithActionsCollapsed = ref(false)\nconst hasCardWithActionsDisabledToggle = ref(false)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBaseCardCollapsible\n    ref=\"cardCollapsibleRef\"\n    title=\"With header actions\"\n    :disabled=\"hasCardWithActionsDisabledToggle\"\n    @card:collapse=\"isCardWithActionsCollapsed = true\"\n    @card:expand=\"isCardWithActionsCollapsed = false\"\n    @card:toggle-state=\"isCardWithActionsCollapsed = $event\"\n  >\n    \u003Ctemplate #header-end>\n      \u003Cnord-button\n        type=\"button\"\n        size=\"s\"\n        :disabled=\"hasCardWithActionsDisabledToggle\"\n        @click=\"cardCollapsibleElement?.toggleCard\"\n      >\n        Toggle state\n      \u003C/nord-button>\n\n      \u003Cnord-button\n        type=\"button\"\n        size=\"s\"\n        @click=\"\n          hasCardWithActionsDisabledToggle = !hasCardWithActionsDisabledToggle\n        \"\n      >\n        {{\n          !hasCardWithActionsDisabledToggle ? 'Disable toggle' : 'Enable toggle'\n        }}\n      \u003C/nord-button>\n    \u003C/template>\n\n    It is also possible to add header actions. There will be plenty of cases\n    where we'll use a \u003Cnord-tag size=\"s\">CardCollapsible\u003C/nord-tag> to wrap\n    forms, in such scenarios both the \u003Cb>Submit/Save\u003C/b> and\n    \u003Cb>Cancel\u003C/b> buttons can be placed under the card's \u003Ci>header-end\u003C/i> slot.\n    \u003Cdl>\n      \u003Cdt>\n        Additionally, the component expose useful methods to collapse, expand\n        and/or toggle the card's state. The methods names are:\n      \u003C/dt>\n      \u003Cdd>\n        \u003Cul>\n          \u003Cli>\u003Cpre>collapse\u003C/pre>\u003C/li>\n          \u003Cli>\u003Cpre>expand\u003C/pre>\u003C/li>\n          \u003Cli>\u003Cpre>toggleCard\u003C/pre>\u003C/li>\n        \u003C/ul>\n      \u003C/dd>\n    \u003C/dl>\n  \u003C/BaseCardCollapsible>\n\u003C/template>\n",{"name":2168,"displayName":2169,"url":2276,"code":2277},"/main/#/922/product-patterns/usage-examples/card-collapsible/with-initial-state","\u003Cscript setup lang=\"ts\">\nimport BaseCardCollapsible from '@/components/base/card/Collapsible.vue'\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBaseCardCollapsible title=\"With collapsed initial state\" collapsed>\n    The \u003Cnord-tag size=\"s\">CardCollapsible\u003C/nord-tag> component has two main\n    states:\n    \u003Cdl>\n      \u003Cdt class=\"n:font-heading\">Expanded\u003C/dt>\n      \u003Cdd>\n        \u003Cul>\n          \u003Cli>This is the default state of the component.\u003C/li>\n          \u003Cli>The card content is fully visible and accessible to the user.\u003C/li>\n        \u003C/ul>\n      \u003C/dd>\n      \u003Cdt class=\"n:font-heading\">Collapsed\u003C/dt>\n      \u003Cdd>\n        \u003Cul>\n          \u003Cli>\n            To render the card in a collapsed state, you can use the\n            \u003Ci>collapsed\u003C/i> prop.\n          \u003C/li>\n          \u003Cli>\n            When collapsed, the card content is hidden, and only the header or\n            title is visible.\n          \u003C/li>\n          \u003Cli>\n            This can be useful for conserving space or creating an\n            accordion-style layout.\n          \u003C/li>\n        \u003C/ul>\n      \u003C/dd>\n    \u003C/dl>\n  \u003C/BaseCardCollapsible>\n\u003C/template>\n",{"name":2279,"displayName":2280,"url":2281,"code":2282},"with-padding-value","With padding value","/main/#/922/product-patterns/usage-examples/card-collapsible/with-padding-value","\u003Cscript setup lang=\"ts\">\nimport BaseCardCollapsible from '@/components/base/card/Collapsible.vue'\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBaseCardCollapsible title=\"With padding value\" padding=\"m\">\n    \u003Cnord-stack>\n      \u003Cp>\n        The \u003Cnord-tag size=\"s\">CardCollapsible\u003C/nord-tag> component extends the\n        Nord Design System\n        \u003Ca href=\"https://nordhealth.design/components/card/\" target=\"_blank\">\n          Card\n        \u003C/a>\n        component, which means you get all of the \u003Ci>properties\u003C/i>,\n        \u003Ci>slots\u003C/i>, \u003Ci>CSS properties\u003C/i> and their default values.\n      \u003C/p>\n      \u003Cp>\n        Now, in most cases this component will have a padding different than the\n        default value \u003Ci>(\"m\")\u003C/i> set in the\n        \u003Cnord-tag size=\"s\">nord-card\u003C/nord-tag>, the \u003Ci>padding\u003C/i> prop is\n        initialized with the \u003Cnord-tag size=\"s\">\"l\"\u003C/nord-tag> overriding that\n        value.\n      \u003C/p>\n    \u003C/nord-stack>\n  \u003C/BaseCardCollapsible>\n\u003C/template>\n",{"name":2284,"displayName":2285,"url":2286,"code":2287},"with-tooltip","With tooltip","/main/#/922/product-patterns/usage-examples/card-collapsible/with-tooltip","\u003Cscript setup lang=\"ts\">\nimport BaseCardCollapsible from '@/components/base/card/Collapsible.vue'\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBaseCardCollapsible title=\"I am a collapsible card\">\n    \u003Ctemplate #header-title-end>\n      \u003Cspan\n        aria-describedby=\"info-tooltip\"\n        tabindex=\"0\"\n        class=\"square-icon-wrapper\"\n      >\n        \u003Cnord-icon\n          slot=\"end\"\n          name=\"interface-info\"\n          size=\"s\"\n          class=\"n:text-weaker\"\n        />\n      \u003C/span>\n      \u003Cnord-tooltip id=\"info-tooltip\" class=\"n:font-default\">\n        This is a tooltip\n      \u003C/nord-tooltip>\n    \u003C/template>\n    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident\n    aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam\n    totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit,\n    quibusdam?\n  \u003C/BaseCardCollapsible>\n\u003C/template>\n",{"name":2289,"displayName":2290,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2291},"pcnf-card-data","Card Data",[2292,2295,2300,2305,2310],{"name":2154,"displayName":2155,"url":2293,"code":2294},"/main/#/922/product-patterns/usage-examples/card-data/basic","\u003Cscript setup lang=\"ts\">\nimport BaseStackDivided from '@/components/base/stack/Divided.vue'\nimport BaseButton from '@/components/base/Button.vue'\nimport BaseCardData from '@/components/base/card/Data.vue'\n\nconst items = [\n  { id: 1, name: 'Fluffy', species: 'Cat', status: 'Active' },\n  { id: 2, name: 'Buddy', species: 'Dog', status: 'Active' },\n  { id: 3, name: 'Charlie', species: 'Bird', status: 'Inactive' },\n  { id: 4, name: 'Max', species: 'Dog', status: 'Active' },\n  { id: 5, name: 'Luna', species: 'Cat', status: 'Active' },\n]\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBaseCardData class=\"n:mbe-xxl\" heading=\"Pet List\">\n    \u003Ctemplate #header-end>\n      \u003CBaseButton size=\"s\">Add Pet\u003C/BaseButton>\n    \u003C/template>\n\n    \u003Ctemplate #content>\n      \u003CBaseStackDivided gap=\"none\">\n        \u003Cdiv v-for=\"item in items\" :key=\"item.id\" class=\"n:p-m n:inline-full\">\n          \u003Cdiv\n            class=\"n:flex n:flex-row n:flex-nowrap n:items-start n:justify-between n:gap-xl\"\n          >\n            \u003Cdiv>\n              \u003Ch4>{{ item.name }}\u003C/h4>\n              \u003Cp class=\"n:text-weaker\">{{ item.species }}\u003C/p>\n            \u003C/div>\n\n            \u003Cdiv>\n              \u003Cnord-badge\n                :variant=\"item.status === 'Active' ? 'success' : 'neutral'\"\n              >\n                {{ item.status }}\n              \u003C/nord-badge>\n            \u003C/div>\n          \u003C/div>\n        \u003C/div>\n      \u003C/BaseStackDivided>\n    \u003C/template>\n\n    \u003Ctemplate #footer>\n      \u003Cp class=\"n:text-weaker\">Total: {{ items.length }} pets\u003C/p>\n    \u003C/template>\n  \u003C/BaseCardData>\n\u003C/template>\n",{"name":2296,"displayName":2297,"url":2298,"code":2299},"with-pagination","With pagination","/main/#/922/product-patterns/usage-examples/card-data/with-pagination","\u003Cscript setup lang=\"ts\">\nimport type { PaginationState } from '@tanstack/vue-table'\nimport type { QueryPaginationMeta } from '@/utils/jsonapi.js'\nimport BaseStackDivided from '@/components/base/stack/Divided.vue'\nimport BasePagination from '@/components/base/Pagination.vue'\nimport BaseCardData from '@/components/base/card/Data.vue'\nimport InputSearch from '@/components/input/Search.vue'\n\n// Mock data\nconst allItems = Array.from({ length: 50 }, (_, i) => ({\n  id: i + 1,\n  name: `Pet ${i + 1}`,\n  species: ['Cat', 'Dog', 'Bird', 'Rabbit'][i % 4],\n  status: i % 3 === 0 ? 'Inactive' : 'Active',\n  description: `This is a description for pet ${i + 1}`,\n}))\n\nconst searchQuery = ref('')\nconst paginationState = ref\u003CPaginationState>({\n  pageIndex: 0,\n  pageSize: 30,\n})\n\n// Filter items based on search\nconst filteredItems = computed(() => {\n  if (!searchQuery.value) {\n    return allItems\n  }\n  return allItems.filter(\n    (item) =>\n      item.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||\n      item.species.toLowerCase().includes(searchQuery.value.toLowerCase()),\n  )\n})\n\n// Paginate filtered items\nconst paginatedItems = computed(() => {\n  const start = paginationState.value.pageIndex * paginationState.value.pageSize\n  const end = start + paginationState.value.pageSize\n  return filteredItems.value.slice(start, end)\n})\n\nconst paginationMeta = computed\u003CQueryPaginationMeta>(() => ({\n  count: filteredItems.value.length,\n  page: paginationState.value.pageIndex + 1,\n  pages: Math.ceil(filteredItems.value.length / paginationState.value.pageSize),\n}))\n\nconst handlePageChange = (newPagination: PaginationState) => {\n  paginationState.value = newPagination\n}\n\n// Reset to first page when search changes\nwatch(searchQuery, () => {\n  paginationState.value.pageIndex = 0\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBaseCardData class=\"n:mbe-xxl\">\n    \u003Ctemplate #header>\n      \u003Cnord-stack gap=\"s\">\n        \u003Ch2>Pet Directory (Pagination)\u003C/h2>\n        \u003Cp class=\"n:font-default n:text-weaker\">\n          This demo shows how to apply pagination to a card data component.\n        \u003C/p>\n      \u003C/nord-stack>\n    \u003C/template>\n\n    \u003Ctemplate #before-content>\n      \u003Cdiv class=\"n:p-m\">\n        \u003CInputSearch\n          v-model=\"searchQuery\"\n          placeholder=\"Search pets...\"\n          label=\"Search pets...\"\n          hide-label\n          size=\"s\"\n        />\n      \u003C/div>\n    \u003C/template>\n\n    \u003Ctemplate #content>\n      \u003CBaseStackDivided gap=\"none\">\n        \u003Cdiv\n          v-for=\"item in paginatedItems\"\n          :key=\"item.id\"\n          class=\"n:p-m n:inline-full\"\n        >\n          \u003Cdiv\n            class=\"n:flex n:flex-row n:flex-nowrap n:items-start n:justify-between n:gap-xl\"\n          >\n            \u003Cdiv>\n              \u003Ch4>{{ item.name }}\u003C/h4>\n              \u003Cp class=\"n:text-weaker\">{{ item.species }}\u003C/p>\n              \u003Cp class=\"n:mbs-s n:text-weak\">\n                {{ item.description }}\n              \u003C/p>\n            \u003C/div>\n\n            \u003Cdiv>\n              \u003Cnord-badge\n                :variant=\"item.status === 'Active' ? 'success' : 'neutral'\"\n              >\n                {{ item.status }}\n              \u003C/nord-badge>\n            \u003C/div>\n          \u003C/div>\n        \u003C/div>\n\n        \u003Cdiv v-if=\"!paginatedItems?.length\" class=\"n:p-l n:text-center\">\n          \u003Cp class=\"n:text-weaker\">No pets found matching your search.\u003C/p>\n        \u003C/div>\n      \u003C/BaseStackDivided>\n    \u003C/template>\n\n    \u003Ctemplate #footer>\n      \u003CBasePagination\n        v-model:page-index=\"paginationState.pageIndex\"\n        v-model:page-size=\"paginationState.pageSize\"\n        :pagination-meta\n        @page-change=\"handlePageChange\"\n      />\n    \u003C/template>\n  \u003C/BaseCardData>\n\u003C/template>\n",{"name":2301,"displayName":2302,"url":2303,"code":2304},"with-pagination-url-sync","With pagination url sync","/main/#/922/product-patterns/usage-examples/card-data/with-pagination-url-sync","\u003Cscript setup lang=\"ts\">\nimport { toNumber } from '@/utils/number.js'\nimport type { QueryPaginationMeta } from '@/utils/jsonapi.js'\nimport BaseStackDivided from '@/components/base/stack/Divided.vue'\nimport BasePagination from '@/components/base/Pagination.vue'\nimport BaseCardData from '@/components/base/card/Data.vue'\nimport InputSearch from '@/components/input/Search.vue'\nconst route = useRoute()\n\n// Mock data\nconst allItems = Array.from({ length: 50 }, (_, i) => ({\n  id: i + 1,\n  name: `Pet ${i + 1}`,\n  species: ['Cat', 'Dog', 'Bird', 'Rabbit'][i % 4],\n  status: i % 3 === 0 ? 'Inactive' : 'Active',\n  description: `This is a description for pet ${i + 1}`,\n}))\n\nconst searchQuery = computed({\n  get: () => (route.query.search as string) || '',\n  set: async (value: string) => {\n    await navigateTo({\n      query: {\n        ...route.query,\n        search: value || undefined,\n        page: undefined, // Reset page when search changes\n      },\n    })\n  },\n})\n\n// Filter items based on search\nconst filteredItems = computed(() => {\n  if (!searchQuery.value) {\n    return allItems\n  }\n  return allItems.filter(\n    (item) =>\n      item.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||\n      item.species.toLowerCase().includes(searchQuery.value.toLowerCase()),\n  )\n})\n\n// Paginate filtered items\nconst currentPage = computed(() => toNumber(route.query.page) || 1)\nconst pageSize = computed(() => toNumber(route.query.pageSize) || 10)\n\nconst paginatedItems = computed(() => {\n  const start = (currentPage.value - 1) * pageSize.value\n  const end = start + pageSize.value\n  return filteredItems.value.slice(start, end)\n})\n\nconst paginationMeta = computed\u003CQueryPaginationMeta>(() => ({\n  count: filteredItems.value.length,\n  page: currentPage.value,\n  pages: Math.ceil(filteredItems.value.length / pageSize.value),\n}))\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBaseCardData class=\"n:mbe-xxl\">\n    \u003Ctemplate #header>\n      \u003Cnord-stack gap=\"s\">\n        \u003Ch2>Pet Directory (URL Sync)\u003C/h2>\n        \u003Cp class=\"n:font-default n:text-weaker\">\n          This demo shows URL synchronization. Search and pagination state is\n          reflected in the URL.\n        \u003C/p>\n      \u003C/nord-stack>\n    \u003C/template>\n\n    \u003Ctemplate #before-content>\n      \u003Cdiv class=\"n:p-m\">\n        \u003CInputSearch\n          :model-value=\"searchQuery\"\n          placeholder=\"Search pets...\"\n          label=\"Search pets...\"\n          hide-label\n          size=\"s\"\n          @update:model-value=\"searchQuery = $event\"\n        />\n      \u003C/div>\n    \u003C/template>\n\n    \u003Ctemplate #content>\n      \u003CBaseStackDivided gap=\"none\">\n        \u003Cdiv\n          v-for=\"item in paginatedItems\"\n          :key=\"item.id\"\n          class=\"n:p-m n:inline-full\"\n        >\n          \u003Cdiv\n            class=\"n:flex n:flex-row n:flex-nowrap n:items-start n:justify-between n:gap-xl\"\n          >\n            \u003Cdiv>\n              \u003Ch4>{{ item.name }}\u003C/h4>\n              \u003Cp class=\"n:text-weaker\">{{ item.species }}\u003C/p>\n              \u003Cp class=\"n:mbs-s n:text-weak\">\n                {{ item.description }}\n              \u003C/p>\n            \u003C/div>\n\n            \u003Cdiv>\n              \u003Cnord-badge\n                :variant=\"item.status === 'Active' ? 'success' : 'neutral'\"\n              >\n                {{ item.status }}\n              \u003C/nord-badge>\n            \u003C/div>\n          \u003C/div>\n        \u003C/div>\n\n        \u003Cdiv v-if=\"!paginatedItems?.length\" class=\"n:p-l n:text-center\">\n          \u003Cp class=\"n:text-weaker\">No pets found matching your search.\u003C/p>\n        \u003C/div>\n      \u003C/BaseStackDivided>\n    \u003C/template>\n\n    \u003Ctemplate #footer>\n      \u003CBasePagination\n        v-if=\"Boolean(paginationMeta?.count)\"\n        :pagination-meta\n        use-url-sync\n      />\n    \u003C/template>\n  \u003C/BaseCardData>\n\u003C/template>\n",{"name":2306,"displayName":2307,"url":2308,"code":2309},"with-pagination-url-sync-and-filter-id","With pagination url sync and filter id","/main/#/922/product-patterns/usage-examples/card-data/with-pagination-url-sync-and-filter-id","\u003Cscript setup lang=\"ts\">\nimport { toNumber } from '@/utils/number.js'\nimport type { QueryPaginationMeta } from '@/utils/jsonapi.js'\nimport BaseStackDivided from '@/components/base/stack/Divided.vue'\nimport BasePagination from '@/components/base/Pagination.vue'\nimport BaseCardData from '@/components/base/card/Data.vue'\nimport InputSearch from '@/components/input/Search.vue'\nconst route = useRoute()\n\n// Mock data\nconst allItems = Array.from({ length: 50 }, (_, i) => ({\n  id: i + 1,\n  name: `Pet ${i + 1}`,\n  species: ['Cat', 'Dog', 'Bird', 'Rabbit'][i % 4],\n  status: i % 3 === 0 ? 'Inactive' : 'Active',\n  description: `This is a description for pet ${i + 1}`,\n}))\n\nconst searchQuery = computed({\n  get: () => (route.query['list-search'] as string) || '',\n  set: async (value: string) => {\n    await navigateTo({\n      query: {\n        ...route.query,\n        'list-search': value || undefined,\n        'list-page': undefined, // Reset page when search changes\n      },\n    })\n  },\n})\n\n// Filter items based on search\nconst filteredItems = computed(() => {\n  if (!searchQuery.value) {\n    return allItems\n  }\n  return allItems.filter(\n    (item) =>\n      item.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||\n      item.species.toLowerCase().includes(searchQuery.value.toLowerCase()),\n  )\n})\n\n// Paginate filtered items\nconst currentPage = computed(() => toNumber(route.query['list-page']) || 1)\nconst pageSize = computed(() => toNumber(route.query['list-pageSize']) || 10)\n\nconst paginatedItems = computed(() => {\n  const start = (currentPage.value - 1) * pageSize.value\n  const end = start + pageSize.value\n  return filteredItems.value.slice(start, end)\n})\n\nconst paginationMeta = computed(\n  (): QueryPaginationMeta => ({\n    count: filteredItems.value.length,\n    page: currentPage.value,\n    pages: Math.ceil(filteredItems.value.length / pageSize.value),\n  }),\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBaseCardData class=\"n:mbe-xxl\">\n    \u003Ctemplate #header>\n      \u003Cnord-stack gap=\"s\">\n        \u003Ch2>Pet Directory (URL Sync + Filter ID)\u003C/h2>\n        \u003Cp class=\"n:font-default n:text-weaker\">\n          This demo shows URL synchronization with filter ID prefix. All URL\n          parameters are prefixed with \"list-\" due to the filterId prop.\n        \u003C/p>\n      \u003C/nord-stack>\n    \u003C/template>\n\n    \u003Ctemplate #before-content>\n      \u003Cdiv class=\"n:p-m\">\n        \u003CInputSearch\n          :model-value=\"searchQuery\"\n          placeholder=\"Search pets...\"\n          label=\"Search pets...\"\n          hide-label\n          size=\"s\"\n          @update:model-value=\"searchQuery = $event\"\n        />\n      \u003C/div>\n    \u003C/template>\n\n    \u003Ctemplate #content>\n      \u003CBaseStackDivided gap=\"none\">\n        \u003Cdiv\n          v-for=\"item in paginatedItems\"\n          :key=\"item.id\"\n          class=\"n:p-m n:inline-full\"\n        >\n          \u003Cdiv\n            class=\"n:flex n:flex-row n:flex-nowrap n:items-start n:justify-between n:gap-xl\"\n          >\n            \u003Cdiv>\n              \u003Ch4>{{ item.name }}\u003C/h4>\n              \u003Cp class=\"n:text-weaker\">{{ item.species }}\u003C/p>\n              \u003Cp class=\"n:mbs-s n:text-weak\">\n                {{ item.description }}\n              \u003C/p>\n            \u003C/div>\n\n            \u003Cdiv>\n              \u003Cnord-badge\n                :variant=\"item.status === 'Active' ? 'success' : 'neutral'\"\n              >\n                {{ item.status }}\n              \u003C/nord-badge>\n            \u003C/div>\n          \u003C/div>\n        \u003C/div>\n\n        \u003Cdiv v-if=\"!paginatedItems?.length\" class=\"n:p-l n:text-center\">\n          \u003Cp class=\"n:text-weaker\">No pets found matching your search.\u003C/p>\n        \u003C/div>\n      \u003C/BaseStackDivided>\n    \u003C/template>\n\n    \u003Ctemplate #footer>\n      \u003CBasePagination\n        v-if=\"Boolean(paginationMeta?.count)\"\n        :pagination-meta\n        use-url-sync\n        filter-id=\"list\"\n      />\n    \u003C/template>\n  \u003C/BaseCardData>\n\u003C/template>\n",{"name":2311,"displayName":2312,"url":2313,"code":2314},"with-sticky-scrolling","With sticky scrolling","/main/#/922/product-patterns/usage-examples/card-data/with-sticky-scrolling","\u003Cscript setup lang=\"ts\">\nimport { safeMathRandom } from '@/utils/number.js'\nimport {\n  getCurrentTimestamp,\n  getDateTimeISOFromTimestamp,\n} from '@/utils/date/getter.js'\nimport { formatToDateTimeISODate } from '@/utils/date/conversion.js'\nimport type { PaginationState } from '@tanstack/vue-table'\nimport type { QueryPaginationMeta } from '@/utils/jsonapi.js'\nimport BaseStackDivided from '@/components/base/stack/Divided.vue'\nimport BasePagination from '@/components/base/Pagination.vue'\nimport BaseCardData from '@/components/base/card/Data.vue'\nimport InputSearch from '@/components/input/Search.vue'\n\n// Mock data with many items to demonstrate scrolling\nconst allItems = Array.from({ length: 100 }, (_, i) => ({\n  id: i + 1,\n  name: `Pet ${i + 1}`,\n  species: ['Cat', 'Dog', 'Bird', 'Rabbit', 'Fish', 'Hamster'][i % 6],\n  status: i % 4 === 0 ? 'Inactive' : 'Active',\n  description: `This is pet ${i + 1} with some details about their care and status.`,\n  lastVisit: formatToDateTimeISODate(\n    getDateTimeISOFromTimestamp(\n      getCurrentTimestamp() - safeMathRandom() * 30 * 24 * 60 * 60 * 1000,\n    ),\n  ),\n}))\n\nconst searchQuery = ref('')\nconst paginationState = ref\u003CPaginationState>({\n  pageIndex: 0,\n  pageSize: 15,\n})\n\n// Filter items based on search\nconst filteredItems = computed(() => {\n  if (!searchQuery.value) {\n    return allItems\n  }\n  return allItems.filter(\n    (item) =>\n      item.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||\n      item.species.toLowerCase().includes(searchQuery.value.toLowerCase()),\n  )\n})\n\n// Paginate filtered items\nconst paginatedItems = computed(() => {\n  const start = paginationState.value.pageIndex * paginationState.value.pageSize\n  const end = start + paginationState.value.pageSize\n  return filteredItems.value.slice(start, end)\n})\n\nconst paginationMeta = computed(\n  (): QueryPaginationMeta => ({\n    count: filteredItems.value.length,\n    page: paginationState.value.pageIndex + 1,\n    pages: Math.ceil(\n      filteredItems.value.length / paginationState.value.pageSize,\n    ),\n  }),\n)\n\nconst handlePageChange = (newPagination: PaginationState) => {\n  paginationState.value = newPagination\n}\n\n// Reset to first page when search changes\nwatch(searchQuery, () => {\n  paginationState.value.pageIndex = 0\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBaseCardData class=\"n:mbe-xxl\" sticky-before-content>\n    \u003Ctemplate #header>\n      \u003Cnord-stack gap=\"s\">\n        \u003Ch2>Pet Directory (Sticky Scrolling)\u003C/h2>\n        \u003Cp class=\"n:font-default n:text-weaker\">\n          This card has a fixed height with sticky scrolling. The header and\n          footer remain visible while content scrolls.\n        \u003C/p>\n      \u003C/nord-stack>\n    \u003C/template>\n\n    \u003Ctemplate #before-content>\n      \u003Cdiv class=\"n:p-m\">\n        \u003CInputSearch\n          v-model=\"searchQuery\"\n          placeholder=\"Search pets...\"\n          label=\"Search pets...\"\n          hide-label\n          size=\"s\"\n        />\n      \u003C/div>\n    \u003C/template>\n\n    \u003Ctemplate #content>\n      \u003CBaseStackDivided gap=\"none\">\n        \u003Cdiv\n          v-for=\"item in paginatedItems\"\n          :key=\"item.id\"\n          class=\"n:p-m n:inline-full\"\n        >\n          \u003Cdiv\n            class=\"n:flex n:flex-row n:flex-nowrap n:items-start n:justify-between n:gap-xl\"\n          >\n            \u003Cdiv>\n              \u003Ch4>{{ item.name }}\u003C/h4>\n              \u003Cp class=\"n:text-weaker\">{{ item.species }}\u003C/p>\n              \u003Cp class=\"n:mbs-s n:text-weak\">\n                {{ item.description }}\n              \u003C/p>\n              \u003Cp class=\"n:text-weaker\">Last visit: {{ item.lastVisit }}\u003C/p>\n            \u003C/div>\n\n            \u003Cdiv>\n              \u003Cnord-badge\n                :variant=\"item.status === 'Active' ? 'success' : 'neutral'\"\n              >\n                {{ item.status }}\n              \u003C/nord-badge>\n            \u003C/div>\n          \u003C/div>\n        \u003C/div>\n\n        \u003Cdiv v-if=\"!paginatedItems?.length\" class=\"n:p-l n:text-center\">\n          \u003Cp class=\"n:text-weaker\">No pets found matching your search.\u003C/p>\n        \u003C/div>\n      \u003C/BaseStackDivided>\n    \u003C/template>\n\n    \u003Ctemplate #footer>\n      \u003CBasePagination\n        v-model:page-index=\"paginationState.pageIndex\"\n        v-model:page-size=\"paginationState.pageSize\"\n        :pagination-meta\n        :page-size-options=\"[10, 15, 25]\"\n        @page-change=\"handlePageChange\"\n      />\n    \u003C/template>\n  \u003C/BaseCardData>\n\u003C/template>\n",{"name":2316,"displayName":1759,"description":2317,"usageContent":2318,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2319},"pcnf-combobox","Combobox is an autocomplete input that allows users to filter a list of options and select one or more values.","\u003Cdiv class=\"n-usage n-usage-do\">\n\u003Ch3>Do\u003C/h3>\n\u003Cul>\n\u003Cli>Use when you want to help users select an item from a large list of options.\u003C/li>\n\u003Cli>Combobox is useful for presenting options when the screen real estate is limited.\u003C/li>\n\u003Cli>Label combobox clearly so that the user knows what kind of options will be available.\u003C/li>\n\u003Cli>Order options in an intentional way so it's easier for the user to find a specific value.\u003C/li>\n\u003C/ul>\n\u003C/div>\n\u003Cdiv class=\"n-usage n-usage-dont\">\n\u003Ch3>Don't\u003C/h3>\n\u003Cul>\n\u003Cli>Don't use a combobox if you have less than 6 options to choose from. Consider using \u003Ca href=\"/components/select/\">select\u003C/a>, \u003Ca href=\"/components/segmented-control/\">segmented control\u003C/a> or \u003Ca href=\"/components/radio/\">radio components\u003C/a> instead.\u003C/li>\n\u003C/ul>\n\u003C/div>",[2320,2323,2328,2333,2336,2341,2346,2351,2356,2361,2366,2371],{"name":2154,"displayName":2155,"url":2321,"code":2322},"/main/#/922/product-patterns/usage-examples/combobox/basic","\u003Cscript lang=\"ts\" setup>\nimport InputComboboxSingle from '@/components/input/ComboboxSingle.vue'\nconst value = ref\u003Cstring | undefined>(undefined)\nconst options = ref([\n  { label: 'Amphibian', value: 'AMPHIBIAN' },\n  { label: 'Canine', value: 'CANINE' },\n  { label: 'Feline', value: 'FELINE' },\n  { label: 'Rodents', value: 'RODENTS' },\n])\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputComboboxSingle v-model=\"value\" label=\"Species\" :options />\n\u003C/template>\n",{"name":2324,"displayName":2325,"url":2326,"code":2327},"async-multi-select","Async multi select","/main/#/922/product-patterns/usage-examples/combobox/async-multi-select","\u003Cscript lang=\"ts\" setup>\nimport type { Option } from '@/components/base/Combobox.vue'\nimport InputComboboxMultiple from '@/components/input/ComboboxMultiple.vue'\n\nconst value = ref\u003COption[]>([\n  { value: 'Java', label: 'Java' },\n  { value: 'JavaScript', label: 'JavaScript' },\n])\n\nconst asyncOptions = async (query: string) => {\n  return await fetchLanguages(query)\n}\n\ntype DataResponseItem = {\n  objectId: string\n  ProgrammingLanguage: string\n  createdAt: string\n  updatedAt: string\n}\n\nconst fetchLanguages = async (query: string) => {\n  // From: https://www.back4app.com/database/paul-datasets/list-of-all-programming-languages/get-started/javascript/rest-api/fetch?objectClassSlug=dataset\n\n  let where = ''\n\n  if (query) {\n    where =\n      '&where=' +\n      encodeURIComponent(\n        JSON.stringify({\n          ProgrammingLanguage: {\n            $regex: `${query}|${query.toUpperCase()}|${\n              query[0].toUpperCase() + query.slice(1)\n            }`,\n          },\n        }),\n      )\n  }\n\n  const response = await fetch(\n    'https://parseapi.back4app.com/classes/All_Programming_Languages?limit=9999&order=ProgrammingLanguage&keys=ProgrammingLanguage' +\n      where,\n    {\n      headers: {\n        'X-Parse-Application-Id': 'XpRShKqJcxlqE5EQKs4bmSkozac44osKifZvLXCL', // This is the fake app's application id\n        'X-Parse-Master-Key': 'Mr2UIBiCImScFbbCLndBv8qPRUKwBAq27plwXVuv', // This is the fake app's readonly master key\n      },\n    },\n  )\n\n  const data = await response.json() // Here you have the data that you need\n\n  return data.results.map((item: DataResponseItem) => ({\n    value: item.ProgrammingLanguage,\n    label: item.ProgrammingLanguage,\n  }))\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-stack>\n    \u003CInputComboboxMultiple\n      v-model=\"value\"\n      async\n      label=\"Programming language\"\n      :min-chars=\"0\"\n      :resolve-on-load=\"false\"\n      resolve-on-open\n      :delay=\"0\"\n      :max-displayed-options=\"10\"\n      :options=\"asyncOptions\"\n      value-as-object\n      infinite-scroll\n      expand\n    />\n  \u003C/nord-stack>\n\u003C/template>\n",{"name":2329,"displayName":2330,"url":2331,"code":2332},"async-single-select","Async single select","/main/#/922/product-patterns/usage-examples/combobox/async-single-select","\u003Cscript lang=\"ts\" setup>\nimport type { Option } from '@/components/base/Combobox.vue'\nimport InputComboboxSingle from '@/components/input/ComboboxSingle.vue'\n\nconst value = ref\u003COption | undefined>({\n  value: 'Java',\n  label: 'Java',\n})\n\nconst asyncOptions = async (query: string) => {\n  return await fetchLanguages(query)\n}\n\ntype DataResponseItem = {\n  objectId: string\n  ProgrammingLanguage: string\n  createdAt: string\n  updatedAt: string\n}\n\nconst fetchLanguages = async (query: string) => {\n  // From: https://www.back4app.com/database/paul-datasets/list-of-all-programming-languages/get-started/javascript/rest-api/fetch?objectClassSlug=dataset\n\n  let where = ''\n\n  if (query) {\n    where =\n      '&where=' +\n      encodeURIComponent(\n        JSON.stringify({\n          ProgrammingLanguage: {\n            $regex: `${query}|${query.toUpperCase()}|${\n              query[0].toUpperCase() + query.slice(1)\n            }`,\n          },\n        }),\n      )\n  }\n\n  const response = await fetch(\n    'https://parseapi.back4app.com/classes/All_Programming_Languages?limit=9999&order=ProgrammingLanguage&keys=ProgrammingLanguage' +\n      where,\n    {\n      headers: {\n        'X-Parse-Application-Id': 'XpRShKqJcxlqE5EQKs4bmSkozac44osKifZvLXCL', // This is the fake app's application id\n        'X-Parse-Master-Key': 'Mr2UIBiCImScFbbCLndBv8qPRUKwBAq27plwXVuv', // This is the fake app's readonly master key\n      },\n    },\n  )\n\n  const data = await response.json() // Here you have the data that you need\n\n  return data.results.map((item: DataResponseItem) => ({\n    value: item.ProgrammingLanguage,\n    label: item.ProgrammingLanguage,\n  }))\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputComboboxSingle\n    v-model=\"value\"\n    async\n    label=\"Programming language\"\n    :min-chars=\"1\"\n    :resolve-on-load=\"false\"\n    resolve-on-open\n    :delay=\"0\"\n    :max-displayed-options=\"10\"\n    :options=\"asyncOptions\"\n    value-as-object\n    infinite-scroll\n  />\n\u003C/template>\n",{"name":103,"displayName":2164,"url":2334,"code":2335},"/main/#/922/product-patterns/usage-examples/combobox/disabled","\u003Cscript lang=\"ts\" setup>\nimport InputComboboxMultiple from '@/components/input/ComboboxMultiple.vue'\nconst value = ref\u003Cstring[]>(['FELINE'])\nconst options = ref([\n  { label: 'Amphibian', value: 'AMPHIBIAN' },\n  { label: 'Canine', value: 'CANINE' },\n  { label: 'Feline', value: 'FELINE' },\n  { label: 'Rodents', value: 'RODENTS' },\n])\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputComboboxMultiple v-model=\"value\" label=\"Species\" :options disabled />\n\u003C/template>\n",{"name":2337,"displayName":2338,"url":2339,"code":2340},"expanded","Expanded","/main/#/922/product-patterns/usage-examples/combobox/expanded","\u003Cscript lang=\"ts\" setup>\nimport InputComboboxMultiple from '@/components/input/ComboboxMultiple.vue'\nconst value = ref\u003Cstring[]>(['FELINE'])\nconst options = ref([\n  { label: 'Amphibian', value: 'AMPHIBIAN' },\n  { label: 'Canine', value: 'CANINE' },\n  { label: 'Feline', value: 'FELINE' },\n  { label: 'Rodents', value: 'RODENTS' },\n])\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputComboboxMultiple v-model=\"value\" label=\"Species\" :options expand />\n\u003C/template>\n",{"name":2342,"displayName":2343,"url":2344,"code":2345},"multi-select","Multi select","/main/#/922/product-patterns/usage-examples/combobox/multi-select","\u003Cscript lang=\"ts\" setup>\nimport InputComboboxMultiple from '@/components/input/ComboboxMultiple.vue'\nconst value = ref\u003Cstring[]>(['FELINE'])\nconst options = ref([\n  { label: 'Amphibian', value: 'AMPHIBIAN' },\n  { label: 'Canine', value: 'CANINE' },\n  { label: 'Feline', value: 'FELINE' },\n  { label: 'Rodents', value: 'RODENTS' },\n])\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputComboboxMultiple v-model=\"value\" label=\"Species\" :options />\n\u003C/template>\n",{"name":2347,"displayName":2348,"url":2349,"code":2350},"open-on-focus","Open on focus","/main/#/922/product-patterns/usage-examples/combobox/open-on-focus","\u003Cscript lang=\"ts\" setup>\nimport InputComboboxMultiple from '@/components/input/ComboboxMultiple.vue'\nconst value = ref\u003Cstring[]>(['FELINE'])\nconst options = ref([\n  { label: 'Amphibian', value: 'AMPHIBIAN' },\n  { label: 'Canine', value: 'CANINE' },\n  { label: 'Feline', value: 'FELINE' },\n  { label: 'Rodents', value: 'RODENTS' },\n])\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputComboboxMultiple\n    v-model=\"value\"\n    label=\"Species\"\n    :options\n    open-on-focus\n  />\n\u003C/template>\n",{"name":2352,"displayName":2353,"url":2354,"code":2355},"required","Required","/main/#/922/product-patterns/usage-examples/combobox/required","\u003Cscript lang=\"ts\" setup>\nimport InputComboboxSingle from '@/components/input/ComboboxSingle.vue'\nconst value = ref\u003Cstring | undefined>(undefined)\nconst options = ref([\n  { label: 'Amphibian', value: 'AMPHIBIAN' },\n  { label: 'Canine', value: 'CANINE' },\n  { label: 'Feline', value: 'FELINE' },\n  { label: 'Rodents', value: 'RODENTS' },\n])\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputComboboxSingle v-model=\"value\" label=\"Species\" :options required />\n\u003C/template>\n",{"name":2357,"displayName":2358,"url":2359,"code":2360},"with-a-hint","With a hint","/main/#/922/product-patterns/usage-examples/combobox/with-a-hint","\u003Cscript lang=\"ts\" setup>\nimport InputComboboxSingle from '@/components/input/ComboboxSingle.vue'\nconst value = ref\u003Cstring | undefined>(undefined)\nconst options = ref([\n  { label: 'Amphibian', value: 'AMPHIBIAN' },\n  { label: 'Canine', value: 'CANINE' },\n  { label: 'Feline', value: 'FELINE' },\n  { label: 'Rodents', value: 'RODENTS' },\n])\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputComboboxSingle\n    v-model=\"value\"\n    label=\"Species\"\n    :options\n    hint=\"Hint is an accessible way to provide additional information that might help the user\"\n  />\n\u003C/template>\n",{"name":2362,"displayName":2363,"url":2364,"code":2365},"with-a-placeholder","With a placeholder","/main/#/922/product-patterns/usage-examples/combobox/with-a-placeholder","\u003Cscript lang=\"ts\" setup>\nimport InputComboboxMultiple from '@/components/input/ComboboxMultiple.vue'\nconst value = ref\u003Cstring[]>([])\nconst options = ref([\n  { label: 'Amphibian', value: 'AMPHIBIAN' },\n  { label: 'Canine', value: 'CANINE' },\n  { label: 'Feline', value: 'FELINE' },\n  { label: 'Rodents', value: 'RODENTS' },\n])\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputComboboxMultiple\n    v-model=\"value\"\n    label=\"Species\"\n    :options\n    placeholder=\"Please select\"\n  />\n\u003C/template>\n",{"name":2367,"displayName":2368,"url":2369,"code":2370},"with-create-option","With create option","/main/#/922/product-patterns/usage-examples/combobox/with-create-option","\u003Cscript lang=\"ts\" setup>\nimport InputComboboxMultiple from '@/components/input/ComboboxMultiple.vue'\nconst value = ref\u003Cstring[]>(['FELINE'])\nconst options = ref([\n  { label: 'Amphibian', value: 'AMPHIBIAN' },\n  { label: 'Canine', value: 'CANINE' },\n  { label: 'Feline', value: 'FELINE' },\n  { label: 'Rodents', value: 'RODENTS' },\n])\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputComboboxMultiple\n    v-model=\"value\"\n    label=\"Species\"\n    :options\n    create-option\n  />\n\u003C/template>\n",{"name":2372,"displayName":2373,"url":2374,"code":2375},"with-error","With error","/main/#/922/product-patterns/usage-examples/combobox/with-error","\u003Cscript lang=\"ts\" setup>\nimport InputComboboxSingle from '@/components/input/ComboboxSingle.vue'\nconst value = ref\u003Cstring | undefined>(undefined)\nconst options = ref([\n  { label: 'Amphibian', value: 'AMPHIBIAN' },\n  { label: 'Canine', value: 'CANINE' },\n  { label: 'Feline', value: 'FELINE' },\n  { label: 'Rodents', value: 'RODENTS' },\n])\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputComboboxSingle\n    v-model=\"value\"\n    label=\"Species\"\n    :options\n    :error=\"value ? undefined : 'Select an option'\"\n  />\n\u003C/template>\n",{"name":2377,"displayName":2378,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2379},"pcnf-communication-preferences","Communication Preferences",[2380,2385,2390,2395,2400],{"name":2381,"displayName":2382,"url":2383,"code":2384},"agreed","Agreed","/main/#/922/product-patterns/usage-examples/communication-preferences/agreed","\u003Cscript setup lang=\"ts\">\nimport { Status } from '@/models/communicationPreferences.js'\nimport ClientCommunicationPreferences from '@/components/ClientCommunicationPreferences.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CClientCommunicationPreferences\n    :status=\"Status.Agreed\"\n    valid-to=\"2026/01/31\"\n  />\n\u003C/template>\n",{"name":2386,"displayName":2387,"url":2388,"code":2389},"declined","Declined","/main/#/922/product-patterns/usage-examples/communication-preferences/declined","\u003Cscript setup lang=\"ts\">\nimport { Status } from '@/models/communicationPreferences.js'\nimport ClientCommunicationPreferences from '@/components/ClientCommunicationPreferences.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CClientCommunicationPreferences\n    :status=\"Status.Declined\"\n    valid-to=\"2026/01/31\"\n  />\n\u003C/template>\n",{"name":2391,"displayName":2392,"url":2393,"code":2394},"default","Default","/main/#/922/product-patterns/usage-examples/communication-preferences/default","\u003Cscript setup lang=\"ts\">\nimport ClientCommunicationPreferences from '@/components/ClientCommunicationPreferences.vue'\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CClientCommunicationPreferences />\n\u003C/template>\n",{"name":2396,"displayName":2397,"url":2398,"code":2399},"expired","Expired","/main/#/922/product-patterns/usage-examples/communication-preferences/expired","\u003Cscript setup lang=\"ts\">\nimport { Status } from '@/models/communicationPreferences.js'\nimport ClientCommunicationPreferences from '@/components/ClientCommunicationPreferences.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CClientCommunicationPreferences\n    :status=\"Status.Expired\"\n    valid-to=\"2025/01/31\"\n  />\n\u003C/template>\n",{"name":2401,"displayName":2402,"url":2403,"code":2404},"expiring-soon","Expiring soon","/main/#/922/product-patterns/usage-examples/communication-preferences/expiring-soon","\u003Cscript setup lang=\"ts\">\nimport { Status } from '@/models/communicationPreferences.js'\nimport ClientCommunicationPreferences from '@/components/ClientCommunicationPreferences.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CClientCommunicationPreferences\n    :status=\"Status.ExpiredSoon\"\n    valid-to=\"2025/01/31\"\n  />\n\u003C/template>\n",{"name":2406,"displayName":2407,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2408},"pcnf-container","Container",[2409,2412,2417,2422,2427,2432,2437,2442],{"name":2154,"displayName":2155,"url":2410,"code":2411},"/main/#/922/product-patterns/usage-examples/container/basic","\u003Cscript setup lang=\"ts\">\nconst breakpoints = [\n  { name: 'xl', value: '2400px' },\n  { name: 'l', value: '1000px' },\n  { name: 'm', value: '840px' },\n  { name: 's', value: '620px' },\n  { name: 'xs', value: '500px' },\n  { name: 'xxs', value: '400px' },\n]\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cul>\n    \u003Cli\n      v-for=\"({ name, value }, key) in breakpoints\"\n      :key\n      :class=\"[\n        `n-container-${name}`,\n        'n:mbe-m n:p-s',\n        'n:bg-accent n:text-m n:text-on-accent',\n      ]\"\n    >\n      {{ name }} / {{ value }}\n    \u003C/li>\n  \u003C/ul>\n\u003C/template>\n",{"name":2413,"displayName":2414,"url":2415,"code":2416},"default-three-columns-layout","Default three columns layout","/main/#/922/product-patterns/usage-examples/container/default-three-columns-layout","\u003Cscript setup lang=\"ts\">\nimport BaseContainer from '@/components/base/Container.vue'\nimport BaseCardInnerSection from '@/components/base/card/InnerSection.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBaseContainer>\n    \u003CBaseCardInnerSection>\n      \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Lorem\u003C/div>\n      \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Ipsum\u003C/div>\n      \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Dolor\u003C/div>\n    \u003C/BaseCardInnerSection>\n  \u003C/BaseContainer>\n\u003C/template>\n",{"name":2418,"displayName":2419,"url":2420,"code":2421},"form-container","Form container","/main/#/922/product-patterns/usage-examples/container/form-container","\u003Cscript setup lang=\"ts\">\nimport { z } from 'zod'\nimport { useFormValidation } from '@/composables/useFormValidation.js'\nimport BaseStackDivided from '@/components/base/stack/Divided.vue'\nimport BaseContainer from '@/components/base/Container.vue'\nimport BaseCardInnerSection from '@/components/base/card/InnerSection.vue'\nimport BaseDropdown from '@/components/base/dropdown/Dropdown.vue'\nimport FormNordField from '@/components/form/NordField.vue'\n\nconst containerElement = useTemplateRef('containerRef')\nconst formElement = useTemplateRef('formRef')\nconst formSchema = z.object(\n  Array.from({ length: 12 }, (_, i) => `test${i + 1}`).reduce(\n    (acc, key) => {\n      acc[key] = z.string().optional()\n      return acc\n    },\n    {} as Record\u003Cstring, z.ZodOptional\u003Cz.ZodString>>,\n  ),\n)\n\nconst { handleErrors } = useFormValidation(formElement)\nconst { handleSubmit } = useForm({\n  validationSchema: toTypedSchema(formSchema),\n})\nconst containerSizes = useElementSize(containerElement)\n\nconst onSubmit = handleSubmit(\n  (data) => console.log(data),\n  () => handleErrors(),\n)\n\nconst resolveWidthToBreakpoint = (width: number) => {\n  if (width \u003C 500) {\n    return 'xs'\n  }\n  if (width \u003C 620) {\n    return 's'\n  }\n  if (width \u003C 840) {\n    return 'm'\n  }\n  if (width \u003C 1000) {\n    return 'l'\n  }\n  return 'xl'\n}\n\nconst getPlaygroundDetails = computed(() => ({\n  breakpoint: resolveWidthToBreakpoint(containerSizes.width.value),\n  containerSizes,\n}))\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"n:mbe-xxl n:flex n:flex-col n:flex-wrap n:gap-l\">\n    \u003Ch2 slot=\"header\">Container sizes\u003C/h2>\n\n    \u003Cpre>{{ getPlaygroundDetails }}\u003C/pre>\n\n    \u003CBaseContainer ref=\"containerRef\" mode=\"form\">\n      \u003Cnord-card padding=\"l\">\n        \u003Ch2 slot=\"header\">Form container\u003C/h2>\n\n        \u003Cform ref=\"formRef\" @submit=\"onSubmit\">\n          \u003Cdiv class=\"n:flex n:flex-col n:gap-l\">\n            \u003CBaseCardInnerSection :cols=\"1\">\n              \u003CFormNordField label=\"Full width input\" name=\"test\" expand />\n\n              \u003Cdiv\n                class=\"n:grid n:grid-cols-1 n:gap-y-m n:@xs:grid-cols-2 n:@xs:gap-x-m\"\n              >\n                \u003CFormNordField label=\"First name\" name=\"test2\" expand />\n                \u003CFormNordField label=\"Last name\" name=\"test3\" expand />\n              \u003C/div>\n\n              \u003Cdiv\n                class=\"n:grid n:grid-cols-1 n:gap-y-m n:@xs:grid-cols-2 n:@xs:gap-x-m n:@s:grid-cols-3\"\n              >\n                \u003CFormNordField label=\"1/3\" name=\"test4\" expand />\n                \u003CFormNordField label=\"2/3\" name=\"test5\" expand />\n                \u003CFormNordField label=\"3/3\" name=\"test6\" expand />\n              \u003C/div>\n\n              \u003CBaseStackDivided>\n                \u003Cdiv\n                  class=\"n:grid n:grid-cols-1 n:gap-y-m n:@xs:grid-cols-2 n:@xs:gap-x-m\"\n                >\n                  \u003CFormNordField\n                    label=\"Small\"\n                    name=\"test7\"\n                    inline-size=\"160px\"\n                  />\n\n                  \u003CFormNordField label=\"XS\" name=\"test8\" inline-size=\"104px\" />\n                \u003C/div>\n\n                \u003Cdiv\n                  class=\"n:flex n:flex-col n:gap-y-m n:@xs:flex-row n:@xs:gap-x-m\"\n                >\n                  \u003CFormNordField\n                    label=\"Small\"\n                    name=\"test9\"\n                    inline-size=\"160px\"\n                  />\n\n                  \u003CFormNordField label=\"Fluid\" name=\"test10\" expand />\n                \u003C/div>\n\n                \u003Cdiv\n                  class=\"n:flex n:flex-col n:gap-y-m n:@xs:flex-row n:@xs:gap-x-m\"\n                >\n                  \u003CFormNordField label=\"XS\" name=\"test11\" inline-size=\"104px\" />\n\n                  \u003CFormNordField label=\"Fluid\" name=\"test12\" expand />\n                \u003C/div>\n\n                \u003CBaseCardInnerSection>\n                  \u003CBaseDropdown\n                    title=\"Lorem\"\n                    :options=\"[\n                      {\n                        label: 'Ipsum',\n                        clickHandler: () =>\n                          console.log(\n                            'Nam et cursus nisi, ac malesuada risus.',\n                          ),\n                      },\n                    ]\"\n                  />\n                \u003C/BaseCardInnerSection>\n              \u003C/BaseStackDivided>\n            \u003C/BaseCardInnerSection>\n          \u003C/div>\n        \u003C/form>\n      \u003C/nord-card>\n    \u003C/BaseContainer>\n  \u003C/div>\n\u003C/template>\n",{"name":2423,"displayName":2424,"url":2425,"code":2426},"inline-fluid-layout","Inline fluid layout","/main/#/922/product-patterns/usage-examples/container/inline-fluid-layout","\u003Cscript setup lang=\"ts\">\nimport { useComponentUI } from '@/composables/useComponentUI.js'\nimport BaseContainer from '@/components/base/Container.vue'\nimport BaseCardInnerSection from '@/components/base/card/InnerSection.vue'\nimport FormNordField from '@/components/form/NordField.vue'\n\nconst { getSizeConfig } = useComponentUI()\n\nconst inlineSize = computed(\n  () =>\n    getSizeConfig('nord-input', {\n      size: 's',\n    }).maxInlineSize,\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBaseContainer>\n    \u003CBaseCardInnerSection class=\"n:mbe-xxl\">\n      \u003Cdiv class=\"n:flex n:flex-col n:gap-y-m n:@xs:gap-x-m n:@s:flex-row\">\n        \u003CFormNordField label=\"Field A\" name=\"field1\" :inline-size />\n\n        \u003Cdiv\n          class=\"n:grid n:flex-1 n:grid-cols-1 n:gap-y-m n:@xs:grid-cols-2 n:@xs:gap-x-m\"\n        >\n          \u003CFormNordField label=\"Field B\" name=\"field2\" expand />\n          \u003CFormNordField label=\"Field C\" name=\"field3\" expand />\n        \u003C/div>\n      \u003C/div>\n    \u003C/BaseCardInnerSection>\n\n    \u003CBaseCardInnerSection>\n      \u003Cdiv class=\"n:flex n:flex-col n:gap-y-m n:@xs:gap-x-m n:@s:flex-row\">\n        \u003CFormNordField label=\"Field D\" name=\"field4\" :inline-size />\n        \u003CFormNordField label=\"Field E\" name=\"field5\" expand />\n      \u003C/div>\n    \u003C/BaseCardInnerSection>\n  \u003C/BaseContainer>\n\u003C/template>\n",{"name":2428,"displayName":2429,"url":2430,"code":2431},"one-column-layout","One column layout","/main/#/922/product-patterns/usage-examples/container/one-column-layout","\u003Cscript setup lang=\"ts\">\nimport BaseStackDivided from '@/components/base/stack/Divided.vue'\nimport BaseContainer from '@/components/base/Container.vue'\nimport BaseCardInnerSection from '@/components/base/card/InnerSection.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBaseContainer>\n    \u003CBaseStackDivided>\n      \u003C!-- When only child -->\n      \u003CBaseCardInnerSection>\n        \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Lorem\u003C/div>\n      \u003C/BaseCardInnerSection>\n\n      \u003C!-- If you want to keep it as 1 column -->\n      \u003CBaseCardInnerSection :cols=\"1\">\n        \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Lorem\u003C/div>\n        \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Ipsum\u003C/div>\n      \u003C/BaseCardInnerSection>\n    \u003C/BaseStackDivided>\n  \u003C/BaseContainer>\n\u003C/template>\n",{"name":2433,"displayName":2434,"url":2435,"code":2436},"pair-columns","Pair columns","/main/#/922/product-patterns/usage-examples/container/pair-columns","\u003Cscript setup lang=\"ts\">\nimport BaseStackDivided from '@/components/base/stack/Divided.vue'\nimport BaseContainer from '@/components/base/Container.vue'\nimport BaseCardInnerSection from '@/components/base/card/InnerSection.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBaseContainer class=\"n:flex n:flex-col n:flex-wrap n:gap-l\">\n    \u003CBaseStackDivided>\n      \u003CBaseCardInnerSection>\n        \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Lorem\u003C/div>\n        \u003Cdiv\n          class=\"n:bg-accent n:p-s n:text-m n:text-on-accent n:@xs:col-span-2\"\n        >\n          Ipsum\n        \u003C/div>\n        \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Dolor\u003C/div>\n      \u003C/BaseCardInnerSection>\n\n      \u003C!-- More complex example with nested two-column span usage -->\n      \u003CBaseCardInnerSection :cols=\"1\">\n        \u003Cdiv\n          class=\"n:grid n:grid-cols-1 n:gap-y-m n:@xs:grid-cols-2 n:@xs:gap-x-m n:@s:grid-cols-3\"\n        >\n          \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Lorem\u003C/div>\n          \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Ipsum\u003C/div>\n          \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Dolor\u003C/div>\n        \u003C/div>\n\n        \u003Cdiv\n          class=\"n:grid n:grid-cols-1 n:gap-y-m n:@xs:grid-cols-2 n:@xs:gap-x-m n:@s:grid-cols-3\"\n        >\n          \u003Cdiv\n            class=\"n:grid n:grid-cols-1 n:gap-y-m n:@xs:col-span-2 n:@xs:grid-cols-2 n:@xs:gap-x-m\"\n          >\n            \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Sit\u003C/div>\n            \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Amet\u003C/div>\n          \u003C/div>\n        \u003C/div>\n      \u003C/BaseCardInnerSection>\n    \u003C/BaseStackDivided>\n  \u003C/BaseContainer>\n\u003C/template>\n",{"name":2438,"displayName":2439,"url":2440,"code":2441},"readonly-container","Readonly container","/main/#/922/product-patterns/usage-examples/container/readonly-container","\u003Cscript setup lang=\"ts\">\nimport BaseContainer from '@/components/base/Container.vue'\nimport BaseFormattedAddress from '@/components/base/formatted/Address.vue'\nimport BaseReadOnlyField from '@/components/base/read-only/Field.vue'\nimport BaseCardInnerSection from '@/components/base/card/InnerSection.vue'\n\nconst containerElement = useTemplateRef('containerRef')\nconst containerSizes = useElementSize(containerElement)\n\nconst resolveWidthToBreakpoint = (width: number) => {\n  if (width \u003C 500) {\n    return 'xs'\n  }\n  if (width \u003C 620) {\n    return 's'\n  }\n  if (width \u003C 840) {\n    return 'm'\n  }\n  if (width \u003C 1000) {\n    return 'l'\n  }\n  return 'xl'\n}\n\nconst getPlaygroundDetails = computed(() => ({\n  breakpoint: resolveWidthToBreakpoint(containerSizes.width.value),\n  containerSizes,\n}))\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"n:mbe-xxl n:flex n:flex-col n:flex-wrap n:gap-l\">\n    \u003Ch2 slot=\"header\">Container sizes\u003C/h2>\n\n    \u003Cpre>{{ getPlaygroundDetails }}\u003C/pre>\n\n    \u003CBaseContainer ref=\"containerRef\">\n      \u003Cnord-card padding=\"l\">\n        \u003Ch2 slot=\"header\">Readonly container\u003C/h2>\n\n        \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n          \u003Cdiv class=\"n:rounded-s n:bg-default n:p-m\">\n            \u003CBaseCardInnerSection>\n              \u003CBaseReadOnlyField\n                label=\"Holding place number\"\n                value=\"Lorem 12345\"\n              />\n              \u003CBaseReadOnlyField\n                label=\"Description\"\n                value=\"Ipsum dolor sit amet\"\n              />\n              \u003CBaseReadOnlyField label=\"Address\">\n                \u003Cspan class=\"n:text-weaker\">(Same as farm)\u003C/span>\n              \u003C/BaseReadOnlyField>\n            \u003C/BaseCardInnerSection>\n          \u003C/div>\n          \u003Cdiv class=\"n:rounded-s n:bg-default n:p-m\">\n            \u003CBaseCardInnerSection>\n              \u003CBaseReadOnlyField\n                label=\"Holding place number\"\n                value=\"Consectetur\"\n              />\n              \u003CBaseReadOnlyField\n                label=\"Description\"\n                value=\"Adipiscing elit sed eiusmod tempor incididunt\"\n              />\n              \u003CBaseReadOnlyField label=\"Address\">\n                \u003CBaseFormattedAddress\n                  country=\"NO\"\n                  zip-code=\"0042\"\n                  city=\"Oslo\"\n                  street-address=\"Gård vei 404\"\n                />\n              \u003C/BaseReadOnlyField>\n            \u003C/BaseCardInnerSection>\n          \u003C/div>\n        \u003C/div>\n      \u003C/nord-card>\n    \u003C/BaseContainer>\n  \u003C/div>\n\u003C/template>\n",{"name":2443,"displayName":2444,"url":2445,"code":2446},"two-columns-layout","Two columns layout","/main/#/922/product-patterns/usage-examples/container/two-columns-layout","\u003Cscript setup lang=\"ts\">\nimport BaseStackDivided from '@/components/base/stack/Divided.vue'\nimport BaseContainer from '@/components/base/Container.vue'\nimport BaseCardInnerSection from '@/components/base/card/InnerSection.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBaseContainer>\n    \u003CBaseStackDivided>\n      \u003CBaseCardInnerSection>\n        \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Lorem\u003C/div>\n        \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Ipsum\u003C/div>\n      \u003C/BaseCardInnerSection>\n\n      \u003CBaseCardInnerSection :cols=\"2\">\n        \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Lorem\u003C/div>\n        \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Ipsum\u003C/div>\n        \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Dolor\u003C/div>\n        \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Sit\u003C/div>\n        \u003Cdiv class=\"n:bg-accent n:p-s n:text-m n:text-on-accent\">Amet\u003C/div>\n      \u003C/BaseCardInnerSection>\n    \u003C/BaseStackDivided>\n  \u003C/BaseContainer>\n\u003C/template>\n",{"name":2448,"displayName":2449,"description":2450,"usageContent":2451,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2452},"pcnf-cta-and-links","Cta And Links","CTAs (call-to-actions) and Links enable users to navigate between pages or trigger specific actions within an application. CTA is based on the existing Button component.","\u003Ch3>CTA\u003C/h3>\n\u003Cp>Call-to-actions are used for action-oriented tasks like submitting, creating, or navigating within an app.\u003C/p>\n\u003Cdiv class=\"n-usage n-usage-do\">\n\u003Ch3>Do\u003C/h3>\n\u003Cul>\n\u003Cli>Use for primary actions that you want users to take, such as \"Save\", \"Create new\", \"Cancel\", and \"Back\".\u003C/li>\n\u003Cli>Label buttons clearly and concisely using action-oriented text.\u003C/li>\n\u003Cli>Avoid using buttons for inline navigation.\u003C/li>\n\u003Cli>Use clear and accurate labels. For example, use \"Save\" instead of \"Submit\".\u003C/li>\n\u003Cli>Prioritize the most important actions. Too many CTAs will cause confusion.\u003C/li>\n\u003Cli>Be consistent with positioning of CTAs in the user interface.\u003C/li>\n\u003Cli>Use strong, actionable verbs in labels such as \"Add\", \"Close\", \"Cancel\", or \"Save\".\u003C/li>\n\u003C/ul>\n\u003C/div>\n\u003Cdiv class=\"n-usage n-usage-dont\">\n\u003Ch3>Don't\u003C/h3>\n\u003Cul>\n\u003Cli>Don't use CTAs within text content.\u003C/li>\n\u003Cli>Don't use a primary CTA in every row of a table.\u003C/li>\n\u003Cli>Don't use labels such as \"Read more\", \"Click here\" or \"More\".\u003C/li>\n\u003Cli>Avoid using CTAs for linking to other pages. Use a Link instead where necessary.\u003C/li>\n\u003C/ul>\n\u003C/div>\n\u003Ch3>Link\u003C/h3>\n\u003Cp>Links are used for navigation and linking text-based content. They can either redirect users to internal or external pages.\u003C/p>\n\u003Cdiv class=\"n-usage n-usage-do\">\n\u003Ch3>Do\u003C/h3>\n\u003Cul>\n\u003Cli>Use links for inline navigation within text content.\u003C/li>\n\u003Cli>Keep link text clear and descriptive of the destination.\u003C/li>\n\u003Cli>Ensure links are visually distinguishable from regular text.\u003C/li>\n\u003C/ul>\n\u003C/div>\n\u003Cdiv class=\"n-usage n-usage-dont\">\n\u003Ch3>Don't\u003C/h3>\n\u003Cul>\n\u003Cli>Don't style links to look like buttons (e.g. filled backgrounds or excessive padding).\u003C/li>\n\u003Cli>Don't use for interface actions that aren't links to other views in the app. Use CTA instead.\u003C/li>\n\u003Cli>Don't use for form submit, cancel, edit, save and opening a modal. Use button instead.\u003C/li>\n\u003C/ul>\n\u003C/div>",[2453,2456,2461,2466,2471,2474,2479,2484],{"name":2154,"displayName":2155,"url":2454,"code":2455},"/main/#/922/product-patterns/usage-examples/cta-and-links/basic","\u003Cscript lang=\"ts\" setup>\nimport BaseButton from '@/components/base/Button.vue'\n\nconst handleClick = () => {\n  alert('This button was clicked')\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n    \u003Cdiv class=\"cta-row n:flex n:flex-row n:flex-wrap n:items-center n:gap-xxl\">\n      \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n        \u003Ch3>CTA (Action)\u003C/h3>\n        \u003Cdiv>\n          \u003CBaseButton @click.stop=\"handleClick\">Cancel\u003C/BaseButton>\n        \u003C/div>\n        \u003Cdiv>\n          \u003CBaseButton variant=\"primary\" @click.stop=\"handleClick\">\n            \u003Cnord-icon slot=\"start\" name=\"interface-add\">\u003C/nord-icon>\n            Create new\n          \u003C/BaseButton>\n        \u003C/div>\n        \u003Cdiv>\n          \u003CBaseButton variant=\"plain\" @click.stop=\"handleClick\">\n            \u003Cnord-icon slot=\"start\" name=\"arrow-left-long\">\u003C/nord-icon>\n            Back\n          \u003C/BaseButton>\n        \u003C/div>\n      \u003C/div>\n\n      \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n        \u003Ch3>CTA (Text)\u003C/h3>\n        \u003Cdiv>\n          \u003CBaseButton variant=\"text\" @click.stop=\"handleClick\">\n            Show more\n          \u003C/BaseButton>\n        \u003C/div>\n\n        \u003Cdiv>\n          \u003CBaseButton variant=\"text\" @click.stop=\"handleClick\">\n            \u003Cnord-icon slot=\"start\" name=\"interface-add\">\u003C/nord-icon>\n            Add more tags\n          \u003C/BaseButton>\n        \u003C/div>\n      \u003C/div>\n    \u003C/div>\n\n    \u003Cnord-divider>\u003C/nord-divider>\n\n    \u003Cdiv\n      class=\"cta-row n:mbs-s n:flex n:flex-row n:flex-wrap n:items-center n:gap-xxl\"\n    >\n      \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n        \u003Ch3 class=\"n:mbe-xs n:font-heading\">Text Link (Internal)\u003C/h3>\n        \u003CBaseButton is-link to=\"#\">John Dorian\u003C/BaseButton>\n      \u003C/div>\n\n      \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n        \u003Ch3 class=\"n:mbe-xs n:font-heading\">Text Link (External)\u003C/h3>\n        \u003CBaseButton\n          is-link\n          to=\"https://nordhealth.design\"\n          external\n          target=\"_blank\"\n        >\n          Nord Design System page\n        \u003C/BaseButton>\n      \u003C/div>\n    \u003C/div>\n  \u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\n.cta-row {\n  flex-flow: row;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n\u003C/style>\n",{"name":2457,"displayName":2458,"url":2459,"code":2460},"cta-action","Cta action","/main/#/922/product-patterns/usage-examples/cta-and-links/cta-action","\u003Cscript lang=\"ts\" setup>\nimport BaseButton from '@/components/base/Button.vue'\n\nconst handleClick = () => {\n  alert('This button was clicked')\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-l\">\n    \u003CBaseButton @click.stop=\"handleClick\">Cancel\u003C/BaseButton>\n\n    \u003CBaseButton variant=\"primary\" @click.stop=\"handleClick\">\n      \u003Cnord-icon slot=\"start\" name=\"interface-add\">\u003C/nord-icon>\n      Create new\n    \u003C/BaseButton>\n\n    \u003CBaseButton variant=\"plain\" @click.stop=\"handleClick\">\n      \u003Cnord-icon slot=\"start\" name=\"arrow-left-long\">\u003C/nord-icon>\n      Back\n    \u003C/BaseButton>\n  \u003C/div>\n\u003C/template>\n",{"name":2462,"displayName":2463,"url":2464,"code":2465},"cta-as-link","Cta as link","/main/#/922/product-patterns/usage-examples/cta-and-links/cta-as-link","\u003Cscript lang=\"ts\" setup>\nimport BaseButton from '@/components/base/Button.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-l\">\n    \u003CBaseButton to=\"#\">Cancel\u003C/BaseButton>\n\n    \u003CBaseButton variant=\"primary\" to=\"#\">\n      \u003Cnord-icon slot=\"start\" name=\"interface-add\">\u003C/nord-icon>\n      Create new\n    \u003C/BaseButton>\n\n    \u003CBaseButton variant=\"plain\" to=\"#\">\n      \u003Cnord-icon slot=\"start\" name=\"arrow-left-long\">\u003C/nord-icon>\n      Back\n    \u003C/BaseButton>\n\n    \u003CBaseButton variant=\"text\" to=\"#\">Show more\u003C/BaseButton>\n\n    \u003CBaseButton variant=\"text\" to=\"#\">\n      \u003Cnord-icon slot=\"start\" name=\"interface-add\">\u003C/nord-icon>\n      Add more tags\n    \u003C/BaseButton>\n  \u003C/div>\n\u003C/template>\n",{"name":2467,"displayName":2468,"url":2469,"code":2470},"cta-text","Cta text","/main/#/922/product-patterns/usage-examples/cta-and-links/cta-text","\u003Cscript lang=\"ts\" setup>\nimport BaseButton from '@/components/base/Button.vue'\n\nconst handleClick = () => {\n  alert('This button was clicked')\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-l\">\n    \u003CBaseButton variant=\"text\" @click.stop=\"handleClick\">\n      Show more\n    \u003C/BaseButton>\n\n    \u003CBaseButton variant=\"text\" @click.stop=\"handleClick\">\n      \u003Cnord-icon slot=\"start\" name=\"interface-add\">\u003C/nord-icon>\n      Add more tags\n    \u003C/BaseButton>\n  \u003C/div>\n\u003C/template>\n",{"name":103,"displayName":2164,"url":2472,"code":2473},"/main/#/922/product-patterns/usage-examples/cta-and-links/disabled","\u003Cscript lang=\"ts\" setup>\nimport BaseButton from '@/components/base/Button.vue'\n\nconst handleClick = () => {\n  alert('This button was clicked')\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n    \u003Cdiv class=\"cta-row n:flex n:flex-row n:flex-wrap n:items-center n:gap-xxl\">\n      \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n        \u003Ch3>CTA (Action)\u003C/h3>\n        \u003Cdiv>\n          \u003CBaseButton disabled @click.stop=\"handleClick\">Cancel\u003C/BaseButton>\n        \u003C/div>\n        \u003Cdiv>\n          \u003CBaseButton variant=\"primary\" disabled @click.stop=\"handleClick\">\n            \u003Cnord-icon slot=\"start\" name=\"interface-add\">\u003C/nord-icon>\n            Create new\n          \u003C/BaseButton>\n        \u003C/div>\n        \u003Cdiv>\n          \u003CBaseButton variant=\"plain\" disabled @click.stop=\"handleClick\">\n            \u003Cnord-icon slot=\"start\" name=\"arrow-left-long\">\u003C/nord-icon>\n            Back\n          \u003C/BaseButton>\n        \u003C/div>\n      \u003C/div>\n\n      \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n        \u003Ch3>CTA (Text)\u003C/h3>\n        \u003Cdiv>\n          \u003CBaseButton variant=\"text\" disabled @click.stop=\"handleClick\">\n            Show more\n          \u003C/BaseButton>\n        \u003C/div>\n\n        \u003Cdiv>\n          \u003CBaseButton variant=\"text\" disabled @click.stop=\"handleClick\">\n            \u003Cnord-icon slot=\"start\" name=\"interface-add\">\u003C/nord-icon>\n            Add more tags\n          \u003C/BaseButton>\n        \u003C/div>\n      \u003C/div>\n    \u003C/div>\n\n    \u003Cnord-divider>\u003C/nord-divider>\n\n    \u003Cdiv\n      class=\"cta-row n:mbs-s n:flex n:flex-row n:flex-wrap n:items-center n:gap-xxl\"\n    >\n      \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n        \u003Ch3 class=\"n:mbe-xs n:font-heading\">Text Link (Internal)\u003C/h3>\n        \u003CBaseButton is-link to=\"#\" disabled>John Dorian\u003C/BaseButton>\n      \u003C/div>\n\n      \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n        \u003Ch3 class=\"n:mbe-xs n:font-heading\">Text Link (External)\u003C/h3>\n        \u003CBaseButton\n          is-link\n          to=\"https://nordhealth.design\"\n          external\n          target=\"_blank\"\n          disabled\n        >\n          Nord Design System page\n        \u003C/BaseButton>\n      \u003C/div>\n    \u003C/div>\n  \u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\n.cta-row {\n  flex-flow: row;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n\u003C/style>\n",{"name":2475,"displayName":2476,"url":2477,"code":2478},"link","Link","/main/#/922/product-patterns/usage-examples/cta-and-links/link","\u003Cscript lang=\"ts\" setup>\nimport BaseButton from '@/components/base/Button.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBaseButton to=\"#\">Cancel\u003C/BaseButton>\n\u003C/template>\n",{"name":2480,"displayName":2481,"url":2482,"code":2483},"link-as-cta","Link as cta","/main/#/922/product-patterns/usage-examples/cta-and-links/link-as-cta","\u003Cscript lang=\"ts\" setup>\nimport BaseButton from '@/components/base/Button.vue'\n\nconst handleClick = () => {\n  alert('This button was clicked')\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBaseButton is-link @click.stop=\"handleClick\">Click me\u003C/BaseButton>\n\u003C/template>\n",{"name":2485,"displayName":2486,"url":2487,"code":2488},"link-external","Link external","/main/#/922/product-patterns/usage-examples/cta-and-links/link-external","\u003Cscript lang=\"ts\" setup>\nimport BaseButton from '@/components/base/Button.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBaseButton to=\"https://nordhealth.design\" is-link external target=\"_blank\">\n    Open Nord Design System page\n  \u003C/BaseButton>\n\u003C/template>\n",{"name":2490,"displayName":2491,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2492},"pcnf-date-range-picker","Date Range Picker",[2493,2496,2501,2506,2511,2516,2521,2526],{"name":2154,"displayName":2155,"url":2494,"code":2495},"/main/#/922/product-patterns/usage-examples/date-range-picker/basic","\u003Cscript setup lang=\"ts\">\nimport type { ModelValue as DateRangePickerModelValue } from '@/components/input/date-range-picker/DateRangePicker.vue'\nimport InputDateRangePicker from '@/components/input/date-range-picker/DateRangePicker.vue'\n\nconst selectedRange = ref\u003CDateRangePickerModelValue>(null)\nconst isOpen = ref(false)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-card padding=\"l\">\n    \u003Ch2 slot=\"header\">Basic DateRangePicker\u003C/h2>\n\n    \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n      \u003Cdiv v-if=\"selectedRange\" class=\"n:text-s\">\n        \u003Cspan class=\"n:font-active\">Selected:\u003C/span>\n        {{ selectedRange?.[0] || 'N/A' }} - {{ selectedRange?.[1] || 'N/A' }}\n      \u003C/div>\n\n      \u003Cdiv>\n        \u003Cnord-button\n          aria-haspopup=\"true\"\n          aria-controls=\"date-range-picker-basic\"\n          @click=\"isOpen = true\"\n        >\n          Open Date Range Picker\n        \u003C/nord-button>\n\n        \u003CInputDateRangePicker\n          id=\"date-range-picker-basic\"\n          v-model=\"selectedRange\"\n          v-model:is-open=\"isOpen\"\n        />\n      \u003C/div>\n    \u003C/div>\n  \u003C/nord-card>\n\u003C/template>\n",{"name":2497,"displayName":2498,"url":2499,"code":2500},"default-preset","Default preset","/main/#/922/product-patterns/usage-examples/date-range-picker/default-preset","\u003Cscript setup lang=\"ts\">\nimport type { ModelValue as DateRangePickerModelValue } from '@/components/input/date-range-picker/DateRangePicker.vue'\nimport { DateRangeOption } from '@/composables/useDateRange.js'\nimport InputDateRangePicker from '@/components/input/date-range-picker/DateRangePicker.vue'\n\nconst range1 = ref\u003CDateRangePickerModelValue>(null)\nconst range2 = ref\u003CDateRangePickerModelValue>(null)\nconst range3 = ref\u003CDateRangePickerModelValue>(null)\nconst range4 = ref\u003CDateRangePickerModelValue>(null)\n\nconst isOpen1 = ref(false)\nconst isOpen2 = ref(false)\nconst isOpen3 = ref(false)\nconst isOpen4 = ref(false)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-card padding=\"l\">\n    \u003Ch2 slot=\"header\">Default Preset\u003C/h2>\n\n    \u003Cdiv class=\"n:grid n:grid-cols-2 n:items-start n:gap-l\">\n      \u003Cnord-fieldset label=\"Default Preset: Today\">\n        \u003Cnord-button\n          aria-haspopup=\"true\"\n          aria-controls=\"date-range-picker-today\"\n          @click=\"isOpen1 = true\"\n        >\n          Open\n        \u003C/nord-button>\n        \u003Cdiv v-if=\"range1\" class=\"n:mbs-s n:text-s\">\n          {{ range1[0] }} - {{ range1[1] }}\n        \u003C/div>\n        \u003CInputDateRangePicker\n          id=\"date-range-picker-today\"\n          v-model=\"range1\"\n          v-model:is-open=\"isOpen1\"\n          :default-preset=\"DateRangeOption.Today\"\n        />\n      \u003C/nord-fieldset>\n\n      \u003Cnord-fieldset label=\"Default Preset: Last 7 Days\">\n        \u003Cnord-button\n          aria-haspopup=\"true\"\n          aria-controls=\"date-range-picker-last7days\"\n          @click=\"isOpen2 = true\"\n        >\n          Open\n        \u003C/nord-button>\n        \u003Cdiv v-if=\"range2\" class=\"n:mbs-s n:text-s\">\n          {{ range2[0] }} - {{ range2[1] }}\n        \u003C/div>\n        \u003CInputDateRangePicker\n          id=\"date-range-picker-last7days\"\n          v-model=\"range2\"\n          v-model:is-open=\"isOpen2\"\n          :default-preset=\"DateRangeOption.Last7Days\"\n        />\n      \u003C/nord-fieldset>\n\n      \u003Cnord-fieldset label=\"Default Preset: Last 30 Days\">\n        \u003Cnord-button\n          aria-haspopup=\"true\"\n          aria-controls=\"date-range-picker-last30days\"\n          @click=\"isOpen3 = true\"\n        >\n          Open\n        \u003C/nord-button>\n        \u003Cdiv v-if=\"range3\" class=\"n:mbs-s n:text-s\">\n          {{ range3[0] }} - {{ range3[1] }}\n        \u003C/div>\n        \u003CInputDateRangePicker\n          id=\"date-range-picker-last30days\"\n          v-model=\"range3\"\n          v-model:is-open=\"isOpen3\"\n          :default-preset=\"DateRangeOption.Last30Days\"\n        />\n      \u003C/nord-fieldset>\n\n      \u003Cnord-fieldset label=\"Default Preset: Current Month\">\n        \u003Cnord-button\n          aria-haspopup=\"true\"\n          aria-controls=\"date-range-picker-currentmonth\"\n          @click=\"isOpen4 = true\"\n        >\n          Open\n        \u003C/nord-button>\n        \u003Cdiv v-if=\"range4\" class=\"n:mbs-s n:text-s\">\n          {{ range4[0] }} - {{ range4[1] }}\n        \u003C/div>\n        \u003CInputDateRangePicker\n          id=\"date-range-picker-currentmonth\"\n          v-model=\"range4\"\n          v-model:is-open=\"isOpen4\"\n          :default-preset=\"DateRangeOption.CurrentMonth\"\n        />\n      \u003C/nord-fieldset>\n    \u003C/div>\n  \u003C/nord-card>\n\u003C/template>\n",{"name":2502,"displayName":2503,"url":2504,"code":2505},"disabled-dates","Disabled dates","/main/#/922/product-patterns/usage-examples/date-range-picker/disabled-dates","\u003Cscript setup lang=\"ts\">\nimport { isOddDay, isWeekend } from '@/utils/date/validation.js'\nimport type { ModelValue as DateRangePickerModelValue } from '@/components/input/date-range-picker/DateRangePicker.vue'\nimport { DateRangeOption } from '@/composables/useDateRange.js'\nimport InputDateRangePicker from '@/components/input/date-range-picker/DateRangePicker.vue'\n\nconst range1 = ref\u003CDateRangePickerModelValue>(null)\nconst range3 = ref\u003CDateRangePickerModelValue>(null)\n\nconst isOpen1 = ref(false)\nconst isOpen3 = ref(false)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-card padding=\"l\">\n    \u003Ch2 slot=\"header\">Disabled Dates\u003C/h2>\n\n    \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-l\">\n      \u003Cnord-fieldset label=\"Disable Weekends\">\n        \u003Cnord-button\n          aria-haspopup=\"true\"\n          aria-controls=\"date-range-picker-weekends\"\n          @click=\"isOpen1 = true\"\n        >\n          Open\n        \u003C/nord-button>\n        \u003Cdiv v-if=\"range1\" class=\"n:mbs-s n:text-s\">\n          {{ range1[0] }} - {{ range1[1] }}\n        \u003C/div>\n        \u003CInputDateRangePicker\n          id=\"date-range-picker-weekends\"\n          v-model=\"range1\"\n          v-model:is-open=\"isOpen1\"\n          :is-date-disabled=\"isWeekend\"\n          :default-preset=\"DateRangeOption.Last7Days\"\n        />\n      \u003C/nord-fieldset>\n\n      \u003Cnord-fieldset label=\"Disable Odd Days\">\n        \u003Cnord-button\n          aria-haspopup=\"true\"\n          aria-controls=\"date-range-picker-odddays\"\n          @click=\"isOpen3 = true\"\n        >\n          Open\n        \u003C/nord-button>\n        \u003Cdiv v-if=\"range3\" class=\"n:mbs-s n:text-s\">\n          {{ range3[0] }} - {{ range3[1] }}\n        \u003C/div>\n        \u003CInputDateRangePicker\n          id=\"date-range-picker-odddays\"\n          v-model=\"range3\"\n          v-model:is-open=\"isOpen3\"\n          :is-date-disabled=\"isOddDay\"\n          :default-preset=\"DateRangeOption.Last30Days\"\n        />\n      \u003C/nord-fieldset>\n    \u003C/div>\n  \u003C/nord-card>\n\u003C/template>\n",{"name":2507,"displayName":2508,"url":2509,"code":2510},"filter","Filter","/main/#/922/product-patterns/usage-examples/date-range-picker/filter","\u003Cscript setup lang=\"ts\">\nimport type { ModelValue as DateRangePickerModelValue } from '@/components/input/date-range-picker/DateRangePicker.vue'\nimport BaseFilterDateRangePicker from '@/components/base/filter/DateRangePicker.vue'\n\nconst range1 = ref\u003CDateRangePickerModelValue>(null)\nconst range2 = ref\u003CDateRangePickerModelValue>(['2024-01-01', '2024-12-31'])\nconst range3 = ref\u003CDateRangePickerModelValue>(null)\nconst range4 = ref\u003CDateRangePickerModelValue>(null)\n\nconst displayRange3 = ref(true)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-card padding=\"l\">\n    \u003Ch2 slot=\"header\">Filter Date Range Picker\u003C/h2>\n\n    \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-l\">\n      \u003Cnord-fieldset label=\"Default (clearable)\">\n        \u003CBaseFilterDateRangePicker\n          v-model=\"range1\"\n          label=\"Date of Birth\"\n          name=\"dateOfBirth\"\n        />\n      \u003C/nord-fieldset>\n\n      \u003Cnord-fieldset label=\"With pre-selected value\">\n        \u003CBaseFilterDateRangePicker\n          v-model=\"range2\"\n          label=\"Created Date\"\n          name=\"createdDate\"\n        />\n      \u003C/nord-fieldset>\n\n      \u003Cnord-fieldset v-if=\"displayRange3\" label=\"Removable\">\n        \u003CBaseFilterDateRangePicker\n          v-model=\"range3\"\n          label=\"Last Modified\"\n          name=\"lastModified\"\n          removable\n          @remove=\"displayRange3 = false\"\n        />\n      \u003C/nord-fieldset>\n\n      \u003Cnord-fieldset label=\"Non-clearable\">\n        \u003CBaseFilterDateRangePicker\n          v-model=\"range4\"\n          label=\"Registration Date\"\n          name=\"registrationDate\"\n          :clearable=\"false\"\n        />\n      \u003C/nord-fieldset>\n    \u003C/div>\n  \u003C/nord-card>\n\u003C/template>\n",{"name":2512,"displayName":2513,"url":2514,"code":2515},"min-max-dates","Min max dates","/main/#/922/product-patterns/usage-examples/date-range-picker/min-max-dates","\u003Cscript setup lang=\"ts\">\nimport { formatToDateTimeISODate } from '@/utils/date/conversion.js'\nimport {\n  getEndOfPeriod,\n  getStartOfPeriod,\n  getTodayDateTimeISO,\n} from '@/utils/date/getter.js'\nimport type { ModelValue as DateRangePickerModelValue } from '@/components/input/date-range-picker/DateRangePicker.vue'\nimport { DateRangeOption } from '@/composables/useDateRange.js'\nimport InputDateRangePicker from '@/components/input/date-range-picker/DateRangePicker.vue'\n\nconst range1 = ref\u003CDateRangePickerModelValue>(null)\nconst range2 = ref\u003CDateRangePickerModelValue>(null)\nconst range3 = ref\u003CDateRangePickerModelValue>(null)\n\nconst isOpen1 = ref(false)\nconst isOpen2 = ref(false)\nconst isOpen3 = ref(false)\n\nconst todayDate = getTodayDateTimeISO()\n\nconst currentMonthStart = formatToDateTimeISODate(\n  getStartOfPeriod(todayDate, 'month'),\n)\nconst currentMonthEnd = formatToDateTimeISODate(\n  getEndOfPeriod(todayDate, 'month'),\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-card padding=\"l\">\n    \u003Ch2 slot=\"header\">Min/Max Dates\u003C/h2>\n\n    \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-l\">\n      \u003Cnord-fieldset label=\"Min Date: Current Year Only\">\n        \u003Cnord-button\n          aria-haspopup=\"true\"\n          aria-controls=\"date-range-picker-mindate\"\n          :aria-expanded=\"isOpen1\"\n          @click=\"isOpen1 = true\"\n        >\n          Open\n        \u003C/nord-button>\n        \u003Cdiv v-if=\"range1\" class=\"n:mbs-s n:text-s\">\n          {{ range1[0] }} - {{ range1[1] }}\n        \u003C/div>\n        \u003CInputDateRangePicker\n          id=\"date-range-picker-mindate\"\n          v-model=\"range1\"\n          v-model:is-open=\"isOpen1\"\n          :min-date=\"todayDate\"\n          :default-preset=\"DateRangeOption.Last30Days\"\n        />\n      \u003C/nord-fieldset>\n\n      \u003Cnord-fieldset label=\"Max Date: Today\">\n        \u003Cnord-button\n          aria-haspopup=\"true\"\n          aria-controls=\"date-range-picker-maxdate\"\n          :aria-expanded=\"isOpen2\"\n          @click=\"isOpen2 = true\"\n        >\n          Open\n        \u003C/nord-button>\n        \u003Cdiv v-if=\"range2\" class=\"n:mbs-s n:text-s\">\n          {{ range2[0] }} - {{ range2[1] }}\n        \u003C/div>\n        \u003CInputDateRangePicker\n          id=\"date-range-picker-maxdate\"\n          v-model=\"range2\"\n          v-model:is-open=\"isOpen2\"\n          :max-date=\"todayDate\"\n          :default-preset=\"DateRangeOption.Last7Days\"\n        />\n      \u003C/nord-fieldset>\n\n      \u003Cnord-fieldset label=\"Both Min and Max Dates: Current Month Only\">\n        \u003Cnord-button\n          aria-haspopup=\"true\"\n          aria-controls=\"date-range-picker-both\"\n          :aria-expanded=\"isOpen3\"\n          @click=\"isOpen3 = true\"\n        >\n          Open\n        \u003C/nord-button>\n        \u003Cdiv v-if=\"range3\" class=\"n:mbs-s n:text-s\">\n          {{ range3[0] }} - {{ range3[1] }}\n        \u003C/div>\n        \u003CInputDateRangePicker\n          id=\"date-range-picker-both\"\n          v-model=\"range3\"\n          v-model:is-open=\"isOpen3\"\n          :min-date=\"currentMonthStart\"\n          :max-date=\"currentMonthEnd\"\n          :default-preset=\"DateRangeOption.Today\"\n        />\n      \u003C/nord-fieldset>\n    \u003C/div>\n  \u003C/nord-card>\n\u003C/template>\n",{"name":2517,"displayName":2518,"url":2519,"code":2520},"presets","Presets","/main/#/922/product-patterns/usage-examples/date-range-picker/presets","\u003Cscript setup lang=\"ts\">\nimport type { ModelValue as DateRangePickerModelValue } from '@/components/input/date-range-picker/DateRangePicker.vue'\nimport { DateRangeOption } from '@/composables/useDateRange.js'\nimport InputDateRangePicker from '@/components/input/date-range-picker/DateRangePicker.vue'\n\nconst range1 = ref\u003CDateRangePickerModelValue>(null)\nconst range2 = ref\u003CDateRangePickerModelValue>(null)\nconst range3 = ref\u003CDateRangePickerModelValue>(null)\nconst range4 = ref\u003CDateRangePickerModelValue>(null)\n\nconst isOpen1 = ref(false)\nconst isOpen2 = ref(false)\nconst isOpen3 = ref(false)\nconst isOpen4 = ref(false)\n\nconst basicPresets = [\n  DateRangeOption.Today,\n  DateRangeOption.Last7Days,\n  DateRangeOption.Last30Days,\n]\n\nconst quarterlyPresets = [\n  DateRangeOption.CurrentQuarter,\n  DateRangeOption.LastQuarter,\n  DateRangeOption.Q1CurrentYear,\n  DateRangeOption.Q2CurrentYear,\n  DateRangeOption.Q3CurrentYear,\n  DateRangeOption.Q4CurrentYear,\n  DateRangeOption.Q4LastYear,\n  DateRangeOption.Q3LastYear,\n  DateRangeOption.Q2LastYear,\n  DateRangeOption.Q1LastYear,\n]\n\nconst monthlyPresets = [\n  DateRangeOption.CurrentMonth,\n  DateRangeOption.LastMonth,\n  DateRangeOption.Last30Days,\n  DateRangeOption.Last60Days,\n  DateRangeOption.Last90Days,\n]\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-card padding=\"l\">\n    \u003Ch2 slot=\"header\">Custom Presets\u003C/h2>\n\n    \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-l\">\n      \u003Cnord-fieldset label=\"Basic Presets\">\n        \u003Cnord-button\n          aria-haspopup=\"true\"\n          aria-controls=\"date-range-picker-basic-presets\"\n          :aria-expanded=\"isOpen1\"\n          @click=\"isOpen1 = true\"\n        >\n          Open\n        \u003C/nord-button>\n        \u003Cdiv v-if=\"range1\" class=\"n:mbs-s n:text-s\">\n          {{ range1[0] }} - {{ range1[1] }}\n        \u003C/div>\n        \u003CInputDateRangePicker\n          id=\"date-range-picker-basic-presets\"\n          v-model=\"range1\"\n          v-model:is-open=\"isOpen1\"\n          :presets=\"basicPresets\"\n          :default-preset=\"DateRangeOption.Last7Days\"\n        />\n      \u003C/nord-fieldset>\n\n      \u003Cnord-fieldset label=\"Quarterly Presets\">\n        \u003Cnord-button\n          aria-haspopup=\"true\"\n          aria-controls=\"date-range-picker-quarterly-presets\"\n          :aria-expanded=\"isOpen2\"\n          @click=\"isOpen2 = true\"\n        >\n          Open\n        \u003C/nord-button>\n        \u003Cdiv v-if=\"range2\" class=\"n:mbs-s n:text-s\">\n          {{ range2[0] }} - {{ range2[1] }}\n        \u003C/div>\n        \u003CInputDateRangePicker\n          id=\"date-range-picker-quarterly-presets\"\n          v-model=\"range2\"\n          v-model:is-open=\"isOpen2\"\n          :presets=\"quarterlyPresets\"\n          :default-preset=\"DateRangeOption.CurrentQuarter\"\n        />\n      \u003C/nord-fieldset>\n\n      \u003Cnord-fieldset label=\"Monthly Presets\">\n        \u003Cnord-button\n          aria-haspopup=\"true\"\n          aria-controls=\"date-range-picker-monthly-presets\"\n          :aria-expanded=\"isOpen3\"\n          @click=\"isOpen3 = true\"\n        >\n          Open\n        \u003C/nord-button>\n        \u003Cdiv v-if=\"range3\" class=\"n:mbs-s n:text-s\">\n          {{ range3[0] }} - {{ range3[1] }}\n        \u003C/div>\n        \u003CInputDateRangePicker\n          id=\"date-range-picker-monthly-presets\"\n          v-model=\"range3\"\n          v-model:is-open=\"isOpen3\"\n          :presets=\"monthlyPresets\"\n          :default-preset=\"DateRangeOption.CurrentMonth\"\n        />\n      \u003C/nord-fieldset>\n\n      \u003Cnord-fieldset label=\"No Presets\">\n        \u003Cnord-button\n          aria-haspopup=\"true\"\n          aria-controls=\"date-range-picker-no-presets\"\n          :aria-expanded=\"isOpen4\"\n          @click=\"isOpen4 = true\"\n        >\n          Open\n        \u003C/nord-button>\n        \u003Cdiv v-if=\"range4\" class=\"n:mbs-s n:text-s\">\n          {{ range4[0] }} - {{ range4[1] }}\n        \u003C/div>\n        \u003CInputDateRangePicker\n          id=\"date-range-picker-no-presets\"\n          v-model=\"range4\"\n          v-model:is-open=\"isOpen4\"\n          :presets=\"[]\"\n          :default-preset=\"DateRangeOption.Today\"\n        />\n      \u003C/nord-fieldset>\n    \u003C/div>\n  \u003C/nord-card>\n\u003C/template>\n",{"name":2522,"displayName":2523,"url":2524,"code":2525},"presets-with-min-max","Presets with min max","/main/#/922/product-patterns/usage-examples/date-range-picker/presets-with-min-max","\u003Cscript setup lang=\"ts\">\nimport { getTodayDateTimeISO } from '@/utils/date/getter.js'\nimport { formatDate } from '@/utils/date/conversion.js'\nimport { subtractToDate } from '@/utils/date/calculation.js'\nimport type { ModelValue as DateRangePickerModelValue } from '@/components/input/date-range-picker/DateRangePicker.vue'\nimport { DateRangeOption } from '@/composables/useDateRange.js'\nimport InputDateRangePicker from '@/components/input/date-range-picker/DateRangePicker.vue'\n\nconst range1 = ref\u003CDateRangePickerModelValue>(null)\nconst range2 = ref\u003CDateRangePickerModelValue>(null)\n\nconst isOpen1 = ref(false)\nconst isOpen2 = ref(false)\n\nconst year2024Start = '2024-01-01'\nconst year2024End = '2024-12-31'\n\nconst sixMonthsAgo = formatDate(\n  subtractToDate(getTodayDateTimeISO(), { months: 6 }),\n  'yyyy-MM-dd',\n)\nconst today = getTodayDateTimeISO()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-card padding=\"l\">\n    \u003Ch2 slot=\"header\">Presets with Min/Max\u003C/h2>\n\n    \u003Cnord-banner variant=\"info\" class=\"n:mbe-l\">\n      Presets outside the min/max date range are automatically filtered out.\n    \u003C/nord-banner>\n\n    \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-l\">\n      \u003Cnord-fieldset label=\"Year 2024 only\">\n        \u003Cnord-button\n          aria-haspopup=\"true\"\n          aria-controls=\"date-range-picker-year2024\"\n          :aria-expanded=\"isOpen1\"\n          @click=\"isOpen1 = true\"\n        >\n          Open\n        \u003C/nord-button>\n        \u003Cdiv v-if=\"range1\" class=\"n:mbs-s n:text-s\">\n          {{ range1[0] }} - {{ range1[1] }}\n        \u003C/div>\n        \u003CInputDateRangePicker\n          id=\"date-range-picker-year2024\"\n          v-model=\"range1\"\n          v-model:is-open=\"isOpen1\"\n          :min-date=\"year2024Start\"\n          :max-date=\"year2024End\"\n          :default-preset=\"DateRangeOption.Q1CurrentYear\"\n        />\n      \u003C/nord-fieldset>\n\n      \u003Cnord-fieldset label=\"Recent 6 months\">\n        \u003Cnord-button\n          aria-haspopup=\"true\"\n          aria-controls=\"date-range-picker-6months\"\n          :aria-expanded=\"isOpen2\"\n          @click=\"isOpen2 = true\"\n        >\n          Open\n        \u003C/nord-button>\n        \u003Cdiv v-if=\"range2\" class=\"n:mbs-s n:text-s\">\n          {{ range2[0] }} - {{ range2[1] }}\n        \u003C/div>\n        \u003CInputDateRangePicker\n          id=\"date-range-picker-6months\"\n          v-model=\"range2\"\n          v-model:is-open=\"isOpen2\"\n          :min-date=\"sixMonthsAgo\"\n          :max-date=\"today\"\n          :default-preset=\"DateRangeOption.Last30Days\"\n        />\n      \u003C/nord-fieldset>\n    \u003C/div>\n  \u003C/nord-card>\n\u003C/template>\n",{"name":2527,"displayName":2528,"url":2529,"code":2530},"programmatic-control","Programmatic control","/main/#/922/product-patterns/usage-examples/date-range-picker/programmatic-control","\u003Cscript setup lang=\"ts\">\nimport { safeMathRandom } from '@/utils/number.js'\nimport { getTodayDateTimeISODate } from '@/utils/date/getter.js'\nimport { formatToDateTimeISODate } from '@/utils/date/conversion.js'\nimport { subtractToDate } from '@/utils/date/calculation.js'\nimport type { ModelValue as DateRangePickerModelValue } from '@/components/input/date-range-picker/DateRangePicker.vue'\nimport { DateRangeOption, useDateRange } from '@/composables/useDateRange.js'\nimport InputDateRangePicker from '@/components/input/date-range-picker/DateRangePicker.vue'\n\nconst { getPredefinedDateRange } = useDateRange()\nconst selectedRange = ref\u003CDateRangePickerModelValue>(null)\nconst isOpen = ref(false)\n\nconst handleOpen = () => {\n  isOpen.value = true\n}\n\nconst handleClose = () => {\n  isOpen.value = false\n}\n\nconst handleClearSelection = () => {\n  selectedRange.value = null\n  isOpen.value = false\n}\n\nconst handleSelectToday = () => {\n  const { startDate, endDate } = getPredefinedDateRange(DateRangeOption.Today)\n  selectedRange.value = [startDate, endDate]\n\n  // Close datepicker\n  isOpen.value = false\n}\n\nconst handleSelectLast7Days = () => {\n  const { startDate, endDate } = getPredefinedDateRange(\n    DateRangeOption.Last7Days,\n  )\n  selectedRange.value = [startDate, endDate]\n\n  // Close datepicker\n  isOpen.value = false\n}\n\nconst handleSetRandomCustomRange = () => {\n  const today = getTodayDateTimeISODate()\n  const randomDaysAgo = Math.floor(safeMathRandom() * 90) + 1\n  const startDate = formatToDateTimeISODate(\n    subtractToDate(today, { days: randomDaysAgo }),\n  )\n  const randomDaysFromStart = Math.floor(safeMathRandom() * randomDaysAgo)\n  const endDate = formatToDateTimeISODate(\n    subtractToDate(today, { days: randomDaysFromStart }),\n  )\n  selectedRange.value = [startDate!, endDate!]\n  isOpen.value = false\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-card padding=\"l\">\n    \u003Ch2 slot=\"header\">Programmatic Control\u003C/h2>\n\n    \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-xl\">\n      \u003Cdiv class=\"n:text-s\">\n        \u003Cspan class=\"n:font-active\">Selected:\u003C/span>\n        {{ selectedRange?.[0] || 'N/A' }} - {{ selectedRange?.[1] || 'N/A' }}\n      \u003C/div>\n\n      \u003Cnord-fieldset label=\"Open/Close Control\">\n        \u003Cnord-button-group>\n          \u003Cnord-button @click=\"handleOpen\">Open\u003C/nord-button>\n          \u003Cnord-button @click=\"handleClose\">Close\u003C/nord-button>\n        \u003C/nord-button-group>\n      \u003C/nord-fieldset>\n\n      \u003Cnord-fieldset label=\"Preset Selection\">\n        \u003Cnord-button-group>\n          \u003Cnord-button @click=\"handleSelectToday\">Select Today\u003C/nord-button>\n          \u003Cnord-button @click=\"handleSelectLast7Days\">\n            Select Last 7 Days\n          \u003C/nord-button>\n        \u003C/nord-button-group>\n      \u003C/nord-fieldset>\n\n      \u003Cnord-fieldset label=\"Direct Value Control\">\n        \u003Cnord-button-group>\n          \u003Cnord-button @click=\"handleSetRandomCustomRange\">\n            Set Random Range\n          \u003C/nord-button>\n          \u003Cnord-button @click=\"handleClearSelection\">Clear\u003C/nord-button>\n        \u003C/nord-button-group>\n      \u003C/nord-fieldset>\n    \u003C/div>\n\n    \u003CInputDateRangePicker\n      id=\"date-range-picker-programmatic\"\n      v-model=\"selectedRange\"\n      v-model:is-open=\"isOpen\"\n      class=\"n:mbs-m\"\n    />\n  \u003C/nord-card>\n\u003C/template>\n",{"name":2532,"displayName":2533,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2534},"pcnf-divided-stack","Divided Stack",[2535,2538,2543],{"name":2154,"displayName":2155,"url":2536,"code":2537},"/main/#/922/product-patterns/usage-examples/divided-stack/basic","\u003Cscript setup lang=\"ts\">\nimport BaseStackDivided from '@/components/base/stack/Divided.vue'\nimport BaseReadOnlyField from '@/components/base/read-only/Field.vue'\nconst range = ref('7')\nconst toggleVisibility = ref(true)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-l\">\n    \u003CBaseStackDivided>\n      \u003C!-- Web components -->\n      \u003Cnord-banner>\n        \u003Cp class=\"n:pbe-s\">\n          Use the toggle below to see how the dividers are reactively added and\n          removed.\n        \u003C/p>\n\n        \u003Cnord-tag\n          size=\"s\"\n          variant=\"selectable\"\n          :checked=\"toggleVisibility\"\n          @change=\"toggleVisibility = !toggleVisibility\"\n        >\n          Toggle visibility\n        \u003C/nord-tag>\n      \u003C/nord-banner>\n      \u003Cnord-range\n        label=\"Select rate\"\n        hint=\"Choose `0` value to reactively hide the field below\"\n        :value=\"range\"\n        :min=\"0\"\n        :max=\"10\"\n        @input=\"range = ($event.target as HTMLInputElement).value\"\n      >\u003C/nord-range>\n\n      \u003C!-- Vue components -->\n      \u003CBaseReadOnlyField\n        v-if=\"range !== '0'\"\n        :label=\"`Field with value ${range}`\"\n        :value=\"range !== '0' ? range : undefined\"\n      />\n      \u003CBaseReadOnlyField label=\"Field without value\" />\n      \u003CBaseReadOnlyField\n        label=\"Flat field with content\"\n        value=\"This is a string\"\n      />\n\n      \u003C!-- HTML tags -->\n      \u003Cp>This a standard paragraph\u003C/p>\n      \u003Cp v-if=\"toggleVisibility\">\n        This a paragraph with \u003Cb>v-if\u003C/b> directive based on the toggle\n      \u003C/p>\n      \u003Cp class=\"n:hidden\">\n        This a paragraph with \u003Cb>display: none\u003C/b>, should not be visible\n      \u003C/p>\n      \u003Cp v-show=\"toggleVisibility\">\n        This paragraph has a \u003Cb>v-show\u003C/b> based on the toggle\n      \u003C/p>\n      \u003Cp :style=\"!toggleVisibility ? 'visibility: hidden' : undefined\">\n        This paragraph has \u003Cb>visibility: hidden\u003C/b> based on the toggle\n      \u003C/p>\n      \u003Cp :style=\"!toggleVisibility ? 'opacity: 0' : undefined\">\n        This paragraph has \u003Cb>opacity: 0\u003C/b> based on the toggle\n      \u003C/p>\n    \u003C/BaseStackDivided>\n  \u003C/div>\n\u003C/template>\n",{"name":2539,"displayName":2540,"url":2541,"code":2542},"custom-divider","Custom divider","/main/#/922/product-patterns/usage-examples/divided-stack/custom-divider","\u003Cscript lang=\"ts\" setup>\nimport BaseStackDivided from '@/components/base/stack/Divided.vue'\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBaseStackDivided gap=\"l\">\n    \u003Ctemplate #separator>\n      \u003Cnord-icon name=\"interface-add\" />\n    \u003C/template>\n\n    \u003CBaseStackDivided direction=\"horizontal\" align-items=\"center\">\n      \u003Ctemplate #separator>\n        \u003Cnord-icon name=\"arrow-right-double\" />\n      \u003C/template>\n\n      \u003Cspan>With\u003C/span>\n      \u003Cspan>custom\u003C/span>\n      \u003Cspan>\n        \u003Ccode class=\"n:rounded-default n:bg-surface-lowered n:p-xs\"\n          >nord-icon\u003C/code\n        >\n        divider\n      \u003C/span>\n    \u003C/BaseStackDivided>\n\n    \u003CBaseStackDivided direction=\"horizontal\" align-items=\"center\">\n      \u003Ctemplate #separator>\n        \u003Cnord-icon\n          label=\"Separator\"\n          name=\"arrow-right-long\"\n          color=\"var(--n-color-accent)\"\n          aria-hidden=\"true\"\n        >\u003C/nord-icon>\n      \u003C/template>\n\n      \u003Cspan>With\u003C/span>\n      \u003Cspan>custom color\u003C/span>\n      \u003Cspan>\n        \u003Ccode class=\"n:rounded-default n:bg-surface-lowered n:p-xs\"\n          >nord-icon\u003C/code\n        >\n        divider\n      \u003C/span>\n    \u003C/BaseStackDivided>\n\n    \u003CBaseStackDivided direction=\"horizontal\" gap=\"xs\">\n      \u003Ctemplate #separator>–\u003C/template>\n      \u003Cspan>2025-09-08\u003C/span>\n      \u003Cspan>2025-09-09\u003C/span>\n    \u003C/BaseStackDivided>\n  \u003C/BaseStackDivided>\n\u003C/template>\n",{"name":2544,"displayName":2545,"url":2546,"code":2547},"direction","Direction","/main/#/922/product-patterns/usage-examples/divided-stack/direction","\u003Cscript lang=\"ts\" setup>\nimport BaseStackDivided from '@/components/base/stack/Divided.vue'\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-xl\">\n    \u003Cdetails\n      open\n      class=\"n:flex n:flex-col n:flex-wrap n:gap-s n:rounded-default n:bg-default n:p-m\"\n    >\n      \u003Csummary class=\"n:font-heading\">\n        Horizontal direction (default divider)\n      \u003C/summary>\n      \u003CBaseStackDivided direction=\"horizontal\" align-items=\"center\">\n        \u003Cspan>A\u003C/span>\n        \u003Cspan>B\u003C/span>\n        \u003Cspan>C\u003C/span>\n      \u003C/BaseStackDivided>\n    \u003C/details>\n\n    \u003Cdetails\n      open\n      class=\"n:flex n:flex-col n:flex-wrap n:gap-s n:rounded-default n:bg-default n:p-m\"\n    >\n      \u003Csummary class=\"n:font-heading\">\n        Vertical direction (default divider)\n      \u003C/summary>\n      \u003CBaseStackDivided direction=\"vertical\">\n        \u003Cspan>A\u003C/span>\n        \u003Cspan>B\u003C/span>\n        \u003Cspan>C\u003C/span>\n      \u003C/BaseStackDivided>\n    \u003C/details>\n\n    \u003Cdetails\n      open\n      class=\"n:flex n:flex-col n:flex-wrap n:gap-s n:rounded-default n:bg-default n:p-m\"\n    >\n      \u003Csummary class=\"n:font-heading\">\n        Horizontal direction (custom divider)\n      \u003C/summary>\n      \u003CBaseStackDivided direction=\"horizontal\" align-items=\"center\">\n        \u003Ctemplate #separator>\n          \u003Cnord-icon name=\"arrow-right-small\" size=\"s\" />\n        \u003C/template>\n        \u003Cspan>A\u003C/span>\n        \u003Cspan>B\u003C/span>\n        \u003Cspan>C\u003C/span>\n      \u003C/BaseStackDivided>\n    \u003C/details>\n\n    \u003Cdetails\n      open\n      class=\"n:flex n:flex-col n:flex-wrap n:gap-s n:rounded-default n:bg-default n:p-m\"\n    >\n      \u003Csummary class=\"n:font-heading\">\n        Vertical direction (custom divider)\n      \u003C/summary>\n      \u003CBaseStackDivided>\n        \u003Ctemplate #separator>\n          \u003Cnord-icon name=\"arrow-down-small\" size=\"s\" />\n        \u003C/template>\n        \u003Cspan>A\u003C/span>\n        \u003Cspan>B\u003C/span>\n        \u003Cspan>C\u003C/span>\n      \u003C/BaseStackDivided>\n    \u003C/details>\n  \u003C/div>\n\u003C/template>\n",{"name":2549,"displayName":2550,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2551},"pcnf-export-popout","Export Popout",[2552,2555],{"name":2154,"displayName":2155,"url":2553,"code":2554},"/main/#/922/product-patterns/usage-examples/export-popout/basic","\u003Cscript lang=\"ts\" setup>\nimport type { FileFormatType } from '@/models/fileFormat.js'\nimport BasePopoutExport from '@/components/base/popout/Export.vue'\n\nfunction handleExport(filename: string, format: FileFormatType) {\n  alert(`Exporting ${filename} in ${format.toUpperCase()} format`)\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n    \u003Cp class=\"n:text-s\">\n      This example demonstrates the basic usage of the ExportPopout component.\n      It shows how to configure available export formats and handle export\n      events.\n    \u003C/p>\n\n    \u003Cdiv>\n      \u003CBasePopoutExport @export=\"handleExport\" />\n    \u003C/div>\n  \u003C/div>\n\u003C/template>\n",{"name":2556,"displayName":2557,"url":2558,"code":2559},"advanced","Advanced","/main/#/922/product-patterns/usage-examples/export-popout/advanced","\u003Cscript lang=\"ts\" setup>\nimport { FileFormat, type FileFormatType } from '@/models/fileFormat.js'\nimport BasePopoutExport from '@/components/base/popout/Export.vue'\n\nconst formats = [FileFormat.CSV, FileFormat.XLSX]\nconst filename = 'custom-export'\n\nfunction handleExport(filename: string, format: FileFormatType) {\n  alert(`Exporting ${filename} in ${format.toUpperCase()} format`)\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n    \u003Cp class=\"n:text-s\">\n      This example shows how to customize the ExportPopout component with\n      formats, filename, and toggle label.\n    \u003C/p>\n\n    \u003Cdiv>\n      \u003CBasePopoutExport\n        :formats\n        :filename\n        label=\"Download Report\"\n        @export=\"handleExport\"\n      />\n    \u003C/div>\n  \u003C/div>\n\u003C/template>\n",{"name":2561,"displayName":2562,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2563},"pcnf-filter-add-button","Filter Add Button",[2564,2567],{"name":2154,"displayName":2155,"url":2565,"code":2566},"/main/#/922/product-patterns/usage-examples/filter-add-button/basic","\u003Cscript lang=\"ts\" setup>\nimport BaseFilterDropdown from '@/components/base/filter/Dropdown.vue'\nimport BaseFilterAddButton from '@/components/base/filter/AddButton.vue'\n\n// Additional Filters\ntype AdditionalFilter = {\n  id: string\n  label: string\n  value: Ref\u003Cstring | Array\u003Cstring>>\n  options: Array\u003C{ label: string; value: string }>\n}\n\nconst additionalFilters: AdditionalFilter[] = [\n  {\n    id: 'client',\n    label: 'Client',\n    value: ref([]),\n    options: [\n      { label: 'Donald Johnson', value: '17' },\n      { label: 'Claudia Olson', value: '32' },\n      { label: 'Jesse Wheeler', value: '123' },\n    ],\n  },\n  {\n    id: 'patient',\n    label: 'Patient',\n    value: ref([]),\n    options: [\n      { label: 'Pixie', value: '3' },\n      { label: 'Nimba', value: '33' },\n      { label: 'Bink', value: '77' },\n      { label: 'Luna', value: '99' },\n    ],\n  },\n  {\n    id: 'veterinarian',\n    label: 'Veterinarian',\n    value: ref([]),\n    options: [\n      { label: 'Dr. John Doe', value: '23' },\n      { label: 'Dr. Jane Smith', value: '34' },\n      { label: 'Dr. Jim Beam', value: '45' },\n    ],\n  },\n]\n\n// -- LOGIC FOR ADDING/REMOVING FILTERS\nfunction getLabelForAddedFilter(filterId: string) {\n  return additionalFilters.find((filter) => filter.id === filterId)?.label ?? ''\n}\n\nfunction getOptionsForAddedFilter(filterId: string) {\n  return (\n    additionalFilters.find((filter) => filter.id === filterId)?.options ?? []\n  )\n}\n\nfunction getValueForAddedFilter(filterId: string) {\n  return additionalFilters.find((filter) => filter.id === filterId)?.value\n}\n\nfunction updateValueForAddedFilter(filterId: string, value: string | string[]) {\n  const filter = additionalFilters.find((filter) => filter.id === filterId)\n\n  if (filter) {\n    filter.value.value = value\n  }\n}\n\nconst addedFilterIds = ref\u003Cstring[]>([])\n\nconst availableFiltersToAdd = computed(() =>\n  additionalFilters.filter((filter) => {\n    return !addedFilterIds.value.some(\n      (addedFilterId) => addedFilterId === filter.id,\n    )\n  }),\n)\n\nasync function addFilter(filterId: string) {\n  addedFilterIds.value.push(filterId)\n\n  await nextTick()\n\n  if (addedFilterDropdownRefs.value.length) {\n    addedFilterDropdownRefs.value[\n      addedFilterDropdownRefs.value.length - 1\n    ].open()\n  }\n}\n\nfunction removeFilter(filterId: string) {\n  addedFilterIds.value = addedFilterIds.value.filter(\n    (addedFilterId) => addedFilterId !== filterId,\n  )\n}\n\nconst addedFilterDropdownRefs = ref\u003CInstanceType\u003Ctypeof BaseFilterDropdown>[]>(\n  [],\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-stack direction=\"horizontal\" gap=\"s\" wrap>\n    \u003Ctemplate v-for=\"filterId in addedFilterIds\" :key=\"filterId\">\n      \u003CBaseFilterDropdown\n        ref=\"addedFilterDropdownRefs\"\n        name=\"add-filter\"\n        :model-value=\"getValueForAddedFilter(filterId)?.value\"\n        :label=\"getLabelForAddedFilter(filterId)\"\n        :options=\"getOptionsForAddedFilter(filterId)\"\n        multiple\n        removable\n        @remove=\"removeFilter(filterId)\"\n        @update:model-value=\"updateValueForAddedFilter(filterId, $event || '')\"\n      />\n    \u003C/template>\n\n    \u003CBaseFilterAddButton\n      v-if=\"availableFiltersToAdd?.length\"\n      :options=\"availableFiltersToAdd\"\n      @select=\"addFilter\"\n    />\n  \u003C/nord-stack>\n\u003C/template>\n",{"name":2568,"displayName":2569,"url":2570,"code":2571},"grouped","Grouped","/main/#/922/product-patterns/usage-examples/filter-add-button/grouped","\u003Cscript lang=\"ts\" setup>\nimport BaseFilterDropdown from '@/components/base/filter/Dropdown.vue'\nimport type { GroupedOption } from '@/components/base/filter/AddButton.vue'\nimport BaseFilterAddButton from '@/components/base/filter/AddButton.vue'\n\n// Additional Filters\ntype AdditionalFilter = {\n  id: string\n  label: string\n  value: Ref\u003Cstring | Array\u003Cstring>>\n  options: Array\u003C{ label: string; value: string }>\n}\n\n// -- FILTERS DATA --\nconst additionalFilters: AdditionalFilter[] = [\n  {\n    id: 'client',\n    label: 'Client',\n    value: ref([]),\n    options: [\n      { label: 'Donald Johnson', value: '17' },\n      { label: 'Claudia Olson', value: '32' },\n      { label: 'Jesse Wheeler', value: '123' },\n    ],\n  },\n  {\n    id: 'patient',\n    label: 'Patient',\n    value: ref([]),\n    options: [\n      { label: 'Pixie', value: '3' },\n      { label: 'Nimba', value: '33' },\n      { label: 'Bink', value: '77' },\n      { label: 'Luna', value: '99' },\n    ],\n  },\n  {\n    id: 'veterinarian',\n    label: 'Veterinarian',\n    value: ref([]),\n    options: [\n      { label: 'Dr. John Doe', value: '23' },\n      { label: 'Dr. Jane Smith', value: '34' },\n      { label: 'Dr. Jim Beam', value: '45' },\n    ],\n  },\n]\n\n// -- LOGIC FOR GROUPING FILTERS --\n// In this demo, we group the filters so they display grouped options with dividers between categories\nconst additionalFiltersOptions = computed(\n  () =>\n    [\n      {\n        heading: 'Group A',\n        options: availableFiltersToAdd.value\n          .filter((filter) => ['client'].includes(filter.id))\n          .map((filter) => ({\n            id: filter.id,\n            label: filter.label,\n          })),\n      },\n      {\n        heading: 'Group 3',\n        options: availableFiltersToAdd.value\n          .filter((filter) => ['patient'].includes(filter.id))\n          .map((filter) => ({\n            id: filter.id,\n            label: filter.label,\n          })),\n      },\n      {\n        // Group without label heading\n        options: availableFiltersToAdd.value\n          .filter((filter) => ['veterinarian'].includes(filter.id))\n          .map((filter) => ({\n            id: filter.id,\n            label: filter.label,\n          })),\n      },\n    ] satisfies GroupedOption[],\n)\n\n// 👇 Rest of the code is the same as the basic example\n// -- LOGIC FOR ADDING/REMOVING FILTERS\nfunction getLabelForAddedFilter(filterId: string) {\n  return additionalFilters.find((filter) => filter.id === filterId)?.label ?? ''\n}\n\nfunction getOptionsForAddedFilter(filterId: string) {\n  return (\n    additionalFilters.find((filter) => filter.id === filterId)?.options ?? []\n  )\n}\n\nfunction getValueForAddedFilter(filterId: string) {\n  return additionalFilters.find((filter) => filter.id === filterId)?.value\n}\n\nfunction updateValueForAddedFilter(filterId: string, value: string | string[]) {\n  const filter = additionalFilters.find((filter) => filter.id === filterId)\n\n  if (filter) {\n    filter.value.value = value\n  }\n}\n\nconst addedFilterIds = ref\u003Cstring[]>([])\n\nconst availableFiltersToAdd = computed(() =>\n  additionalFilters.filter((filter) => {\n    return !addedFilterIds.value.some(\n      (addedFilterId) => addedFilterId === filter.id,\n    )\n  }),\n)\n\nasync function addFilter(filterId: string) {\n  addedFilterIds.value.push(filterId)\n\n  await nextTick()\n\n  if (addedFilterDropdownRefs.value.length) {\n    addedFilterDropdownRefs.value[\n      addedFilterDropdownRefs.value.length - 1\n    ].open()\n  }\n}\n\nfunction removeFilter(filterId: string) {\n  addedFilterIds.value = addedFilterIds.value.filter(\n    (addedFilterId) => addedFilterId !== filterId,\n  )\n}\n\nconst addedFilterDropdownRefs = ref\u003CInstanceType\u003Ctypeof BaseFilterDropdown>[]>(\n  [],\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-stack direction=\"horizontal\" gap=\"s\" wrap>\n    \u003Ctemplate v-for=\"filterId in addedFilterIds\" :key=\"filterId\">\n      \u003CBaseFilterDropdown\n        ref=\"addedFilterDropdownRefs\"\n        name=\"add-filter\"\n        :model-value=\"getValueForAddedFilter(filterId)?.value\"\n        :label=\"getLabelForAddedFilter(filterId)\"\n        :options=\"getOptionsForAddedFilter(filterId)\"\n        multiple\n        removable\n        @remove=\"removeFilter(filterId)\"\n        @update:model-value=\"updateValueForAddedFilter(filterId, $event || '')\"\n      />\n    \u003C/template>\n\n    \u003CBaseFilterAddButton\n      v-if=\"availableFiltersToAdd?.length\"\n      :options=\"additionalFiltersOptions\"\n      @select=\"addFilter\"\n    />\n  \u003C/nord-stack>\n\u003C/template>\n",{"name":2573,"displayName":2574,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2575},"pcnf-filter-bar","Filter Bar",[2576],{"name":2154,"displayName":2155,"url":2577,"code":2578},"/main/#/922/product-patterns/usage-examples/filter-bar/basic","\u003Cscript lang=\"ts\" setup>\nimport { z } from 'zod'\nimport BaseFilterDropdown from '@/components/base/filter/Dropdown.vue'\nimport type { Stack } from '@nordhealth/components'\nimport { useFiltersURLState } from '@/composables/useFiltersURLState.js'\nimport { usePatientDetailsFormFieldOptions } from '@/composables/usePatientDetails.js'\nimport BaseFilterAddButton from '@/components/base/filter/AddButton.vue'\nimport BaseFilterResetButton from '@/components/base/filter/ResetButton.vue'\n\nconst { speciesOptions } = usePatientDetailsFormFieldOptions()\n\n// Additional Filters\ntype AdditionalFilter = {\n  id: string\n  label: string\n  value: Ref\u003Cstring | Array\u003Cstring>>\n  options: Array\u003C{ label: string; value: string }>\n}\nconst additionalFilters: AdditionalFilter[] = [\n  {\n    id: 'client',\n    label: 'Client',\n    value: ref([]),\n    options: [\n      { label: 'Donald Johnson', value: '17' },\n      { label: 'Claudia Olson', value: '32' },\n      { label: 'Jesse Wheeler', value: '123' },\n    ],\n  },\n  {\n    id: 'patient',\n    label: 'Patient',\n    value: ref([]),\n    options: [\n      { label: 'Pixie', value: '3' },\n      { label: 'Nimba', value: '33' },\n      { label: 'Bink', value: '77' },\n      { label: 'Luna', value: '99' },\n    ],\n  },\n]\n\nfunction getLabelForAddedFilter(filterId: string) {\n  return additionalFilters.find((filter) => filter.id === filterId)?.label ?? ''\n}\n\nfunction getOptionsForAddedFilter(filterId: string) {\n  return (\n    additionalFilters.find((filter) => filter.id === filterId)?.options ?? []\n  )\n}\n\nfunction getValueForAddedFilter(filterId: string) {\n  return additionalFilters.find((filter) => filter.id === filterId)?.value\n}\n\nfunction updateValueForAddedFilter(filterId: string, value: string | string[]) {\n  const filter = additionalFilters.find((filter) => filter.id === filterId)\n\n  if (filter) {\n    filter.value.value = value\n  }\n}\n\nconst addedFilterIds = ref\u003Cstring[]>([])\n\nconst availableFiltersToAdd = computed(() =>\n  additionalFilters.filter((filter) => {\n    return !addedFilterIds.value.some(\n      (addedFilterId) => addedFilterId === filter.id,\n    )\n  }),\n)\n\nasync function addFilter(filterId: string) {\n  addedFilterIds.value.push(filterId)\n\n  await nextTick()\n\n  if (addedFilterDropdownRefs.value.length) {\n    addedFilterDropdownRefs.value[\n      addedFilterDropdownRefs.value.length - 1\n    ].open()\n  }\n}\n\nfunction removeFilter(filterId: string) {\n  addedFilterIds.value = addedFilterIds.value.filter(\n    (addedFilterId) => addedFilterId !== filterId,\n  )\n}\n\nconst addedFilterDropdownRefs = ref\u003CInstanceType\u003Ctypeof BaseFilterDropdown>[]>(\n  [],\n)\n\n// Filters Schema\nconst filterSchema = z.object({\n  search: z.string().default(''),\n  statusIn: z.array(z.string()).default([]),\n  speciesIn: z.array(z.string()).default([]),\n  clientIn: z.array(z.string()).default([]),\n  patientIn: z.array(z.string()).default([]),\n  addedFilters: z.array(z.string()).default([]),\n})\n\nconst { filters, isInitialFilters, onFiltersChange, onResetFilters } =\n  useFiltersURLState(filterSchema)\n\n// Search Filter\nconst search = ref(filters?.value?.search)\nconst searchDebounced = refDebounced(search)\n\n// Status Filter\nconst statusIn = ref(filters?.value?.statusIn || [])\nconst status = ['ACTIVE', 'ARRIVED', 'CONSULTATION', 'DISCHARGED'] as const\ntype Status = (typeof status)[number]\nconst statusTranslations = {\n  ACTIVE: 'Active',\n  ARRIVED: 'Arrived',\n  CONSULTATION: 'Consultation',\n  DISCHARGED: 'Discharged',\n}\n\nconst statusOptions = Object.entries(statusTranslations).map(\n  ([value, label]) => ({\n    value,\n    label,\n  }),\n)\nfunction toggleStatus(toggled: Status) {\n  const set = new Set(statusIn.value)\n\n  if (set.has(toggled)) {\n    set.delete(toggled)\n  } else {\n    set.add(toggled)\n  }\n\n  statusIn.value = [...set]\n}\n\n// Species Filter\nconst speciesIn = ref(filters?.value?.speciesIn || [])\n\n// If filters URL state changes, update internal values accordingly\nwatchDebounced(\n  () => filters?.value,\n  (newFilters) => {\n    search.value = newFilters?.search\n    statusIn.value = newFilters?.statusIn\n    speciesIn.value = newFilters?.speciesIn\n    updateValueForAddedFilter('client', newFilters?.clientIn)\n    updateValueForAddedFilter('patient', newFilters?.patientIn)\n    addedFilterIds.value = newFilters?.addedFilters\n  },\n  { deep: true, immediate: true },\n)\n\n// If any of the internal values change, update filters URL changes accordingly\nwatch(\n  [\n    searchDebounced,\n    statusIn,\n    speciesIn,\n    getValueForAddedFilter('client'),\n    getValueForAddedFilter('patient'),\n    addedFilterIds,\n  ],\n  () => {\n    return onFiltersChange({\n      search: search.value,\n      statusIn: statusIn.value,\n      speciesIn: speciesIn.value,\n      clientIn: getValueForAddedFilter('client')?.value,\n      patientIn: getValueForAddedFilter('patient')?.value,\n      addedFilters: addedFilterIds.value,\n    })\n  },\n  { deep: true, immediate: true },\n)\n\n// Narrow breakpoint\nconst stackElement = useTemplateRef\u003CStack>('stackElementRef')\nconst { width } = useElementSize(stackElement)\n// based the breakpoint on some manual testing\nconst isNarrow = computed(() => width.value \u003C= 1090)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-stack ref=\"stackElementRef\" direction=\"horizontal\" gap=\"s\" wrap>\n    \u003Cnord-input v-model=\"search\" size=\"s\" label=\"Search items\" hide-label>\n      \u003Cnord-icon slot=\"start\" name=\"navigation-search\" size=\"xs\">\u003C/nord-icon>\n    \u003C/nord-input>\n\n    \u003C!-- Render a filter dropdown for the status filter at narrow widths... -->\n    \u003CBaseFilterDropdown\n      v-if=\"isNarrow\"\n      v-model=\"statusIn\"\n      name=\"status\"\n      label=\"Status\"\n      :options=\"statusOptions\"\n      multiple\n    />\n\n    \u003C!-- ...or a tag group if space allows -->\n    \u003Ctemplate v-else>\n      \u003Cnord-visually-hidden id=\"status-label\">\n        Time frame\n      \u003C/nord-visually-hidden>\n      \u003Cnord-tag-group aria-labelledby=\"status-label\">\n        \u003Cnord-tag\n          v-for=\"value in status\"\n          :key=\"value\"\n          size=\"s\"\n          variant=\"selectable\"\n          :checked=\"statusIn.includes(value)\"\n          @change=\"toggleStatus(value)\"\n        >\n          {{ statusTranslations[value] }}\n        \u003C/nord-tag>\n      \u003C/nord-tag-group>\n    \u003C/template>\n\n    \u003CBaseFilterDropdown\n      v-model=\"speciesIn\"\n      name=\"species\"\n      label=\"Species\"\n      :options=\"speciesOptions\"\n      multiple\n    />\n    \u003Cnord-divider direction=\"vertical\">\u003C/nord-divider>\n    \u003Ctemplate v-for=\"filterId in addedFilterIds\" :key=\"filterId\">\n      \u003CBaseFilterDropdown\n        ref=\"addedFilterDropdownRefs\"\n        name=\"add-filter\"\n        :model-value=\"getValueForAddedFilter(filterId)?.value\"\n        :label=\"getLabelForAddedFilter(filterId)\"\n        :options=\"getOptionsForAddedFilter(filterId)\"\n        multiple\n        removable\n        @remove=\"removeFilter(filterId)\"\n        @update:model-value=\"updateValueForAddedFilter(filterId, $event || '')\"\n      />\n    \u003C/template>\n\n    \u003CBaseFilterAddButton\n      v-if=\"availableFiltersToAdd.length\"\n      :options=\"availableFiltersToAdd\"\n      @select=\"addFilter\"\n    />\n\n    \u003CBaseFilterResetButton\n      :disabled=\"isInitialFilters\"\n      @click=\"onResetFilters\"\n    />\n  \u003C/nord-stack>\n\u003C/template>\n",{"name":2580,"displayName":2581,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2582},"pcnf-filter-dropdown","Filter Dropdown",[2583,2586,2591,2594,2599,2604,2609,2614,2619,2624,2629],{"name":2154,"displayName":2155,"url":2584,"code":2585},"/main/#/922/product-patterns/usage-examples/filter-dropdown/basic","\u003Cscript lang=\"ts\" setup>\nimport BaseFilterDropdown from '@/components/base/filter/Dropdown.vue'\nconst value = ref()\n\nconst options = [\n  { label: 'Amphibian', value: 'AMPHIBIAN' },\n  { label: 'Canine', value: 'CANINE' },\n  { label: 'Feline', value: 'FELINE' },\n  { label: 'Rodents', value: 'RODENTS' },\n]\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-stack direction=\"horizontal\" gap=\"s\" wrap>\n    \u003CBaseFilterDropdown\n      v-model=\"value\"\n      name=\"species\"\n      label=\"Species\"\n      :options\n    />\n  \u003C/nord-stack>\n\u003C/template>\n",{"name":2587,"displayName":2588,"url":2589,"code":2590},"infinite-scroll","Infinite scroll","/main/#/922/product-patterns/usage-examples/filter-dropdown/infinite-scroll","\u003Cscript lang=\"ts\" setup>\nimport type { SelectableOption } from '@/components/base/filter/Dropdown.vue'\nimport { useDevPlaygroundPatientsInfiniteListQuery } from '@/composables/useDevPlaygroundDataTable.js'\nimport BaseFilterDropdown from '@/components/base/filter/Dropdown.vue'\n\nconst value = ref\u003Cstring[]>([])\n\nconst searchQuery = ref('')\nconst paginationState = ref({ pageIndex: 0, pageSize: 20 })\n\nconst patientsInfiniteQuery = useDevPlaygroundPatientsInfiniteListQuery(\n  paginationState,\n  ref([]), // no sorting needed\n  {\n    search: searchQuery,\n  },\n)\n\n// Flatten all pages of patients into options\nconst options = computed\u003CSelectableOption[]>(() => {\n  if (!patientsInfiniteQuery.data?.pages) {\n    return []\n  }\n\n  return patientsInfiniteQuery.data.pages.flatMap((page) =>\n    (page.data || [])\n      .filter((patient) => patient?.id && patient?.attributes?.name)\n      .map((patient) => ({\n        value: patient.id,\n        label: patient?.attributes?.name || '',\n      })),\n  )\n})\n\nconst handleSearchChange = (query: string) => {\n  searchQuery.value = query\n  paginationState.value.pageIndex = 0\n}\n\nconst handleLoadMore = () => {\n  if (patientsInfiniteQuery.hasNextPage && !patientsInfiniteQuery.isFetching) {\n    patientsInfiniteQuery.fetchNextPage()\n  }\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-stack direction=\"horizontal\" gap=\"s\" wrap>\n    \u003CBaseFilterDropdown\n      v-model=\"value\"\n      name=\"patient\"\n      label=\"Patient\"\n      multiple\n      searchable\n      :options\n      :loading=\"\n        patientsInfiniteQuery.isPending ||\n        patientsInfiniteQuery.isFetchingNextPage\n      \"\n      :internal-search=\"false\"\n      @search-change=\"handleSearchChange\"\n      @load-more=\"handleLoadMore\"\n    />\n  \u003C/nord-stack>\n\u003C/template>\n",{"name":2342,"displayName":2343,"url":2592,"code":2593},"/main/#/922/product-patterns/usage-examples/filter-dropdown/multi-select","\u003Cscript lang=\"ts\" setup>\nimport BaseFilterDropdown from '@/components/base/filter/Dropdown.vue'\nconst value = ref([])\n\nconst options = [\n  { label: 'Amphibian', value: 'AMPHIBIAN' },\n  { label: 'Canine', value: 'CANINE' },\n  { label: 'Feline', value: 'FELINE' },\n  { label: 'Rodents', value: 'RODENTS' },\n]\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-stack direction=\"horizontal\" gap=\"s\" wrap>\n    \u003CBaseFilterDropdown\n      v-model=\"value\"\n      name=\"species\"\n      label=\"Species\"\n      :options\n      multiple\n    />\n  \u003C/nord-stack>\n\u003C/template>\n",{"name":2595,"displayName":2596,"url":2597,"code":2598},"multi-select-grouped-tree","Multi select grouped tree","/main/#/922/product-patterns/usage-examples/filter-dropdown/multi-select-grouped-tree","\u003Cscript lang=\"ts\" setup>\nimport BaseFilterDropdown from '@/components/base/filter/Dropdown.vue'\nconst value = ref([])\n\nconst options = [\n  {\n    heading: 'Canine',\n    children: [\n      { label: 'German Shepherd', value: 'GERMAN_SHEPHERD' },\n      { label: 'Siberian Husky', value: 'SIBERIAN_HUSKY' },\n    ],\n  },\n  {\n    heading: 'Feline',\n    children: [\n      { label: 'Siamese', value: 'SIAMESE' },\n      { label: 'Persian', value: 'PERSIAN' },\n    ],\n  },\n  { label: 'Amphibian', value: 'AMPHIBIAN' },\n  { label: 'Rodents', value: 'RODENTS' },\n]\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-stack direction=\"horizontal\" gap=\"s\" wrap>\n    \u003CBaseFilterDropdown\n      v-model=\"value\"\n      name=\"species\"\n      label=\"Species\"\n      :options\n      multiple\n    />\n  \u003C/nord-stack>\n\u003C/template>\n",{"name":2600,"displayName":2601,"url":2602,"code":2603},"multi-select-tree","Multi select tree","/main/#/922/product-patterns/usage-examples/filter-dropdown/multi-select-tree","\u003Cscript lang=\"ts\" setup>\nimport BaseFilterDropdown from '@/components/base/filter/Dropdown.vue'\nconst value = ref([])\n\nconst options = [\n  { label: 'Amphibian', value: 'AMPHIBIAN' },\n  {\n    label: 'Canine',\n    value: 'CANINE',\n    children: [\n      {\n        label: 'German Shepherd',\n        value: 'GERMAN_SHEPHERD',\n      },\n      {\n        label: 'Siberian Husky',\n        value: 'SIBERIAN_HUSKY',\n      },\n      {\n        label: 'Golden Retriever',\n        value: 'GOLDEN_RETRIEVER',\n      },\n    ],\n  },\n  {\n    label: 'Feline',\n    value: 'FELINE',\n    children: [\n      {\n        label: 'Maine Coon',\n        value: 'MAINE_COON',\n      },\n      { label: 'Siamese', value: 'SIAMESE' },\n      {\n        label: 'British Shorthair',\n        value: 'BRITISH_SHORTHAIR',\n      },\n    ],\n  },\n  {\n    label: 'Option 1 with no children',\n    value: 'OPTION_1',\n  },\n  {\n    label: 'Option 2 with no children',\n    value: 'OPTION_2',\n  },\n  {\n    label: 'Others',\n    value: 'OTHERS',\n  },\n]\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-stack direction=\"horizontal\" gap=\"s\" wrap>\n    \u003CBaseFilterDropdown\n      v-model=\"value\"\n      name=\"species-and-breeds\"\n      label=\"Species & Breeds\"\n      :options\n      multiple\n    />\n  \u003C/nord-stack>\n\u003C/template>\n",{"name":2605,"displayName":2606,"url":2607,"code":2608},"option-label-slot","Option label slot","/main/#/922/product-patterns/usage-examples/filter-dropdown/option-label-slot","\u003Cscript lang=\"ts\" setup>\nimport BaseFilterDropdown from '@/components/base/filter/Dropdown.vue'\nconst value = ref([])\n\nconst options = [\n  { label: 'Amphibian', value: 'AMPHIBIAN' },\n  { label: 'Feline', value: 'FELINE' },\n  { label: 'Rodents', value: 'RODENTS' },\n  {\n    heading: 'Canine',\n    children: [\n      { label: 'German Shepherd', value: 'GERMAN_SHEPHERD' },\n      { label: 'Siberian Husky', value: 'SIBERIAN_HUSKY' },\n    ],\n  },\n]\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-stack direction=\"horizontal\" gap=\"s\" wrap>\n    \u003CBaseFilterDropdown\n      v-model=\"value\"\n      name=\"species\"\n      label=\"Species\"\n      :options\n      multiple\n    >\n      \u003Ctemplate #option-label=\"{ option }\">\n        \u003Cdiv class=\"custom-option-label\">\n          \u003Cnord-icon name=\"user-single\" size=\"s\">\u003C/nord-icon>\n          \u003Cdiv class=\"label\">\n            {{ 'label' in option ? option.label : option.heading }}\n          \u003C/div>\n          \u003Cdiv class=\"suffix\">\n            Suffix\n            \u003Cnord-icon name=\"interface-star\" size=\"s\">\u003C/nord-icon>\n          \u003C/div>\n        \u003C/div>\n      \u003C/template>\n    \u003C/BaseFilterDropdown>\n  \u003C/nord-stack>\n\u003C/template>\n\n\u003Cstyle scoped>\n.custom-option-label {\n  flex: 1;\n  display: flex;\n  gap: var(--n-space-s);\n  justify-content: space-between;\n  align-items: center;\n}\n\n.custom-option-label .label {\n  margin-inline-end: auto;\n}\n\n.custom-option-label .suffix {\n  font-size: var(--n-font-size-s);\n  display: flex;\n  align-items: center;\n  gap: var(--n-space-s);\n}\n\n.custom-option-label :is(.suffix, nord-icon) {\n  color: var(--n-color-text-weaker);\n}\n\u003C/style>\n",{"name":2610,"displayName":2611,"url":2612,"code":2613},"removable","Removable","/main/#/922/product-patterns/usage-examples/filter-dropdown/removable","\u003Cscript lang=\"ts\" setup>\nimport BaseFilterDropdown from '@/components/base/filter/Dropdown.vue'\nconst value = ref([])\n\nconst options = [\n  { label: 'Amphibian', value: 'AMPHIBIAN' },\n  { label: 'Canine', value: 'CANINE' },\n  { label: 'Feline', value: 'FELINE' },\n  { label: 'Rodents', value: 'RODENTS' },\n]\n\nconst displayFilterDropdown = ref(true)\n\n/**\n * Example of how to remove the filter dropdown, will display it again after a second for demonstration purposes\n */\nfunction removeFilterDropdown() {\n  displayFilterDropdown.value = false\n\n  setTimeout(() => {\n    displayFilterDropdown.value = true\n  }, 1000)\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-stack direction=\"horizontal\" gap=\"s\" wrap>\n    \u003CBaseFilterDropdown\n      v-if=\"displayFilterDropdown\"\n      v-model=\"value\"\n      name=\"species\"\n      label=\"Species\"\n      :options\n      multiple\n      removable\n      @remove=\"removeFilterDropdown()\"\n    />\n  \u003C/nord-stack>\n\u003C/template>\n",{"name":2615,"displayName":2616,"url":2617,"code":2618},"searchable","Searchable","/main/#/922/product-patterns/usage-examples/filter-dropdown/searchable","\u003Cscript lang=\"ts\" setup>\nimport BaseFilterDropdown from '@/components/base/filter/Dropdown.vue'\nconst value = ref([])\n\nconst options = [\n  { label: 'Amphibian', value: 'AMPHIBIAN' },\n  { label: 'Canine', value: 'CANINE' },\n  { label: 'Feline', value: 'FELINE' },\n  { label: 'Rodents', value: 'RODENTS' },\n]\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-stack direction=\"horizontal\" gap=\"s\" wrap>\n    \u003CBaseFilterDropdown\n      v-model=\"value\"\n      name=\"species\"\n      label=\"Species\"\n      :options\n      multiple\n      searchable\n    />\n  \u003C/nord-stack>\n\u003C/template>\n",{"name":2620,"displayName":2621,"url":2622,"code":2623},"searchable-with-asynchronous-data","Searchable with asynchronous data","/main/#/922/product-patterns/usage-examples/filter-dropdown/searchable-with-asynchronous-data","\u003Cscript lang=\"ts\" setup>\nimport BaseFilterDropdown from '@/components/base/filter/Dropdown.vue'\nconst value = ref([])\n\nconst options = ref([])\n\nconst isFetchingLanguages = ref(false)\n\nconst fetchLanguages = async (query: string) => {\n  // From: https://www.back4app.com/database/paul-datasets/list-of-all-programming-languages/get-started/javascript/rest-api/fetch?objectClassSlug=dataset\n\n  isFetchingLanguages.value = true\n\n  let where = ''\n\n  if (query) {\n    where =\n      '&where=' +\n      encodeURIComponent(\n        JSON.stringify({\n          ProgrammingLanguage: {\n            $regex: `${query}|${query.toUpperCase()}|${\n              query[0].toUpperCase() + query.slice(1)\n            }`,\n          },\n        }),\n      )\n  }\n\n  const response = await fetch(\n    'https://parseapi.back4app.com/classes/All_Programming_Languages?limit=9999&order=ProgrammingLanguage&keys=ProgrammingLanguage' +\n      where,\n    {\n      headers: {\n        'X-Parse-Application-Id': 'XpRShKqJcxlqE5EQKs4bmSkozac44osKifZvLXCL', // This is the fake app's application id\n        'X-Parse-Master-Key': 'Mr2UIBiCImScFbbCLndBv8qPRUKwBAq27plwXVuv', // This is the fake app's readonly master key\n      },\n    },\n  )\n\n  const data = await response.json() // Here you have the data that you need\n\n  options.value = data.results.map(\n    (item: { objectId: string; ProgrammingLanguage: string }) => {\n      return { value: item.objectId, label: item.ProgrammingLanguage }\n    },\n  )\n\n  isFetchingLanguages.value = false\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-stack direction=\"horizontal\" gap=\"s\" wrap>\n    \u003CBaseFilterDropdown\n      v-model=\"value\"\n      name=\"programming-language\"\n      label=\"Programming language\"\n      :options\n      multiple\n      searchable\n      :loading=\"isFetchingLanguages\"\n      :internal-search=\"false\"\n      @search-change=\"fetchLanguages($event)\"\n      @open=\"fetchLanguages('')\"\n    />\n  \u003C/nord-stack>\n\u003C/template>\n",{"name":2625,"displayName":2626,"url":2627,"code":2628},"searchable-with-tree","Searchable with tree","/main/#/922/product-patterns/usage-examples/filter-dropdown/searchable-with-tree","\u003Cscript lang=\"ts\" setup>\nimport BaseFilterDropdown from '@/components/base/filter/Dropdown.vue'\nconst value = ref([])\n\nconst options = [\n  { label: 'Amphibian', value: 'AMPHIBIAN' },\n  {\n    label: 'Canine',\n    value: 'CANINE',\n    children: [\n      {\n        label: 'German Shepherd',\n        value: 'GERMAN_SHEPHERD',\n      },\n      {\n        label: 'Siberian Husky',\n        value: 'SIBERIAN_HUSKY',\n      },\n      {\n        label: 'Golden Retriever',\n        value: 'GOLDEN_RETRIEVER',\n      },\n    ],\n  },\n  {\n    label: 'Feline',\n    value: 'FELINE',\n    children: [\n      {\n        label: 'Maine Coon',\n        value: 'MAINE_COON',\n      },\n      { label: 'Siamese', value: 'SIAMESE' },\n      {\n        label: 'British Shorthair',\n        value: 'BRITISH_SHORTHAIR',\n      },\n    ],\n  },\n  {\n    label: 'Option 1 with no children',\n    value: 'OPTION_1',\n  },\n  {\n    label: 'Option 2 with no children',\n    value: 'OPTION_2',\n  },\n  {\n    label: 'Others',\n    value: 'OTHERS',\n  },\n]\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-stack direction=\"horizontal\" gap=\"s\" wrap>\n    \u003CBaseFilterDropdown\n      v-model=\"value\"\n      name=\"species-and-breeds\"\n      label=\"Species & Breeds\"\n      :options\n      multiple\n      searchable\n    />\n  \u003C/nord-stack>\n\u003C/template>\n",{"name":2630,"displayName":2631,"url":2632,"code":2633},"size","Size","/main/#/922/product-patterns/usage-examples/filter-dropdown/size","\u003Cscript lang=\"ts\" setup>\nimport BaseFilterDropdown from '@/components/base/filter/Dropdown.vue'\nconst value = ref([])\n\nconst options = [\n  { label: 'Amphibian', value: 'AMPHIBIAN' },\n  { label: 'Canine', value: 'CANINE' },\n  { label: 'Feline', value: 'FELINE' },\n  { label: 'Rodents', value: 'RODENTS' },\n]\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-stack direction=\"horizontal\" gap=\"s\" wrap>\n    \u003Cnord-fieldset label=\"Small\">\n      \u003CBaseFilterDropdown\n        v-model=\"value\"\n        name=\"species-size-s\"\n        label=\"Species\"\n        :options\n        multiple\n        size=\"s\"\n      />\n    \u003C/nord-fieldset>\n\n    \u003Cnord-fieldset label=\"Medium\">\n      \u003CBaseFilterDropdown\n        v-model=\"value\"\n        name=\"species-size-m\"\n        label=\"Species\"\n        :options\n        multiple\n        size=\"m\"\n      />\n    \u003C/nord-fieldset>\n\n    \u003Cnord-fieldset label=\"Large\">\n      \u003CBaseFilterDropdown\n        v-model=\"value\"\n        name=\"species-size-l\"\n        label=\"Species\"\n        :options\n        multiple\n        size=\"l\"\n      />\n    \u003C/nord-fieldset>\n  \u003C/nord-stack>\n\u003C/template>\n",{"name":2635,"displayName":2636,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2637},"pcnf-input-number","Input Number",[2638,2641,2646,2651,2656,2661,2666,2671,2676,2681],{"name":2154,"displayName":2155,"url":2639,"code":2640},"/main/#/922/product-patterns/usage-examples/input-number/basic","\u003Cscript setup lang=\"ts\">\nimport InputNumber from '@/components/input/Number.vue'\nconst moneyAmount = ref\u003Cnumber>()\nconst percentageValue = ref\u003Cnumber>()\nconst unitaryWeight = ref\u003Cnumber>()\nconst fullNumber = ref\u003Cnumber>()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-stack gap=\"l\">\n    \u003Ch2 class=\"n:text-l n:font-active\">Basic Usage\u003C/h2>\n    \u003Cp class=\"n:text-weaker\">\n      The InputNumber component with default props. Each type uses sensible\n      defaults for decimal places and formatting.\n    \u003C/p>\n\n    \u003CInputNumber\n      v-model=\"moneyAmount\"\n      type=\"money\"\n      label=\"Money amount\"\n      hint=\"2 decimal places, currency symbol\"\n    />\n\n    \u003CInputNumber\n      v-model=\"percentageValue\"\n      type=\"percentage\"\n      label=\"Percentage value\"\n      hint=\"0-100 range, percent symbol\"\n    />\n\n    \u003CInputNumber\n      v-model=\"unitaryWeight\"\n      type=\"unitary\"\n      unit-label=\"kg\"\n      label=\"Weight\"\n      hint=\"With custom unit label\"\n    />\n\n    \u003CInputNumber\n      v-model=\"fullNumber\"\n      type=\"full\"\n      label=\"Quantity\"\n      hint=\"Integer only, no decimals\"\n    />\n\n    \u003Cnord-card padding=\"m\" color=\"neutral\">\n      \u003Cnord-stack gap=\"s\">\n        \u003Ch3 class=\"n:text-m n:font-active\">Values:\u003C/h3>\n        \u003Cp>\u003Cstrong>moneyAmount:\u003C/strong> {{ moneyAmount }}\u003C/p>\n        \u003Cp>\u003Cstrong>percentageValue:\u003C/strong> {{ percentageValue }}\u003C/p>\n        \u003Cp>\u003Cstrong>unitaryWeight:\u003C/strong> {{ unitaryWeight }}\u003C/p>\n        \u003Cp>\u003Cstrong>fullNumber:\u003C/strong> {{ fullNumber }}\u003C/p>\n      \u003C/nord-stack>\n    \u003C/nord-card>\n  \u003C/nord-stack>\n\u003C/template>\n",{"name":2642,"displayName":2643,"url":2644,"code":2645},"form-validation","Form validation","/main/#/922/product-patterns/usage-examples/input-number/form-validation","\u003Cscript setup lang=\"ts\">\nimport { useForm } from 'vee-validate'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { z } from 'zod'\nimport InputNumber from '@/components/input/Number.vue'\n\nconst schema = toTypedSchema(\n  z.object({\n    price: z.number().positive('Price must be greater than 0'),\n  }),\n)\n\nconst { defineField, errors } = useForm({\n  validationSchema: schema,\n})\n\nconst [price] = defineField('price')\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-stack gap=\"l\">\n    \u003CInputNumber\n      v-model=\"price\"\n      type=\"money\"\n      label=\"Price\"\n      :error=\"errors.price\"\n    />\n\n    \u003Cnord-card padding=\"m\" color=\"neutral\">\n      \u003Cp>\u003Cstrong>price:\u003C/strong> {{ price }}\u003C/p>\n    \u003C/nord-card>\n  \u003C/nord-stack>\n\u003C/template>\n",{"name":2647,"displayName":2648,"url":2649,"code":2650},"format-rules","Format rules","/main/#/922/product-patterns/usage-examples/input-number/format-rules","\u003Cscript setup lang=\"ts\">\nimport InputNumber from '@/components/input/Number.vue'\nconst price3Decimals = ref\u003Cnumber>()\nconst percentage1Decimal = ref\u003Cnumber>()\nconst weight4Decimals = ref\u003Cnumber>()\nconst rangeConstrained = ref\u003Cnumber>()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-stack gap=\"l\">\n    \u003CInputNumber\n      v-model=\"price3Decimals\"\n      type=\"money\"\n      label=\"Price (3 decimals)\"\n      :format-rules=\"{ maximumFractionDigits: 3 }\"\n    />\n\n    \u003CInputNumber\n      v-model=\"percentage1Decimal\"\n      type=\"percentage\"\n      label=\"Percentage (1 decimal)\"\n      :format-rules=\"{ maximumFractionDigits: 1 }\"\n    />\n\n    \u003CInputNumber\n      v-model=\"weight4Decimals\"\n      type=\"unitary\"\n      unit-label=\"kg\"\n      label=\"Weight (4 decimals)\"\n      :format-rules=\"{ maximumFractionDigits: 4 }\"\n    />\n\n    \u003CInputNumber\n      v-model=\"rangeConstrained\"\n      type=\"money\"\n      label=\"Amount (min: 10, max: 1000)\"\n      :format-rules=\"{ min: 10, max: 1000 }\"\n    />\n\n    \u003Cnord-card padding=\"m\" color=\"neutral\">\n      \u003Cp>\u003Cstrong>price3Decimals:\u003C/strong> {{ price3Decimals }}\u003C/p>\n      \u003Cp>\u003Cstrong>percentage1Decimal:\u003C/strong> {{ percentage1Decimal }}\u003C/p>\n      \u003Cp>\u003Cstrong>weight4Decimals:\u003C/strong> {{ weight4Decimals }}\u003C/p>\n      \u003Cp>\u003Cstrong>rangeConstrained:\u003C/strong> {{ rangeConstrained }}\u003C/p>\n    \u003C/nord-card>\n  \u003C/nord-stack>\n\u003C/template>\n",{"name":2652,"displayName":2653,"url":2654,"code":2655},"full","Full","/main/#/922/product-patterns/usage-examples/input-number/full","\u003Cscript setup lang=\"ts\">\nimport InputNumber from '@/components/input/Number.vue'\nconst quantity = ref\u003Cnumber>()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-stack gap=\"l\">\n    \u003CInputNumber v-model=\"quantity\" type=\"full\" label=\"Quantity\" />\n\n    \u003Cnord-card padding=\"m\" color=\"neutral\">\n      \u003Cp>\u003Cstrong>quantity:\u003C/strong> {{ quantity }}\u003C/p>\n    \u003C/nord-card>\n  \u003C/nord-stack>\n\u003C/template>\n",{"name":2657,"displayName":2658,"url":2659,"code":2660},"money","Money","/main/#/922/product-patterns/usage-examples/input-number/money","\u003Cscript setup lang=\"ts\">\nimport InputNumber from '@/components/input/Number.vue'\nconst amount = ref\u003Cnumber>()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-stack gap=\"l\">\n    \u003CInputNumber v-model=\"amount\" type=\"money\" label=\"Money amount\" />\n\n    \u003Cnord-card padding=\"m\" color=\"neutral\">\n      \u003Cp>\u003Cstrong>amount:\u003C/strong> {{ amount }}\u003C/p>\n    \u003C/nord-card>\n  \u003C/nord-stack>\n\u003C/template>\n",{"name":2662,"displayName":2663,"url":2664,"code":2665},"percentage","Percentage","/main/#/922/product-patterns/usage-examples/input-number/percentage","\u003Cscript setup lang=\"ts\">\nimport InputNumber from '@/components/input/Number.vue'\nconst value = ref\u003Cnumber>()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-stack gap=\"l\">\n    \u003CInputNumber v-model=\"value\" type=\"percentage\" label=\"Percentage value\" />\n\n    \u003Cnord-card padding=\"m\" color=\"neutral\">\n      \u003Cp>\u003Cstrong>value:\u003C/strong> {{ value }}\u003C/p>\n    \u003C/nord-card>\n  \u003C/nord-stack>\n\u003C/template>\n",{"name":2667,"displayName":2668,"url":2669,"code":2670},"positive-negative","Positive negative","/main/#/922/product-patterns/usage-examples/input-number/positive-negative","\u003Cscript setup lang=\"ts\">\nimport InputNumber from '@/components/input/Number.vue'\nconst positiveOnly = ref\u003Cnumber>()\nconst negativeOnly = ref\u003Cnumber>()\nconst anyValue = ref\u003Cnumber>()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-stack gap=\"l\">\n    \u003CInputNumber v-model=\"positiveOnly\" type=\"positive\" label=\"Positive only\" />\n\n    \u003CInputNumber v-model=\"negativeOnly\" type=\"negative\" label=\"Negative only\" />\n\n    \u003CInputNumber\n      v-model=\"anyValue\"\n      type=\"money\"\n      label=\"Any value (positive or negative)\"\n    />\n\n    \u003Cnord-card padding=\"m\" color=\"neutral\">\n      \u003Cp>\u003Cstrong>positiveOnly:\u003C/strong> {{ positiveOnly }}\u003C/p>\n      \u003Cp>\u003Cstrong>negativeOnly:\u003C/strong> {{ negativeOnly }}\u003C/p>\n      \u003Cp>\u003Cstrong>anyValue:\u003C/strong> {{ anyValue }}\u003C/p>\n    \u003C/nord-card>\n  \u003C/nord-stack>\n\u003C/template>\n",{"name":2672,"displayName":2673,"url":2674,"code":2675},"select-on-focus","Select on focus","/main/#/922/product-patterns/usage-examples/input-number/select-on-focus","\u003Cscript setup lang=\"ts\">\nimport InputNumber from '@/components/input/Number.vue'\nconst amount = ref(123.45)\nconst selectOnFocus = ref\u003C'always' | 'zero' | 'never'>('zero')\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-stack gap=\"l\">\n    \u003Cnord-select v-model=\"selectOnFocus\" label=\"selectOnFocus\">\n      \u003Coption value=\"always\">always\u003C/option>\n      \u003Coption value=\"zero\">zero\u003C/option>\n      \u003Coption value=\"never\">never\u003C/option>\n    \u003C/nord-select>\n\n    \u003CInputNumber\n      v-model=\"amount\"\n      type=\"money\"\n      label=\"Amount\"\n      :select-on-focus\n    />\n\n    \u003Cnord-card padding=\"m\" color=\"neutral\">\n      \u003Cp>\u003Cstrong>amount:\u003C/strong> {{ amount }}\u003C/p>\n    \u003C/nord-card>\n  \u003C/nord-stack>\n\u003C/template>\n",{"name":2677,"displayName":2678,"url":2679,"code":2680},"unitary","Unitary","/main/#/922/product-patterns/usage-examples/input-number/unitary","\u003Cscript setup lang=\"ts\">\nimport InputNumber from '@/components/input/Number.vue'\nconst weight = ref\u003Cnumber>()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-stack gap=\"l\">\n    \u003CInputNumber\n      v-model=\"weight\"\n      type=\"unitary\"\n      unit-label=\"kg\"\n      label=\"Weight\"\n    />\n\n    \u003Cnord-card padding=\"m\" color=\"neutral\">\n      \u003Cp>\u003Cstrong>weight:\u003C/strong> {{ weight }}\u003C/p>\n    \u003C/nord-card>\n  \u003C/nord-stack>\n\u003C/template>\n",{"name":2682,"displayName":2683,"url":2684,"code":2685},"zero-on-nullish","Zero on nullish","/main/#/922/product-patterns/usage-examples/input-number/zero-on-nullish","\u003Cscript setup lang=\"ts\">\nimport InputNumber from '@/components/input/Number.vue'\nconst amount = ref\u003Cnumber>()\nconst zeroOnNullish = ref(true)\n\nconst onCheckboxChange = (event: Event) => {\n  const eventTarget = event?.target as unknown as HTMLInputElement\n  zeroOnNullish.value = eventTarget?.checked\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-stack gap=\"l\">\n    \u003Cnord-checkbox\n      v-model=\"zeroOnNullish\"\n      :checked=\"zeroOnNullish\"\n      label=\"Activate Zero on Nullish\"\n      @change=\"onCheckboxChange\"\n    />\n\n    \u003Cp>\n      After checking or unchecking the input, delete all the text in the input.\n    \u003C/p>\n\n    \u003CInputNumber\n      v-model=\"amount\"\n      type=\"money\"\n      label=\"Amount\"\n      :zero-on-nullish\n    />\n\n    \u003Cnord-card padding=\"m\" color=\"neutral\">\n      \u003Cp>\u003Cstrong>amount:\u003C/strong> {{ amount }}\u003C/p>\n    \u003C/nord-card>\n  \u003C/nord-stack>\n\u003C/template>\n",{"name":2687,"displayName":2688,"description":2689,"usageContent":2690,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2691},"pcnf-legend-counter","Legend Counter","Legend counter is used to display a set of counters with labels and corresponding values, styled according to their status. It supports translation for labels and offers size customization.","\u003Cdiv class=\"n-usage n-usage-do\">\n\u003Ch3>Do\u003C/h3>\n\u003Cul>\n\u003Cli>Use this component to display counters (auxiliary information) for distinct categories or statuses.\u003C/li>\n\u003Cli>Ensure the label corresponds to one of the predefined statuses: notStarted, processing, submitted, or incorrectAmount.\u003C/li>\n\u003Cli>Provide meaningful numeric values or default to 0 if no value is available.\u003C/li>\n\u003Cli>Use the size prop to adjust the size of the counters to fit the design requirements.\u003C/li>\n\u003C/ul>\n\u003C/div>\n\u003Cdiv class=\"n-usage n-usage-dont\">\n\u003Ch3>Don't\u003C/h3>\n\u003Cul>\n\u003Cli>Don't use this component for non-status-related counters; it is designed specifically for predefined statuses.\u003C/li>\n\u003Cli>Avoid providing excessively large or negative numbers as value, as it may break visual consistency.\u003C/li>\n\u003Cli>Don't use this component if translations for label are unavailable or unclear.\u003C/li>\n\u003Cli>Use counters sparingly as you can overwhelm users and reduce the effectiveness of the feedback. Instead, balance the need for each section and display the strictly necessary.\u003C/li>\n\u003C/ul>\n\u003C/div>",[2692,2695],{"name":2154,"displayName":2155,"url":2693,"code":2694},"/main/#/922/product-patterns/usage-examples/legend-counter/basic","\u003Cscript setup lang=\"ts\">\nimport type { Counter } from '@/components/base/LegendCounter.vue'\nimport BaseLegendCounter from '@/components/base/LegendCounter.vue'\n\nconst counters = ref\u003CCounter[]>([\n  { label: 'notStarted', value: 45 },\n  { label: 'processing', value: 6 },\n  { label: 'submitted', value: 100 },\n  { label: 'incorrectAmount', value: 0 },\n])\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBaseLegendCounter :counters />\n\u003C/template>\n",{"name":2630,"displayName":2631,"url":2696,"code":2697},"/main/#/922/product-patterns/usage-examples/legend-counter/size","\u003Cscript setup lang=\"ts\">\nimport type { Counter } from '@/components/base/LegendCounter.vue'\nimport BaseLegendCounter from '@/components/base/LegendCounter.vue'\n\nconst counters = ref\u003CCounter[]>([\n  { label: 'notStarted', value: 45 },\n  { label: 'processing', value: 6 },\n  { label: 'submitted', value: 100 },\n  { label: 'incorrectAmount', value: 0 },\n])\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-stack>\n    \u003CBaseLegendCounter size=\"s\" :counters />\n    \u003CBaseLegendCounter :counters />\n  \u003C/nord-stack>\n\u003C/template>\n",{"name":2699,"displayName":2658,"description":2700,"usageContent":2701,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2702},"pcnf-money","Money is a composable that converts monetary values from integers to various monetary string formats and vice versa, ensuring proper formatting for both display and JSON:API interactions.","\u003Cdiv class=\"n-usage n-usage-do\">\n\u003Ch3>Do\u003C/h3>\n\u003Cul>\n\u003Cli>Use the composable to handle the conversion of monetary values between major and minor units, ensuring proper formatting for display and JSON:API interactions.\u003C/li>\n\u003Cli>Leverage the example implementation to allow users to input monetary values in the major format and preview various formatted results.\u003C/li>\n\u003Cli>Use computed properties to dynamically create a money instance and provide preformatted values like minor, major, and various formatting options such as currency2dps and number4dps.\u003C/li>\n\u003Cli>Add input validation to restrict users to entering only valid numeric formats with a single decimal point for accurate conversion.\u003C/li>\n\u003Cli>Use the toFormat method to display formatted monetary values in a table or UI component, ensuring clarity for the user.\u003C/li>\n\u003Cli>Provide intuitive labels and use helpers like formatNumberValue to display fallback values (e.g., '-') for invalid or undefined inputs.\u003C/li>\n\u003C/ul>\n\u003C/div>\n\u003Cdiv class=\"n-usage n-usage-dont\">\n\u003Ch3>Don't\u003C/h3>\n\u003Cul>\n\u003Cli>Don't bypass the composable's formatting methods (toFormat) to create custom formats, as this can lead to inconsistencies with other monetary displays.\u003C/li>\n\u003Cli>Avoid allowing users to enter invalid numeric strings with multiple decimal points or non-numeric characters; implement input validation as shown in the example.\u003C/li>\n\u003Cli>Don't rely solely on raw minor or major values for display purposes; always use formatting for a user-friendly experience.\u003C/li>\n\u003Cli>Avoid using this composable in scenarios where unsupported decimal precision or exotic currency formats are required.\u003C/li>\n\u003Cli>Don't hardcode output formatting or values in the UI; ensure values are dynamically computed and formatted using the provided methods.\u003C/li>\n\u003Cli>Avoid using the composable outside of monetary-related contexts, as it is designed specifically for handling monetary units and formatting.\u003C/li>\n\u003C/ul>\n\u003C/div>",[2703,2706],{"name":2154,"displayName":2155,"url":2704,"code":2705},"/main/#/922/product-patterns/usage-examples/money/basic","\u003Cscript setup lang=\"ts\">\nimport { useMoney } from '@/composables/useMoney.js'\nconst numberValue = ref('12345.6789')\n\nconst moneyInstance = computed(() => {\n  const value = Number(numberValue.value)\n  return Number.isFinite(value) ? useMoney(value) : undefined\n})\n\nconst formatNumberValue = (value?: number | string) =>\n  Number.isFinite(Number.parseFloat(String(value))) ? value : '-'\n\nconst data = computed(() => [\n  {\n    title: 'Minor unit',\n    value: moneyInstance.value?.minor,\n  },\n  {\n    title: 'Major unit',\n    value: moneyInstance.value?.major,\n  },\n  {\n    title: 'Formatted (default)',\n    value: moneyInstance.value?.toFormat(),\n  },\n  {\n    title: 'Formatted (numberFull)',\n    value: moneyInstance.value?.toFormat('numberFull'),\n  },\n  {\n    title: 'Formatted (number2dps)',\n    value: moneyInstance.value?.toFormat('number2dps'),\n  },\n  {\n    title: 'Formatted (number4dps)',\n    value: moneyInstance.value?.toFormat('number4dps'),\n  },\n  {\n    title: 'Formatted (currencyFull)',\n    value: moneyInstance.value?.toFormat('currencyFull'),\n  },\n  {\n    title: 'Formatted (currency2dps)',\n    value: moneyInstance.value?.toFormat('currency2dps'),\n  },\n  {\n    title: 'Formatted (currency4dps)',\n    value: moneyInstance.value?.toFormat('currency4dps'),\n  },\n])\n\n// Watcher to only allow typing numbers in JavaScript's `Number` format with . as decimal separator\nwatch(numberValue, (newValue, oldValue) => {\n  // Count the number of decimal points in the new value\n  const decimalPointCount = (newValue.match(/\\./g) || []).length\n\n  // If there are more than one decimal point, revert to old value\n  if (decimalPointCount > 1) {\n    numberValue.value = oldValue\n    return // Early return to avoid unnecessary processing\n  }\n\n  // Remove any non-numeric characters except for decimal points\n  numberValue.value = newValue.replace(/[^0-9.]/g, '')\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-card padding=\"l\">\n    \u003Ch4 slot=\"header\">Money formatting\u003C/h4>\n\n    \u003Cnord-stack\n      direction=\"horizontal\"\n      justify-content=\"space-between\"\n      class=\"n:mbe-l\"\n    >\n      \u003Cnord-input\n        v-model=\"numberValue\"\n        disallow-pattern=\"[^0-9.]\"\n        type=\"unit\"\n        class=\"n:mbe-l\"\n        label=\"Conversion from major unit\"\n        :style=\"`--n-input-text-align: start`\"\n      >\n        \u003Cdiv slot=\"start\">major\u003C/div>\n      \u003C/nord-input>\n    \u003C/nord-stack>\n\n    \u003Cnord-table>\n      \u003Ctable>\n        \u003Cthead>\n          \u003Ctr>\n            \u003Cth>Conversion\u003C/th>\n            \u003Cth :style=\"`text-align: right`\">Result\u003C/th>\n          \u003C/tr>\n        \u003C/thead>\n        \u003Ctbody>\n          \u003Ctr v-for=\"({ title, value }, key) in data\" :key>\n            \u003Ctd>{{ title }}\u003C/td>\n            \u003Ctd :style=\"`text-align: right`\">\n              {{ formatNumberValue(value) }}\n            \u003C/td>\n          \u003C/tr>\n        \u003C/tbody>\n      \u003C/table>\n    \u003C/nord-table>\n  \u003C/nord-card>\n\u003C/template>\n",{"name":2707,"displayName":2708,"url":2709,"code":2710},"monetary-string","Monetary string","/main/#/922/product-patterns/usage-examples/money/monetary-string","\u003Cscript setup lang=\"ts\">\nimport vNumberInput from '@/directives/number-input-mask/index.js'\nimport {\n  useMajorUnitToNumericString,\n  useNumericStringToMajorUnit,\n} from '@/composables/number.js'\nimport { useMoney } from '@/composables/useMoney.js'\n\nconst majorUnit = ref(12345.6789)\nconst monetaryString = ref(useMajorUnitToNumericString(majorUnit.value))\n\nconst moneyInstance = computed(() => {\n  const val = useNumericStringToMajorUnit(monetaryString.value)\n  return Number.isFinite(val) ? useMoney(val) : undefined\n})\n\nconst formatNumberValue = (value?: number | string) =>\n  Number.isFinite(Number.parseFloat(String(value))) ? value : '-'\n\nconst data = computed(() => [\n  {\n    title: 'Minor unit',\n    value: moneyInstance.value?.minor,\n  },\n  {\n    title: 'Major unit',\n    value: moneyInstance.value?.major,\n  },\n  {\n    title: 'Formatted (default)',\n    value: moneyInstance.value?.toFormat(),\n  },\n  {\n    title: 'Formatted (numberFull)',\n    value: moneyInstance.value?.toFormat('numberFull'),\n  },\n  {\n    title: 'Formatted (number2dps)',\n    value: moneyInstance.value?.toFormat('number2dps'),\n  },\n  {\n    title: 'Formatted (number4dps)',\n    value: moneyInstance.value?.toFormat('number4dps'),\n  },\n  {\n    title: 'Formatted (currencyFull)',\n    value: moneyInstance.value?.toFormat('currencyFull'),\n  },\n  {\n    title: 'Formatted (currency2dps)',\n    value: moneyInstance.value?.toFormat('currency2dps'),\n  },\n  {\n    title: 'Formatted (currency4dps)',\n    value: moneyInstance.value?.toFormat('currency4dps'),\n  },\n])\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-card padding=\"l\">\n    \u003Ch4 slot=\"header\">Money formatting\u003C/h4>\n\n    \u003Cnord-stack\n      direction=\"horizontal\"\n      justify-content=\"space-between\"\n      class=\"n:mbe-l\"\n    >\n      \u003Cnord-input\n        v-model=\"monetaryString\"\n        v-number-input\n        type=\"unit\"\n        class=\"n:mbe-l\"\n        label=\"Conversion from monetary string\"\n        :style=\"`--n-input-text-align: start`\"\n      >\n        \u003Cdiv slot=\"start\">monetary\u003C/div>\n      \u003C/nord-input>\n    \u003C/nord-stack>\n\n    \u003Cnord-table>\n      \u003Ctable>\n        \u003Cthead>\n          \u003Ctr>\n            \u003Cth>Conversion\u003C/th>\n            \u003Cth :style=\"`text-align: right`\">Result\u003C/th>\n          \u003C/tr>\n        \u003C/thead>\n        \u003Ctbody>\n          \u003Ctr v-for=\"({ title, value }, key) in data\" :key>\n            \u003Ctd>{{ title }}\u003C/td>\n            \u003Ctd :style=\"`text-align: right`\">\n              {{ formatNumberValue(value) }}\n            \u003C/td>\n          \u003C/tr>\n        \u003C/tbody>\n      \u003C/table>\n    \u003C/nord-table>\n  \u003C/nord-card>\n\u003C/template>\n",{"name":2712,"displayName":2713,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2714},"pcnf-number-stepper","Number Stepper",[2715,2718],{"name":2154,"displayName":2155,"url":2716,"code":2717},"/main/#/922/product-patterns/usage-examples/number-stepper/basic","\u003Cscript setup lang=\"ts\">\nimport InputStepper from '@/components/input/Stepper.vue'\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputStepper label=\"Number Stepper\" size=\"m\" inline-size=\"200px\" />\n\u003C/template>\n",{"name":2719,"displayName":2720,"url":2721,"code":2722},"positive-numbers","Positive numbers","/main/#/922/product-patterns/usage-examples/number-stepper/positive-numbers","\u003Cscript setup lang=\"ts\">\nimport InputStepper from '@/components/input/Stepper.vue'\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputStepper\n    label=\"Number Stepper\"\n    size=\"m\"\n    inline-size=\"200px\"\n    disallow-pattern=\"[^0-9]\"\n  />\n\u003C/template>\n",{"name":2724,"displayName":2725,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2726},"pcnf-overflow-inline-list","Overflow Inline List",[2727,2730,2733,2736,2741],{"name":2154,"displayName":2155,"url":2728,"code":2729},"/main/#/922/product-patterns/usage-examples/overflow-inline-list/basic","\u003Cscript setup lang=\"ts\">\nimport BaseOverflowInlineList from '@/components/base/overflow/InlineList.vue'\nconst shortList = ['Apple', 'Banana', 'Orange']\nconst longList = [\n  'Apple',\n  'Banana',\n  'Orange',\n  'Grape',\n  'Mango',\n  'Pineapple',\n  'Peach',\n  'Plum',\n  'Kiwi',\n  'Strawberry',\n  'Blueberry',\n  'Raspberry',\n]\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv\n    class=\"n:flex n:flex-col n:flex-wrap n:gap-l n:text-center n:container-m\"\n  >\n    \u003Cnord-card>\n      \u003Ch2 slot=\"header\">Basic Usage\u003C/h2>\n\n      \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n        \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n          \u003Ch3 class=\"n:text-m n:font-heading\">Short list (no overflow)\u003C/h3>\n          \u003CBaseOverflowInlineList class=\"n:text-s\" :items=\"shortList\" />\n        \u003C/div>\n\n        \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n          \u003Ch3 class=\"n:text-m n:font-heading\">Long list (will overflow)\u003C/h3>\n          \u003CBaseOverflowInlineList class=\"n:text-s\" :items=\"longList\" />\n        \u003C/div>\n      \u003C/div>\n    \u003C/nord-card>\n  \u003C/div>\n\u003C/template>\n",{"name":2556,"displayName":2557,"url":2731,"code":2732},"/main/#/922/product-patterns/usage-examples/overflow-inline-list/advanced","\u003Cscript setup lang=\"ts\">\nimport BaseOverflowInlineList from '@/components/base/overflow/InlineList.vue'\nconst users = [\n  { id: 1, name: 'John Doe', email: 'john@example.com' },\n  { id: 2, name: 'Jane Smith', email: 'jane@example.com' },\n  { id: 3, name: 'Bob Wilson', email: 'bob@example.com' },\n  { id: 4, name: 'Alice Brown', email: 'alice@example.com' },\n  { id: 5, name: 'Charlie Davis', email: 'charlie@example.com' },\n]\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv\n    class=\"n:flex n:flex-col n:flex-wrap n:gap-l n:text-center n:container-m\"\n  >\n    \u003Cnord-card>\n      \u003Ch2 slot=\"header\">\n        Advanced Example – with custom item and custom divider\n      \u003C/h2>\n\n      \u003CBaseOverflowInlineList class=\"n:text-l\" :items=\"users\">\n        \u003C!-- Custom rendering for visible items -->\n        \u003Ctemplate #item=\"{ item }\">\n          \u003Cspan\n            class=\"user-item whitespace-nowrap n:flex n:flex-row n:flex-nowrap n:items-center n:justify-center n:gap-s\"\n          >\n            \u003Cnord-avatar size=\"s\" :name=\"item.name\" />\n            \u003Cspan>{{ item.name }}\u003C/span>\n          \u003C/span>\n        \u003C/template>\n\n        \u003C!-- Custom rendering for overflow items -->\n        \u003Ctemplate #overflow-item=\"{ item }\">\n          \u003Cspan class=\"user-item\">\n            \u003Cnord-avatar size=\"s\" :name=\"item.name\" />\n            \u003Cspan>{{ item.name }}\u003C/span>\n            \u003Cspan class=\"user-email\">{{ item.email }}\u003C/span>\n          \u003C/span>\n        \u003C/template>\n\n        \u003C!-- Custom divider -->\n        \u003Ctemplate #divider>\n          \u003Cnord-divider direction=\"vertical\" class=\"n:mx-m\" />\n        \u003C/template>\n      \u003C/BaseOverflowInlineList>\n    \u003C/nord-card>\n  \u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\n.user-item {\n  white-space: nowrap;\n}\n\n.user-email {\n  color: var(--n-color-text-weaker);\n  font-size: var(--n-font-size-s);\n}\n\nnord-divider {\n  block-size: var(--n-size-icon-m);\n}\n\n:deep(.list-item-more-trigger) {\n  --n-button-font-size: var(--n-font-size-l);\n}\n\u003C/style>\n",{"name":2539,"displayName":2540,"url":2734,"code":2735},"/main/#/922/product-patterns/usage-examples/overflow-inline-list/custom-divider","\u003Cscript setup lang=\"ts\">\nimport BaseOverflowInlineList from '@/components/base/overflow/InlineList.vue'\nconst items = [\n  'Red',\n  'Blue',\n  'Green',\n  'Yellow',\n  'Purple',\n  'Orange',\n  'Pink',\n  'Brown',\n  'Gray',\n  'Black',\n  'White',\n]\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv\n    class=\"n:flex n:flex-col n:flex-wrap n:gap-l n:text-center n:container-m\"\n  >\n    \u003Cnord-card>\n      \u003Ch2 slot=\"header\">Custom Divider\u003C/h2>\n\n      \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n        \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n          \u003Ch3 class=\"n:text-m n:font-heading\">Using bullet points\u003C/h3>\n          \u003CBaseOverflowInlineList class=\"n:text-s\" :items>\n            \u003Ctemplate #divider>\n              \u003Cspan class=\"n:mx-s\">•\u003C/span>\n            \u003C/template>\n          \u003C/BaseOverflowInlineList>\n        \u003C/div>\n\n        \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n          \u003Ch3 class=\"n:text-m n:font-heading\">Using divider\u003C/h3>\n          \u003CBaseOverflowInlineList class=\"n:text-s\" :items>\n            \u003Ctemplate #divider>\n              \u003Cnord-divider direction=\"vertical\" class=\"n:mx-s\" />\n            \u003C/template>\n          \u003C/BaseOverflowInlineList>\n        \u003C/div>\n\n        \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n          \u003Ch3 class=\"n:text-m n:font-heading\">Using arrows\u003C/h3>\n          \u003CBaseOverflowInlineList class=\"n:text-s\" :items>\n            \u003Ctemplate #divider>\n              \u003Cspan class=\"n:mx-s\">→\u003C/span>\n            \u003C/template>\n          \u003C/BaseOverflowInlineList>\n        \u003C/div>\n      \u003C/div>\n    \u003C/nord-card>\n  \u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\nnord-divider {\n  block-size: var(--n-size-icon-m);\n}\n\u003C/style>\n",{"name":2737,"displayName":2738,"url":2739,"code":2740},"custom-item","Custom item","/main/#/922/product-patterns/usage-examples/overflow-inline-list/custom-item","\u003Cscript setup lang=\"ts\">\nimport BaseOverflowInlineList from '@/components/base/overflow/InlineList.vue'\nconst colors = [\n  { name: 'Red', hex: '#FF0000' },\n  { name: 'Blue', hex: '#0000FF' },\n  { name: 'Green', hex: '#00FF00' },\n  { name: 'Yellow', hex: '#FFFF00' },\n  { name: 'Purple', hex: '#800080' },\n  { name: 'Orange', hex: '#FFA500' },\n  { name: 'Pink', hex: '#FFC0CB' },\n  { name: 'Brown', hex: '#A52A2A' },\n  { name: 'Gray', hex: '#808080' },\n  { name: 'Black', hex: '#000000' },\n  { name: 'White', hex: '#FFFFFF' },\n]\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv\n    class=\"n:flex n:flex-col n:flex-wrap n:gap-l n:text-center n:container-m\"\n  >\n    \u003Cnord-card>\n      \u003Ch2 slot=\"header\">Custom Item\u003C/h2>\n\n      \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n        \u003CBaseOverflowInlineList class=\"n:text-s\" :items=\"colors\">\n          \u003Ctemplate #item=\"{ item }\">\n            \u003Cspan class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-xs\">\n              \u003Cspan\n                class=\"color-swatch\"\n                :style=\"{ backgroundColor: item.hex }\"\n              />\n              \u003Cspan>{{ item.name }}\u003C/span>\n            \u003C/span>\n          \u003C/template>\n        \u003C/BaseOverflowInlineList>\n      \u003C/div>\n    \u003C/nord-card>\n  \u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\n.color-swatch {\n  display: inline-block;\n  inline-size: var(--n-size-icon-s);\n  block-size: var(--n-size-icon-s);\n  border-radius: var(--n-border-radius-s);\n  border: 1px solid var(--n-color-border);\n}\n\u003C/style>\n",{"name":2742,"displayName":2743,"url":2744,"code":2745},"empty-state","Empty state","/main/#/922/product-patterns/usage-examples/overflow-inline-list/empty-state","\u003Cscript setup lang=\"ts\">\nimport BaseOverflowInlineList from '@/components/base/overflow/InlineList.vue'\nconst emptyList: string[] = []\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv\n    class=\"n:flex n:flex-col n:flex-wrap n:gap-l n:text-center n:container-m\"\n  >\n    \u003Cnord-card>\n      \u003Ch2 slot=\"header\">Empty State\u003C/h2>\n\n      \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n        \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n          \u003Ch3 class=\"n:text-m n:font-heading\">Default empty state\u003C/h3>\n          \u003CBaseOverflowInlineList class=\"n:text-s\" :items=\"emptyList\" />\n        \u003C/div>\n\n        \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n          \u003Ch3 class=\"n:text-m n:font-heading\">Custom empty state text\u003C/h3>\n          \u003CBaseOverflowInlineList\n            class=\"n:text-s\"\n            :items=\"emptyList\"\n            empty-text=\"No items available\"\n          />\n        \u003C/div>\n      \u003C/div>\n    \u003C/nord-card>\n  \u003C/div>\n\u003C/template>\n",{"name":2747,"displayName":2748,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2749},"pcnf-overflow-list","Overflow List",[2750,2753,2756,2761],{"name":2154,"displayName":2155,"url":2751,"code":2752},"/main/#/922/product-patterns/usage-examples/overflow-list/basic","\u003Cscript setup lang=\"ts\">\nimport BaseOverflowList from '@/components/base/overflow/List.vue'\nconst shortList = [\n  { id: 1, name: 'Apple' },\n  { id: 2, name: 'Banana' },\n  { id: 3, name: 'Orange' },\n]\n\nconst longList = [\n  { id: 1, name: 'Apple' },\n  { id: 2, name: 'Banana' },\n  { id: 3, name: 'Orange' },\n  { id: 4, name: 'Grape' },\n  { id: 5, name: 'Mango' },\n  { id: 6, name: 'Pineapple' },\n  { id: 7, name: 'Peach' },\n  { id: 8, name: 'Plum' },\n  { id: 9, name: 'Kiwi' },\n  { id: 10, name: 'Strawberry' },\n  { id: 11, name: 'Blueberry' },\n  { id: 12, name: 'Raspberry' },\n]\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv\n    class=\"n:flex n:flex-col n:flex-wrap n:gap-l n:text-center n:container-m\"\n  >\n    \u003Cnord-card>\n      \u003Ch2 slot=\"header\">Basic Usage\u003C/h2>\n\n      \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n        \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n          \u003Ch3 class=\"n:text-m n:font-heading\">Short list (no overflow)\u003C/h3>\n          \u003CBaseOverflowList :items=\"shortList\" item-key=\"id\">\n            \u003Ctemplate #item=\"{ item }\">\n              \u003Cspan>{{ item.name }}\u003C/span>\n            \u003C/template>\n          \u003C/BaseOverflowList>\n        \u003C/div>\n\n        \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n          \u003Ch3 class=\"n:text-m n:font-heading\">\n            Long list (will overflow after 5 items)\n          \u003C/h3>\n          \u003CBaseOverflowList :items=\"longList\" item-key=\"id\">\n            \u003Ctemplate #item=\"{ item }\">\n              \u003Cspan>{{ item.name }}\u003C/span>\n            \u003C/template>\n          \u003C/BaseOverflowList>\n        \u003C/div>\n\n        \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n          \u003Ch3 class=\"n:text-m n:font-heading\">Custom maxVisible (3 items)\u003C/h3>\n          \u003CBaseOverflowList :items=\"longList\" item-key=\"id\" :max-visible=\"3\">\n            \u003Ctemplate #item=\"{ item }\">\n              \u003Cspan>{{ item.name }}\u003C/span>\n            \u003C/template>\n          \u003C/BaseOverflowList>\n        \u003C/div>\n      \u003C/div>\n    \u003C/nord-card>\n  \u003C/div>\n\u003C/template>\n",{"name":2737,"displayName":2738,"url":2754,"code":2755},"/main/#/922/product-patterns/usage-examples/overflow-list/custom-item","\u003Cscript setup lang=\"ts\">\nimport BaseOverflowList from '@/components/base/overflow/List.vue'\nconst colors = [\n  { id: 1, name: 'Red', hex: '#FF0000' },\n  { id: 2, name: 'Blue', hex: '#0000FF' },\n  { id: 3, name: 'Green', hex: '#00FF00' },\n  { id: 4, name: 'Yellow', hex: '#FFFF00' },\n  { id: 5, name: 'Purple', hex: '#800080' },\n  { id: 6, name: 'Orange', hex: '#FFA500' },\n  { id: 7, name: 'Pink', hex: '#FFC0CB' },\n  { id: 8, name: 'Brown', hex: '#A52A2A' },\n  { id: 9, name: 'Gray', hex: '#808080' },\n  { id: 10, name: 'Black', hex: '#000000' },\n  { id: 11, name: 'White', hex: '#FFFFFF' },\n]\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv\n    class=\"n:flex n:flex-col n:flex-wrap n:gap-l n:text-center n:container-m\"\n  >\n    \u003Cnord-card>\n      \u003Ch2 slot=\"header\">Custom Item\u003C/h2>\n\n      \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n        \u003CBaseOverflowList :items=\"colors\" item-key=\"id\" :max-visible=\"4\">\n          \u003Ctemplate #item=\"{ item }\">\n            \u003Cspan class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-xs\">\n              \u003Cspan\n                class=\"color-swatch\"\n                :style=\"{ backgroundColor: item.hex }\"\n              />\n              \u003Cspan>{{ item.name }}\u003C/span>\n            \u003C/span>\n          \u003C/template>\n        \u003C/BaseOverflowList>\n      \u003C/div>\n    \u003C/nord-card>\n  \u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\n.color-swatch {\n  display: inline-block;\n  inline-size: var(--n-size-icon-s);\n  block-size: var(--n-size-icon-s);\n  border-radius: var(--n-border-radius-s);\n  border: 1px solid var(--n-color-border);\n}\n\u003C/style>\n",{"name":2757,"displayName":2758,"url":2759,"code":2760},"custom-overflow-item","Custom overflow item","/main/#/922/product-patterns/usage-examples/overflow-list/custom-overflow-item","\u003Cscript setup lang=\"ts\">\nimport BaseOverflowList from '@/components/base/overflow/List.vue'\nconst users = [\n  { id: 1, name: 'John Doe', email: 'john@example.com' },\n  { id: 2, name: 'Jane Smith', email: 'jane@example.com' },\n  { id: 3, name: 'Bob Wilson', email: 'bob@example.com' },\n  { id: 4, name: 'Alice Brown', email: 'alice@example.com' },\n  { id: 5, name: 'Charlie Davis', email: 'charlie@example.com' },\n  { id: 6, name: 'Diana Evans', email: 'diana@example.com' },\n  { id: 7, name: 'Edward Fox', email: 'edward@example.com' },\n  { id: 8, name: 'Fiona Green', email: 'fiona@example.com' },\n]\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv\n    class=\"n:flex n:flex-col n:flex-wrap n:gap-l n:text-center n:container-m\"\n  >\n    \u003Cnord-card>\n      \u003Ch2 slot=\"header\">Custom Overflow Item\u003C/h2>\n      \u003Cp class=\"n:mbe-m n:text-weaker\">\n        The overflow popout can show different content than the inline items\n        using the \u003Ccode>overflowItem\u003C/code> slot.\n      \u003C/p>\n\n      \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n        \u003CBaseOverflowList :items=\"users\" item-key=\"id\" :max-visible=\"3\">\n          \u003C!-- Inline: just show name -->\n          \u003Ctemplate #item=\"{ item }\">\n            \u003Cspan class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-xs\">\n              \u003Cnord-avatar size=\"s\" :name=\"item.name\" />\n              \u003Cspan>{{ item.name }}\u003C/span>\n            \u003C/span>\n          \u003C/template>\n\n          \u003C!-- Popout: show name and email -->\n          \u003Ctemplate #overflow-item=\"{ item }\">\n            \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-s\">\n              \u003Cnord-avatar size=\"s\" :name=\"item.name\" />\n              \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-0\">\n                \u003Cspan>{{ item.name }}\u003C/span>\n                \u003Cspan class=\"n:text-xs n:text-weaker\">\n                  {{ item.email }}\n                \u003C/span>\n              \u003C/div>\n            \u003C/div>\n          \u003C/template>\n        \u003C/BaseOverflowList>\n      \u003C/div>\n    \u003C/nord-card>\n  \u003C/div>\n\u003C/template>\n",{"name":2762,"displayName":2763,"url":2764,"code":2765},"stacked","Stacked","/main/#/922/product-patterns/usage-examples/overflow-list/stacked","\u003Cscript setup lang=\"ts\">\nimport BaseOverflowList from '@/components/base/overflow/List.vue'\nconst users = [\n  { id: 1, name: 'John Doe', role: 'Admin' },\n  { id: 2, name: 'Jane Smith', role: 'Editor' },\n  { id: 3, name: 'Bob Wilson', role: 'Viewer' },\n  { id: 4, name: 'Alice Brown', role: 'Editor' },\n  { id: 5, name: 'Charlie Davis', role: 'Viewer' },\n  { id: 6, name: 'Diana Evans', role: 'Admin' },\n  { id: 7, name: 'Edward Fox', role: 'Viewer' },\n  { id: 8, name: 'Fiona Green', role: 'Editor' },\n]\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv\n    class=\"n:flex n:flex-col n:flex-wrap n:gap-l n:text-center n:container-m\"\n  >\n    \u003Cnord-card>\n      \u003Ch2 slot=\"header\">Stacked Variant\u003C/h2>\n      \u003Cp class=\"n:mbe-m n:text-weaker\">\n        Use \u003Ccode>variant=\"stack\"\u003C/code> to display items vertically without\n        separators.\n      \u003C/p>\n\n      \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-l\">\n        \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n          \u003Ch3 class=\"n:text-m n:font-heading\">Inline (default)\u003C/h3>\n          \u003CBaseOverflowList :items=\"users\" item-key=\"id\" :max-visible=\"3\">\n            \u003Ctemplate #item=\"{ item }\">\n              \u003Cspan>{{ item.name }}\u003C/span>\n            \u003C/template>\n          \u003C/BaseOverflowList>\n        \u003C/div>\n\n        \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n          \u003Ch3 class=\"n:text-m n:font-heading\">Stacked\u003C/h3>\n          \u003CBaseOverflowList\n            variant=\"stack\"\n            item-key=\"id\"\n            :items=\"users\"\n            :max-visible=\"3\"\n          >\n            \u003Ctemplate #item=\"{ item }\">\n              \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-s\">\n                \u003Cnord-avatar size=\"s\" :name=\"item.name\" />\n                \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-0\">\n                  \u003Cspan>{{ item.name }}\u003C/span>\n                  \u003Cspan class=\"n:text-xs n:text-weaker\">\n                    {{ item.role }}\n                  \u003C/span>\n                \u003C/div>\n              \u003C/div>\n            \u003C/template>\n          \u003C/BaseOverflowList>\n        \u003C/div>\n      \u003C/div>\n    \u003C/nord-card>\n  \u003C/div>\n\u003C/template>\n",{"name":2767,"displayName":4,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2768},"pcnf-pagination",[2769,2772,2777],{"name":2154,"displayName":2155,"url":2770,"code":2771},"/main/#/922/product-patterns/usage-examples/pagination/basic","\u003Cscript setup lang=\"ts\">\nimport type { PaginationState } from '@tanstack/vue-table'\nimport type { QueryPaginationMeta } from '@/utils/jsonapi.js'\nimport BasePagination from '@/components/base/Pagination.vue'\n\nconst paginationState = ref\u003CPaginationState>({\n  pageIndex: 0,\n  pageSize: 30,\n})\n\nconst paginationMeta = computed(\n  (): QueryPaginationMeta => ({\n    count: 157, // Total items\n    page: paginationState.value.pageIndex + 1, // Convert to 1-based\n    pages: Math.ceil(157 / paginationState.value.pageSize),\n  }),\n)\n\nconst handlePageChange = (newPagination: PaginationState) => {\n  paginationState.value = newPagination\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-card padding=\"l\">\n    \u003Ch4 slot=\"header\">Basic Pagination\u003C/h4>\n\n    \u003Cdiv class=\"n:mbe-l\">\n      \u003Cp>Current pagination state:\u003C/p>\n      \u003Cpre>{{ JSON.stringify(paginationState, null, 2) }}\u003C/pre>\n    \u003C/div>\n\n    \u003CBasePagination\n      v-model:page-index=\"paginationState.pageIndex\"\n      v-model:page-size=\"paginationState.pageSize\"\n      :pagination-meta\n      @page-change=\"handlePageChange\"\n    />\n  \u003C/nord-card>\n\u003C/template>\n",{"name":2773,"displayName":2774,"url":2775,"code":2776},"url-sync","Url sync","/main/#/922/product-patterns/usage-examples/pagination/url-sync","\u003Cscript setup lang=\"ts\">\nimport { toNumber } from '@/utils/number.js'\nimport type { QueryPaginationMeta } from '@/utils/jsonapi.js'\nimport BasePagination from '@/components/base/Pagination.vue'\nconst route = useRoute()\n\nconst paginationMeta = computed(\n  (): QueryPaginationMeta => ({\n    count: 157, // Total items\n    page: toNumber(route.query.page) || 1,\n    pages: Math.ceil(157 / (toNumber(route.query.pageSize) || 10)),\n  }),\n)\n\n// Show current URL parameters\nconst urlParams = computed(() => ({\n  page: route.query.page || '1',\n  pageSize: route.query.pageSize || '10',\n}))\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-card padding=\"l\">\n    \u003Ch4 slot=\"header\">Pagination with URL Sync\u003C/h4>\n\n    \u003Cdiv class=\"n:mbe-l\">\n      \u003Cp>Current URL parameters:\u003C/p>\n      \u003Cpre>{{ JSON.stringify(urlParams, null, 2) }}\u003C/pre>\n      \u003Cp class=\"n:text-weaker\">\n        Try changing the pagination and notice how the URL updates\n        automatically.\n      \u003C/p>\n    \u003C/div>\n\n    \u003CBasePagination :pagination-meta use-url-sync />\n  \u003C/nord-card>\n\u003C/template>\n",{"name":2778,"displayName":2779,"url":2780,"code":2781},"url-sync-filter-id","Url sync filter id","/main/#/922/product-patterns/usage-examples/pagination/url-sync-filter-id","\u003Cscript setup lang=\"ts\">\nimport { toNumber } from '@/utils/number.js'\nimport type { QueryPaginationMeta } from '@/utils/jsonapi.js'\nimport BasePagination from '@/components/base/Pagination.vue'\nconst route = useRoute()\n\nconst paginationMeta = computed(\n  (): QueryPaginationMeta => ({\n    count: 157, // Total items\n    page: toNumber(route.query['list-page']) || 1,\n    pages: Math.ceil(157 / (toNumber(route.query['list-pageSize']) || 10)),\n  }),\n)\n\n// Show current URL parameters\nconst urlParams = computed(() => ({\n  'list-page': route.query['list-page'] || '1',\n  'list-pageSize': route.query['list-pageSize'] || '10',\n}))\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cnord-card padding=\"l\">\n    \u003Ch4 slot=\"header\">Pagination with URL Sync + Filter ID\u003C/h4>\n\n    \u003Cdiv class=\"n:mbe-l\">\n      \u003Cp>Current URL parameters with \"list\" prefix:\u003C/p>\n      \u003Cpre>{{ JSON.stringify(urlParams, null, 2) }}\u003C/pre>\n      \u003Cp class=\"n:text-weaker\">\n        Notice how the URL parameters are prefixed with \"list-\" to avoid\n        conflicts with other pagination instances.\n      \u003C/p>\n    \u003C/div>\n\n    \u003CBasePagination\n      :pagination-meta\n      :page-size-options=\"[5, 10, 20, 50]\"\n      use-url-sync\n      filter-id=\"list\"\n      set-links-href\n    />\n  \u003C/nord-card>\n\u003C/template>\n",{"name":2783,"displayName":2784,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2785},"pcnf-popup","Popup",[2786,2789,2794,2799,2804,2809],{"name":2154,"displayName":2155,"url":2787,"code":2788},"/main/#/922/product-patterns/usage-examples/popup/basic","\u003Cscript setup lang=\"ts\">\nimport BaseEditableStack from '@/components/base/editable/Stack.vue'\nimport BaseFieldPlaceholder from '@/components/base/FieldPlaceholder.vue'\nimport BaseButton from '@/components/base/Button.vue'\nimport BaseReadOnlyField from '@/components/base/read-only/Field.vue'\nimport BasePopout from '@/components/base/popout/Popout.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n    \u003CBaseButton aria-controls=\"popout\" aria-haspopup=\"true\"> Text \u003C/BaseButton>\n    \u003CBasePopout id=\"popout\">Just a popout with plain content\u003C/BasePopout>\n\n    \u003CBaseButton aria-controls=\"read-only\" aria-haspopup=\"true\">\n      Read only\n    \u003C/BaseButton>\n    \u003CBasePopout id=\"read-only\">\n      \u003CBaseReadOnlyField label=\"Label\" value=\"Input data\" />\n    \u003C/BasePopout>\n\n    \u003CBaseButton aria-controls=\"field-placeholder\" aria-haspopup=\"true\">\n      Field placeholder\n    \u003C/BaseButton>\n    \u003CBasePopout id=\"field-placeholder\">\n      \u003CBaseFieldPlaceholder\n        name=\"field-placeholder\"\n        label=\"Label\"\n        button-text=\"Add label\"\n        inline-edit\n        @show-content=\"console.log('show content')\"\n      />\n    \u003C/BasePopout>\n\n    \u003CBaseButton aria-controls=\"edit-info\" aria-haspopup=\"true\">\n      Edit info\n    \u003C/BaseButton>\n    \u003CBasePopout id=\"edit-info\">\n      \u003CBaseEditableStack\n        label=\"Edit\"\n        @edit=\"console.log('Edit button clicked')\"\n      >\n        \u003CBaseReadOnlyField label=\"Label\" value=\"Input data\" />\n      \u003C/BaseEditableStack>\n    \u003C/BasePopout>\n  \u003C/div>\n\u003C/template>\n",{"name":2790,"displayName":2791,"url":2792,"code":2793},"finances","Finances","/main/#/922/product-patterns/usage-examples/popup/finances","\u003Cscript setup lang=\"ts\">\nimport BaseStackDivided from '@/components/base/stack/Divided.vue'\nimport BaseButton from '@/components/base/Button.vue'\nimport BasePopout from '@/components/base/popout/Popout.vue'\nimport PaymentSummaryRow from '@/components/PaymentSummaryRow.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n    \u003CBaseButton\n      aria-controls=\"payment-summary\"\n      aria-haspopup=\"true\"\n      variant=\"plain\"\n      size=\"s\"\n      class=\"balance-info-button\"\n    >\n      \u003Cspan class=\"n:text-m n:font-active n:text-danger\"> $126.00 \u003C/span>\n      \u003Cnord-icon slot=\"end\" name=\"interface-dropdown-small\">\u003C/nord-icon>\n    \u003C/BaseButton>\n    \u003CBasePopout id=\"payment-summary\">\n      \u003CBaseStackDivided>\n        \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-xs\">\n          \u003CPaymentSummaryRow label=\"Unpaid invoices\" value=\"$178.00\" is-total />\n          \u003CPaymentSummaryRow\n            label=\"Finalized invoices\"\n            value=\"$138.00\"\n            is-child\n          />\n          \u003CPaymentSummaryRow label=\"Draft invoices\" value=\"$40.00\" is-child />\n        \u003C/div>\n        \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-xs\">\n          \u003CPaymentSummaryRow\n            label=\"Available credit\"\n            value=\"-$52.00\"\n            is-total\n            negative-value\n          />\n          \u003CPaymentSummaryRow label=\"Prepayments\" value=\"-$20.00\" is-child />\n          \u003CPaymentSummaryRow label=\"Credit notes\" value=\"-$30.00\" is-child />\n          \u003CPaymentSummaryRow\n            label=\"Finalized credit notes\"\n            value=\"-$20.00\"\n            is-child\n          />\n        \u003C/div>\n      \u003C/BaseStackDivided>\n    \u003C/BasePopout>\n\n    \u003CBaseButton\n      aria-controls=\"payment-summary-icon\"\n      aria-haspopup=\"true\"\n      variant=\"plain\"\n      size=\"s\"\n      square\n    >\n      \u003Cnord-icon\n        label=\"Show payment details\"\n        name=\"file-invoice\"\n        size=\"m\"\n        class=\"n:text-danger\"\n      >\u003C/nord-icon>\n    \u003C/BaseButton>\n    \u003CBasePopout id=\"payment-summary-icon\">\n      \u003Ctemplate #header>\n        \u003CPaymentSummaryRow\n          label=\"Client balance\"\n          value=\"$126.00\"\n          is-total\n          is-header\n        />\n      \u003C/template>\n      \u003CBaseStackDivided>\n        \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-xs\">\n          \u003CPaymentSummaryRow label=\"Unpaid invoices\" value=\"$178.00\" is-total />\n          \u003CPaymentSummaryRow\n            label=\"Finalized invoices\"\n            value=\"$138.00\"\n            is-child\n          />\n          \u003CPaymentSummaryRow label=\"Draft invoices\" value=\"$40.00\" is-child />\n        \u003C/div>\n        \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-xs\">\n          \u003CPaymentSummaryRow\n            label=\"Available credit\"\n            value=\"-$52.00\"\n            is-total\n            negative-value\n          />\n          \u003CPaymentSummaryRow label=\"Prepayments\" value=\"-$20.00\" is-child />\n          \u003CPaymentSummaryRow label=\"Credit notes\" value=\"-$30.00\" is-child />\n          \u003CPaymentSummaryRow\n            label=\"Finalized credit notes\"\n            value=\"-$20.00\"\n            is-child\n          />\n        \u003C/div>\n      \u003C/BaseStackDivided>\n    \u003C/BasePopout>\n\n    \u003CBaseButton\n      aria-controls=\"all-info\"\n      aria-haspopup=\"true\"\n      variant=\"plain\"\n      size=\"s\"\n      square\n    >\n      \u003Cnord-icon\n        label=\"Show all info\"\n        name=\"interface-menu-small\"\n        size=\"m\"\n      >\u003C/nord-icon>\n    \u003C/BaseButton>\n    \u003CBasePopout id=\"all-info\">\n      \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n        \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-s\">\n          \u003Cnord-icon\n            name=\"generic-telephone\"\n            size=\"s\"\n            class=\"n:text-icon\"\n          >\u003C/nord-icon>\n          314 159 2653\n        \u003C/div>\n        \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-s\">\n          \u003Cnord-icon\n            name=\"file-invoice\"\n            size=\"s\"\n            class=\"n:text-icon\"\n          >\u003C/nord-icon>\n          \u003Cspan class=\"n:font-active n:text-danger\"> $126.00 \u003C/span>\n        \u003C/div>\n      \u003C/div>\n    \u003C/BasePopout>\n  \u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\n.balance-info-button:hover nord-icon {\n  color: var(--n-color-icon-hover);\n}\n\u003C/style>\n",{"name":2795,"displayName":2796,"url":2797,"code":2798},"with-complex-content","With complex content","/main/#/922/product-patterns/usage-examples/popup/with-complex-content","\u003Cscript setup lang=\"ts\">\nimport BaseEditableStack from '@/components/base/editable/Stack.vue'\nimport BaseStackDivided from '@/components/base/stack/Divided.vue'\nimport BaseButton from '@/components/base/Button.vue'\nimport BaseReadOnlyField from '@/components/base/read-only/Field.vue'\nimport BasePopout from '@/components/base/popout/Popout.vue'\nimport FormComboboxMultiple from '@/components/form/ComboboxMultiple.vue'\nimport FormDatePicker from '@/components/form/DatePicker.vue'\nimport FormNordField from '@/components/form/NordField.vue'\n\nconst comboboxOptions = ref([\n  { label: 'Amphibian', value: 'AMPHIBIAN' },\n  { label: 'Canine', value: 'CANINE' },\n  { label: 'Feline', value: 'FELINE' },\n  { label: 'Rodents', value: 'RODENTS' },\n])\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n    \u003CBaseButton aria-controls=\"popout\" aria-haspopup=\"true\">\n      View patient location #1000\n    \u003C/BaseButton>\n\n    \u003CBasePopout id=\"popout\" heading=\"Patient location #1000\">\n      \u003CBaseStackDivided class=\"n:container-m\">\n        \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n          \u003CBaseReadOnlyField label=\"Status\">\n            \u003Cnord-badge>Occupied\u003C/nord-badge>\n          \u003C/BaseReadOnlyField>\n\n          \u003CBaseReadOnlyField label=\"Patients\">\n            \u003Ca>Florian (1000)\u003C/a>, Dog, American Bullnese\n          \u003C/BaseReadOnlyField>\n\n          \u003CBaseReadOnlyField label=\"Capacity\" />\n        \u003C/div>\n\n        \u003CBaseReadOnlyField\n          label=\"Remarks\"\n          value=\"Lorem ipsum dolor sit amet consectetur adipiscing elit\"\n        />\n      \u003C/BaseStackDivided>\n    \u003C/BasePopout>\n\n    \u003CBaseButton aria-controls=\"form\" aria-haspopup=\"true\">Form\u003C/BaseButton>\n    \u003CBasePopout id=\"form\">\n      \u003Cform class=\"n:flex n:flex-col n:flex-wrap n:gap-l\">\n        \u003CFormNordField name=\"text\" label=\"Text input\" inline-edit />\n        \u003CFormDatePicker name=\"date\" label=\"Date\" inline-edit />\n        \u003CFormComboboxMultiple\n          name=\"species\"\n          label=\"Species\"\n          :options=\"comboboxOptions\"\n          placeholder=\"Select species\"\n          inline-edit\n        />\n      \u003C/form>\n      \u003Ctemplate #footer>\n        \u003CBaseButton size=\"s\">Update\u003C/BaseButton>\n      \u003C/template>\n    \u003C/BasePopout>\n\n    \u003CBaseButton\n      aria-controls=\"information-type-simple-value\"\n      aria-haspopup=\"true\"\n    >\n      Readonly\n    \u003C/BaseButton>\n    \u003CBasePopout id=\"information-type-simple-value\">\n      \u003CBaseStackDivided>\n        \u003CBaseReadOnlyField label=\"Label\" value=\"Value\" />\n        \u003CBaseEditableStack\n          label=\"Edit\"\n          @edit=\"console.log('Edit button clicked')\"\n        >\n          \u003CBaseReadOnlyField label=\"Label\" value=\"Input data\" />\n        \u003C/BaseEditableStack>\n        \u003CBaseReadOnlyField\n          label=\"Notes\"\n          value=\"Long value: lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\"\n        />\n        \u003CBaseReadOnlyField\n          label=\"Tags\"\n          :value=\"['Aggresive', 'Diabetic']\"\n          display-as=\"tags\"\n        />\n        \u003CBaseEditableStack\n          label=\"Edit\"\n          @edit=\"console.log('Edit button clicked')\"\n        >\n          \u003CBaseReadOnlyField\n            label=\"Editable tags\"\n            :value=\"[\n              'Aggresive',\n              'Diabetic',\n              'Oxygen',\n              'Soft walls (padded)',\n              'With windows',\n            ]\"\n            display-as=\"tags\"\n          />\n        \u003C/BaseEditableStack>\n      \u003C/BaseStackDivided>\n    \u003C/BasePopout>\n  \u003C/div>\n\u003C/template>\n",{"name":2800,"displayName":2801,"url":2802,"code":2803},"with-header-and-footer","With header and footer","/main/#/922/product-patterns/usage-examples/popup/with-header-and-footer","\u003Cscript setup lang=\"ts\">\nimport BaseEditableStack from '@/components/base/editable/Stack.vue'\nimport BaseStackDivided from '@/components/base/stack/Divided.vue'\nimport BaseButton from '@/components/base/Button.vue'\nimport BaseFormattedAddress from '@/components/base/formatted/Address.vue'\nimport BaseReadOnlyField from '@/components/base/read-only/Field.vue'\nimport BaseCardInnerSection from '@/components/base/card/InnerSection.vue'\nimport BasePopout from '@/components/base/popout/Popout.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n    \u003CBaseButton aria-controls=\"popout\" aria-haspopup=\"true\">\n      Simple\n    \u003C/BaseButton>\n    \u003CBasePopout id=\"popout\">\n      \u003Ctemplate #header>The header\u003C/template>\n      This text is intentionally long so we can see how it wraps and the popout\n      doesn't grow larger than the \u003Cb>max-inline-size\u003C/b> value.\n      \u003Ctemplate #footer>\n        \u003CBaseButton size=\"s\">Close\u003C/BaseButton>\n      \u003C/template>\n    \u003C/BasePopout>\n\n    \u003CBaseButton aria-controls=\"cards-with-header\" aria-haspopup=\"true\">\n      Read only\n    \u003C/BaseButton>\n    \u003CBasePopout id=\"cards-with-header\" expand>\n      \u003Ctemplate #header>\n        \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-s\">\n          \u003Cnord-avatar>JD\u003C/nord-avatar>\n          \u003Ch2 class=\"n:text-m n:font-active\">John Dorian (2468)\u003C/h2>\n        \u003C/div>\n      \u003C/template>\n      \u003CBaseStackDivided>\n        \u003CBaseCardInnerSection>\n          \u003CBaseReadOnlyField label=\"Phone\" value=\"123 45 6789\" />\n          \u003CBaseReadOnlyField label=\"Enail\" value=\"john.dorian@gmail.com\" />\n          \u003CBaseReadOnlyField label=\"Address\">\n            \u003CBaseFormattedAddress\n              country=\"NO\"\n              zip-code=\"11 0154\"\n              city=\"Oslo\"\n              street-address=\"Karl Johans gate\"\n            />\n          \u003C/BaseReadOnlyField>\n        \u003C/BaseCardInnerSection>\n        \u003CBaseCardInnerSection>\n          \u003CBaseReadOnlyField\n            label=\"Tags\"\n            :value=\"['Aggresive', 'Diabetic']\"\n            display-as=\"tags\"\n          />\n          \u003CBaseReadOnlyField\n            label=\"General remarks\"\n            value=\"Lorem ipsum dolor sit amet.\"\n          />\n        \u003C/BaseCardInnerSection>\n      \u003C/BaseStackDivided>\n      \u003Ctemplate #footer>\n        \u003Cnord-button size=\"s\">Pin to side\u003C/nord-button>\n        \u003Cnord-button size=\"s\">Open client page\u003C/nord-button>\n      \u003C/template>\n    \u003C/BasePopout>\n\n    \u003CBaseButton aria-controls=\"cards-with-header-2\" aria-haspopup=\"true\">\n      Long content\n    \u003C/BaseButton>\n    \u003CBasePopout id=\"cards-with-header-2\" max-width>\n      \u003Ctemplate #header>\n        \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-s\">\n          \u003Cnord-avatar\n            src=\"https://i.giphy.com/KL5rlX6dGjwJO.webp\"\n            name=\"Garfield\"\n          >\u003C/nord-avatar>\n          \u003Ch2 class=\"n:text-m n:font-active\">Garfield (1357)\u003C/h2>\n        \u003C/div>\n      \u003C/template>\n      \u003CBaseStackDivided>\n        \u003CBaseCardInnerSection>\n          \u003CBaseReadOnlyField\n            label=\"Species, breed\"\n            value=\"Cat (Feline - Domestic), Orange tabby\"\n          />\n          \u003CBaseReadOnlyField label=\"Sex\" value=\"Male, neutered\" />\n          \u003CBaseReadOnlyField label=\"Age\" value=\"5 years 3 months\" />\n          \u003CBaseEditableStack\n            label=\"Edit\"\n            @edit=\"console.log('Edit button clicked')\"\n          >\n            \u003CBaseReadOnlyField label=\"Weight\" value=\"5,24 kg\" />\n          \u003C/BaseEditableStack>\n        \u003C/BaseCardInnerSection>\n        \u003CBaseCardInnerSection>\n          \u003CBaseReadOnlyField\n            label=\"Tags\"\n            :value=\"['Aggresive', 'Diabetic']\"\n            display-as=\"tags\"\n          />\n          \u003CBaseReadOnlyField\n            label=\"Critical remarks\"\n            value=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, ut enim ad minim veniam, quis nostrud Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, ut enim ad minim veniam, quis nostrud exercitation. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, ut enim ad minim veniam, quis nostrud exercitation.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, ut enim ad minim veniam, quis nostrud exercitation. exercitation.\"\n          />\n        \u003C/BaseCardInnerSection>\n      \u003C/BaseStackDivided>\n      \u003Ctemplate #footer>\n        \u003Cnord-button size=\"s\">Pin to side\u003C/nord-button>\n        \u003Cnord-button size=\"s\">Open client page\u003C/nord-button>\n      \u003C/template>\n    \u003C/BasePopout>\n\n    \u003CBaseButton aria-controls=\"pin-to-side\" aria-haspopup=\"true\">\n      Pin to side\n    \u003C/BaseButton>\n    \u003CBasePopout id=\"pin-to-side\" heading=\"Consultation 2468\">\n      \u003CBaseStackDivided>\n        \u003CBaseCardInnerSection>\n          \u003CBaseReadOnlyField label=\"Label 1\" value=\"Lorem ipsum\" />\n          \u003CBaseReadOnlyField label=\"Label 2\" value=\"Nostrud exercitation\" />\n        \u003C/BaseCardInnerSection>\n      \u003C/BaseStackDivided>\n      \u003Ctemplate #footer>\n        \u003Cnord-button size=\"s\">Pin to side\u003C/nord-button>\n      \u003C/template>\n    \u003C/BasePopout>\n\n    \u003CBaseButton aria-controls=\"go-to-page\" aria-haspopup=\"true\">\n      Go to page\n    \u003C/BaseButton>\n    \u003CBasePopout id=\"go-to-page\" expand heading=\"Consultation 2468\">\n      \u003CBaseStackDivided>\n        \u003CBaseCardInnerSection>\n          \u003CBaseReadOnlyField\n            label=\"Reason type\"\n            value=\"Lorem ipsum dolor\"\n            display-as=\"tags\"\n          />\n          \u003CBaseReadOnlyField\n            label=\"Reason\"\n            value=\"Excepteur sint occaecat cupidatat\"\n          />\n        \u003C/BaseCardInnerSection>\n        \u003CBaseCardInnerSection>\n          \u003CBaseReadOnlyField label=\"Veterinarian\" value=\"Elliot Reid\" />\n          \u003CBaseReadOnlyField\n            label=\"Department\"\n            value=\"Sunt culpa - Qui officia\"\n          />\n        \u003C/BaseCardInnerSection>\n      \u003C/BaseStackDivided>\n      \u003Ctemplate #footer>\n        \u003Cnord-button size=\"s\">Open consultation\u003C/nord-button>\n      \u003C/template>\n    \u003C/BasePopout>\n\n    \u003CBaseButton aria-controls=\"pin-go-to-page\" aria-haspopup=\"true\">\n      Pin + Go to page\n    \u003C/BaseButton>\n    \u003CBasePopout id=\"pin-go-to-page\" expand>\n      \u003Ctemplate #header>\n        \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-s\">\n          \u003Cnord-avatar>JD\u003C/nord-avatar>\n          \u003Ch2 class=\"n:text-m n:font-active\">John Dorian (2468)\u003C/h2>\n        \u003C/div>\n      \u003C/template>\n      \u003CBaseStackDivided>\n        \u003CBaseCardInnerSection>\n          \u003CBaseReadOnlyField label=\"Reason type\" value=\"Lorem ipsum\" />\n          \u003CBaseReadOnlyField\n            label=\"Reason\"\n            value=\"Excepteur sint occaecat cupidatat\"\n          />\n        \u003C/BaseCardInnerSection>\n        \u003CBaseCardInnerSection>\n          \u003CBaseReadOnlyField\n            label=\"Tags\"\n            value=\"English only\"\n            display-as=\"tags\"\n          />\n          \u003CBaseReadOnlyField\n            label=\"General remarks\"\n            value=\"Lorem ipsum dolor sit amet.\"\n          />\n        \u003C/BaseCardInnerSection>\n      \u003C/BaseStackDivided>\n      \u003Ctemplate #footer>\n        \u003Cnord-button size=\"s\">Pin to side\u003C/nord-button>\n        \u003Cnord-button size=\"s\">Open client page\u003C/nord-button>\n      \u003C/template>\n    \u003C/BasePopout>\n  \u003C/div>\n\u003C/template>\n",{"name":2805,"displayName":2806,"url":2807,"code":2808},"with-heading-prop","With heading prop","/main/#/922/product-patterns/usage-examples/popup/with-heading-prop","\u003Cscript setup lang=\"ts\">\nimport BaseButton from '@/components/base/Button.vue'\nimport BasePopout from '@/components/base/popout/Popout.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003CBaseButton aria-controls=\"popout\" aria-haspopup=\"true\">\n      Toggle popout\n    \u003C/BaseButton>\n\n    \u003CBasePopout id=\"popout\" heading=\"The heading\">\n      Popout with heading and content\n    \u003C/BasePopout>\n  \u003C/div>\n\u003C/template>\n",{"name":2810,"displayName":2811,"url":2812,"code":2813},"with-slots","With slots","/main/#/922/product-patterns/usage-examples/popup/with-slots","\u003Cscript setup lang=\"ts\">\nimport BaseButton from '@/components/base/Button.vue'\nimport BasePopout from '@/components/base/popout/Popout.vue'\n\ndefinePageMeta({ layout: 'product-patterns-usage-example' })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003CBaseButton aria-controls=\"popout\" aria-haspopup=\"true\">\n      Toggle popout\n    \u003C/BaseButton>\n\n    \u003CBasePopout id=\"popout\">\n      \u003Ctemplate #header>The header\u003C/template>\n\n      \u003Ctemplate #header-end>\n        \u003Cnord-button size=\"s\" square>\n          \u003Cnord-icon name=\"interface-edit\">\u003C/nord-icon>\n        \u003C/nord-button>\n        \u003Cnord-button size=\"s\" square>\n          \u003Cnord-icon name=\"interface-delete\">\u003C/nord-icon>\n        \u003C/nord-button>\n      \u003C/template>\n\n      This text is intentionally long so we can see how it wraps and the popout\n      doesn't grow larger than the \u003Cb>max-inline-size\u003C/b> value.\n\n      \u003Ctemplate #footer>\n        \u003CBaseButton size=\"s\">Close\u003C/BaseButton>\n      \u003C/template>\n    \u003C/BasePopout>\n  \u003C/div>\n\u003C/template>\n",{"name":2815,"displayName":2816,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2817},"pcnf-result-range-visualizer","Result Range Visualizer",[2818],{"name":2154,"displayName":2155,"url":2819,"code":2820},"/main/#/922/product-patterns/usage-examples/result-range-visualizer/basic","\u003Cscript setup lang=\"ts\">\nimport { isNil as _isNil } from 'lodash-es'\nimport BaseResultRangeVisualizer from '@/components/base/ResultRangeVisualizer.vue'\n\nconst interactiveLow = ref(0)\nconst interactiveHigh = ref(10)\nconst interactiveValue = ref(5)\n\nconst rangeDisplay = computed(() => {\n  const low = interactiveLow.value\n  const high = interactiveHigh.value\n\n  const isLowEmpty = _isNil(low) || isNaN(low)\n  const isHighEmpty = _isNil(high) || isNaN(high)\n\n  if (isLowEmpty && isHighEmpty) {\n    return 'No range'\n  }\n  if (isLowEmpty) {\n    return `Below ${high}`\n  }\n  if (isHighEmpty) {\n    return `Above ${low}`\n  }\n  return `${low} - ${high}`\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n    \u003Ch3>Interactive Example\u003C/h3>\n    \u003Cdiv\n      class=\"n:flex n:flex-col n:flex-wrap n:gap-m n:rounded-default n:border n:p-m\"\n    >\n      \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n        \u003CBaseResultRangeVisualizer\n          :low=\"!isNaN(interactiveLow) ? interactiveLow : undefined\"\n          :high=\"!isNaN(interactiveHigh) ? interactiveHigh : undefined\"\n          :value=\"interactiveValue\"\n        />\n        \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n          \u003Cdiv>Range: {{ rangeDisplay }}\u003C/div>\n          \u003Cdiv>Value: {{ interactiveValue }}\u003C/div>\n        \u003C/div>\n      \u003C/div>\n      \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n        \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n          \u003Clabel for=\"low-input\">Low:\u003C/label>\n          \u003Cinput\n            id=\"low-input\"\n            v-model.number=\"interactiveLow\"\n            type=\"number\"\n            min=\"0\"\n            class=\"n:input\"\n            step=\"0.1\"\n            placeholder=\"Leave empty for 'Below'\"\n          />\n        \u003C/div>\n        \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n          \u003Clabel for=\"high-input\">High:\u003C/label>\n          \u003Cinput\n            id=\"high-input\"\n            v-model.number=\"interactiveHigh\"\n            type=\"number\"\n            min=\"0\"\n            class=\"n:input\"\n            step=\"0.1\"\n            placeholder=\"Leave empty for 'Above'\"\n          />\n        \u003C/div>\n        \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-s\">\n          \u003Clabel for=\"value-input\">Value:\u003C/label>\n          \u003Cinput\n            id=\"value-input\"\n            v-model.number=\"interactiveValue\"\n            type=\"number\"\n            min=\"0\"\n            class=\"n:input\"\n            step=\"0.1\"\n          />\n        \u003C/div>\n      \u003C/div>\n    \u003C/div>\n\n    \u003Ch3>Safe Zone Examples\u003C/h3>\n    \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n      \u003CBaseResultRangeVisualizer :low=\"5\" :high=\"15\" :value=\"10\" />\n      \u003Cdiv>\n        \u003Cdiv>Range: 5 - 15\u003C/div>\n        \u003Cdiv>Value: 10 (in the middle)\u003C/div>\n      \u003C/div>\n    \u003C/div>\n    \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n      \u003CBaseResultRangeVisualizer :low=\"5.5\" :high=\"8.5\" :value=\"6.2\" />\n      \u003Cdiv>\n        \u003Cdiv>Range: 5.5 - 8.5\u003C/div>\n        \u003Cdiv>Value: 6.2\u003C/div>\n      \u003C/div>\n    \u003C/div>\n    \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n      \u003CBaseResultRangeVisualizer :low=\"6\" :high=\"17\" :value=\"17\" />\n      \u003Cdiv>\n        \u003Cdiv>Range: 6 - 17\u003C/div>\n        \u003Cdiv>Value: 17 (on the edge high)\u003C/div>\n      \u003C/div>\n    \u003C/div>\n    \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n      \u003CBaseResultRangeVisualizer :low=\"10\" :high=\"20\" :value=\"10\" />\n      \u003Cdiv>\n        \u003Cdiv>Range: 10 - 20\u003C/div>\n        \u003Cdiv>Value: 10 (on the edge low)\u003C/div>\n      \u003C/div>\n    \u003C/div>\n    \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n      \u003CBaseResultRangeVisualizer :low=\"8\" :high=\"8\" :value=\"8\" />\n      \u003Cdiv>\n        \u003Cdiv>Range: 8 - 8\u003C/div>\n        \u003Cdiv>Value: 8 (exactly on both bounds)\u003C/div>\n      \u003C/div>\n    \u003C/div>\n\n    \u003Ch3>Danger Zone Examples\u003C/h3>\n    \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n      \u003CBaseResultRangeVisualizer :low=\"37\" :high=\"55\" :value=\"23\" />\n      \u003Cdiv>\n        \u003Cdiv>Range: 37 - 55\u003C/div>\n        \u003Cdiv>Value: 23 (below low)\u003C/div>\n      \u003C/div>\n    \u003C/div>\n    \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n      \u003CBaseResultRangeVisualizer :low=\"37\" :high=\"55\" :value=\"62\" />\n      \u003Cdiv>\n        \u003Cdiv>Range: 37 - 55\u003C/div>\n        \u003Cdiv>Value: 62 (above high)\u003C/div>\n      \u003C/div>\n    \u003C/div>\n    \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n      \u003CBaseResultRangeVisualizer :low=\"20\" :high=\"30\" :value=\"5\" />\n      \u003Cdiv>\n        \u003Cdiv>Range: 20 - 30\u003C/div>\n        \u003Cdiv>Value: 5 (far below low)\u003C/div>\n      \u003C/div>\n    \u003C/div>\n    \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n      \u003CBaseResultRangeVisualizer :low=\"8\" :high=\"8\" :value=\"12\" />\n      \u003Cdiv>\n        \u003Cdiv>Range: 8 - 8\u003C/div>\n        \u003Cdiv>Value: 12 (above high)\u003C/div>\n      \u003C/div>\n    \u003C/div>\n\n    \u003Ch3>Single Bound Examples\u003C/h3>\n    \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n      \u003CBaseResultRangeVisualizer :low=\"4\" :value=\"18\" />\n      \u003Cdiv>\n        \u003Cdiv>Range: above 4\u003C/div>\n        \u003Cdiv>Value: 18 (normal - above low)\u003C/div>\n      \u003C/div>\n    \u003C/div>\n    \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n      \u003CBaseResultRangeVisualizer :low=\"4\" :value=\"2\" />\n      \u003Cdiv>\n        \u003Cdiv>Range: above 4\u003C/div>\n        \u003Cdiv>Value: 2 (below low)\u003C/div>\n      \u003C/div>\n    \u003C/div>\n    \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n      \u003CBaseResultRangeVisualizer :high=\"20\" :value=\"7\" />\n      \u003Cdiv>\n        \u003Cdiv>Range: below 20\u003C/div>\n        \u003Cdiv>Value: 7 (normal - below high)\u003C/div>\n      \u003C/div>\n    \u003C/div>\n    \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n      \u003CBaseResultRangeVisualizer :high=\"20\" :value=\"25\" />\n      \u003Cdiv>\n        \u003Cdiv>Range: below 20\u003C/div>\n        \u003Cdiv>Value: 25 (above high)\u003C/div>\n      \u003C/div>\n    \u003C/div>\n    \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n      \u003CBaseResultRangeVisualizer :low=\"3.5\" :value=\"7.2\" />\n      \u003Cdiv>\n        \u003Cdiv>Range: above 3.5\u003C/div>\n        \u003Cdiv>Value: 7.2 (normal - above low)\u003C/div>\n      \u003C/div>\n    \u003C/div>\n    \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n      \u003CBaseResultRangeVisualizer :low=\"3.5\" :value=\"2.1\" />\n      \u003Cdiv>\n        \u003Cdiv>Range: above 3.5\u003C/div>\n        \u003Cdiv>Value: 2.1 (below low)\u003C/div>\n      \u003C/div>\n    \u003C/div>\n    \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n      \u003CBaseResultRangeVisualizer :high=\"15.8\" :value=\"12.3\" />\n      \u003Cdiv>\n        \u003Cdiv>Range: below 15.8\u003C/div>\n        \u003Cdiv>Value: 12.3 (normal - below high)\u003C/div>\n      \u003C/div>\n    \u003C/div>\n    \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n      \u003CBaseResultRangeVisualizer :high=\"15.8\" :value=\"18.7\" />\n      \u003Cdiv>\n        \u003Cdiv>Range: below 15.8\u003C/div>\n        \u003Cdiv>Value: 18.7 (above high)\u003C/div>\n      \u003C/div>\n    \u003C/div>\n    \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n      \u003CBaseResultRangeVisualizer :low=\"0.5\" :value=\"0.5\" />\n      \u003Cdiv>\n        \u003Cdiv>Range: above 0.5\u003C/div>\n        \u003Cdiv>Value: 0.5 (exactly on the lower bound)\u003C/div>\n      \u003C/div>\n    \u003C/div>\n    \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n      \u003CBaseResultRangeVisualizer :high=\"100\" :value=\"100\" />\n      \u003Cdiv>\n        \u003Cdiv>Range: below 100\u003C/div>\n        \u003Cdiv>Value: 100 (exactly on the upper bound)\u003C/div>\n      \u003C/div>\n    \u003C/div>\n\n    \u003Ch3>Zero Lower Bound Examples\u003C/h3>\n    \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n      \u003CBaseResultRangeVisualizer :low=\"0\" :high=\"10\" :value=\"5\" />\n      \u003Cdiv>\n        \u003Cdiv>Range: 0 - 10\u003C/div>\n        \u003Cdiv>Value: 5 (normal range with low=0)\u003C/div>\n      \u003C/div>\n    \u003C/div>\n    \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n      \u003CBaseResultRangeVisualizer :low=\"0\" :high=\"10\" :value=\"1\" />\n      \u003Cdiv>\n        \u003Cdiv>Range: 0 - 10\u003C/div>\n        \u003Cdiv>Value: 1 (normal - above lower bound of 0)\u003C/div>\n      \u003C/div>\n    \u003C/div>\n    \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n      \u003CBaseResultRangeVisualizer :low=\"0\" :high=\"10\" :value=\"3\" />\n      \u003Cdiv>\n        \u003Cdiv>Range: 0 - 10\u003C/div>\n        \u003Cdiv>Value: 3 (normal - above lower bound of 0)\u003C/div>\n      \u003C/div>\n    \u003C/div>\n    \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n      \u003CBaseResultRangeVisualizer :low=\"0\" :high=\"10\" :value=\"7\" />\n      \u003Cdiv>\n        \u003Cdiv>Range: 0 - 10\u003C/div>\n        \u003Cdiv>Value: 7 (normal - above lower bound of 0)\u003C/div>\n      \u003C/div>\n    \u003C/div>\n    \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n      \u003CBaseResultRangeVisualizer :low=\"0\" :high=\"10\" :value=\"13\" />\n      \u003Cdiv>\n        \u003Cdiv>Range: 0 - 10\u003C/div>\n        \u003Cdiv>Value: 13 (above high)\u003C/div>\n      \u003C/div>\n    \u003C/div>\n    \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n      \u003CBaseResultRangeVisualizer :low=\"0\" :high=\"10\" :value=\"50\" />\n      \u003Cdiv>\n        \u003Cdiv>Range: 0 - 10\u003C/div>\n        \u003Cdiv>Value: 50 (far above high)\u003C/div>\n      \u003C/div>\n    \u003C/div>\n    \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n      \u003CBaseResultRangeVisualizer :low=\"0\" :value=\"3\" />\n      \u003Cdiv>\n        \u003Cdiv>Range: above 0\u003C/div>\n        \u003Cdiv>Value: 3 (normal - above lower bound of 0)\u003C/div>\n      \u003C/div>\n    \u003C/div>\n  \u003C/div>\n\u003C/template>\n",{"name":2822,"displayName":2823,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2824},"pcnf-rich-text-editor","Rich Text Editor",[2825,2828,2833,2838,2843,2848,2851,2856,2859,2862,2867],{"name":2154,"displayName":2155,"url":2826,"code":2827},"/main/#/922/product-patterns/usage-examples/rich-text-editor/basic","\u003Cscript lang=\"ts\" setup>\nimport InputRichTextEditor from '@/components/input/RichTextEditor.vue'\nconst value = ref(\n  `\u003Ch1>Heading 1\u003C/h1>\u003Ch2>Heading 2\u003C/h2>\u003Ch3>Heading 3\u003C/h3>\u003Cp>Paragraph 1\u003C/p>\u003Cp>Paragraph 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.\u003C/p>\u003Cul>\u003Cli>\u003Cp>Ordered 1\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ordered 2\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ordered 3\u003C/p>\u003C/li>\u003C/ul>\u003Cp>Paragraph 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.\u003C/p>\u003Cblockquote>\u003Cp>Grown-ups never understand anything by themselves, and it is tiresome for children to be always and forever explaining things to them.\u003C/p>\u003C/blockquote>\u003Col>\u003Cli>\u003Cp>Point one - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Point two\u003C/p>\u003C/li>\u003Cli>\u003Cp>Point three\u003C/p>\u003C/li>\u003C/ol>\u003Cp>Below is an example of a relation having three named attributes: 'ID' from the domain of integers, and 'Name' and 'Address' from the domain of strings:\u003C/p>\u003Ctable>\u003Ctr>\u003Cth>ID\u003C/th>\u003Cth>Name\u003C/th>\u003Cth>City\u003C/th>\u003Cth>Country\u003C/th>\u003Cth>Age\u003C/th>\u003Cth>Occupation\u003C/th>\u003Cth>Favorite Food\u003C/th>\u003Cth>Hobby\u003C/th>\u003Cth>Email\u003C/th>\u003Cth>Status\u003C/th>\u003C/tr>\u003Ctr>\u003Ctd>102\u003C/td>\u003Ctd>Yonezawa Akinori\u003C/td>\u003Ctd>Naha\u003C/td>\u003Ctd>Japan\u003C/td>\u003Ctd>29\u003C/td>\u003Ctd>Designer\u003C/td>\u003Ctd>Sushi\u003C/td>\u003Ctd>Painting\u003C/td>\u003Ctd>yonezawa@email.jp\u003C/td>\u003Ctd>Active\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>202\u003C/td>\u003Ctd>Nilay Patel\u003C/td>\u003Ctd>Sendai\u003C/td>\u003Ctd>Japan\u003C/td>\u003Ctd>34\u003C/td>\u003Ctd>Engineer\u003C/td>\u003Ctd>Pizza\u003C/td>\u003Ctd>Cycling\u003C/td>\u003Ctd>nilay@email.jp\u003C/td>\u003Ctd>On Leave\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>104\u003C/td>\u003Ctd>Murata Makoto\u003C/td>\u003Ctd>Kumamoto\u003C/td>\u003Ctd>Japan\u003C/td>\u003Ctd>27\u003C/td>\u003Ctd>Teacher\u003C/td>\u003Ctd>Paella\u003C/td>\u003Ctd>Reading\u003C/td>\u003Ctd>murata@email.jp\u003C/td>\u003Ctd>Active\u003C/td>\u003C/tr>\u003C/table>\u003Cp>A predicate for \u003Cu>this\u003C/u> relation, using the attribute names to denote free variables, might be \"Employee number ID is known as Name and lives at Address\". Examination of the relation tells us that there are just four tuples for which the predicate holds true. So, for example, employee 102 is known only by that name, Yonezawa Akinori, and does not live anywhere else but in Naha, Okinawa. Also, apart from the four employees shown, there is no other employee who has both a name and an address.\u003C/p>`,\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputRichTextEditor v-model=\"value\" label=\"Label\" />\n\u003C/template>\n",{"name":2829,"displayName":2830,"url":2831,"code":2832},"min-size-for-resizable","Min size for resizable","/main/#/922/product-patterns/usage-examples/rich-text-editor/min-size-for-resizable","\u003Cscript lang=\"ts\" setup>\nimport InputRichTextEditor from '@/components/input/RichTextEditor.vue'\nconst value = ref(\n  `\u003Ch1>Heading 1\u003C/h1>\u003Ch2>Heading 2\u003C/h2>\u003Ch3>Heading 3\u003C/h3>\u003Cp>Paragraph 1\u003C/p>\u003Cp>Paragraph 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.\u003C/p>\u003Cul>\u003Cli>\u003Cp>Ordered 1\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ordered 2\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ordered 3\u003C/p>\u003C/li>\u003C/ul>\u003Cp>Paragraph 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.\u003C/p>`,\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputRichTextEditor v-model=\"value\" label=\"Label\" min-size=\"m\" size=\"l\" />\n\u003C/template>\n",{"name":2834,"displayName":2835,"url":2836,"code":2837},"min-size-m","Min size m","/main/#/922/product-patterns/usage-examples/rich-text-editor/min-size-m","\u003Cscript lang=\"ts\" setup>\nimport InputRichTextEditor from '@/components/input/RichTextEditor.vue'\nconst value = ref(\n  `\u003Ch1>Heading 1\u003C/h1>\u003Ch2>Heading 2\u003C/h2>\u003Ch3>Heading 3\u003C/h3>\u003Cp>Paragraph 1\u003C/p>\u003Cp>Paragraph 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.\u003C/p>\u003Cul>\u003Cli>\u003Cp>Ordered 1\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ordered 2\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ordered 3\u003C/p>\u003C/li>\u003C/ul>\u003Cp>Paragraph 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.\u003C/p>`,\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputRichTextEditor v-model=\"value\" label=\"Label\" min-size=\"m\" />\n\u003C/template>\n",{"name":2839,"displayName":2840,"url":2841,"code":2842},"optional","Optional","/main/#/922/product-patterns/usage-examples/rich-text-editor/optional","\u003Cscript lang=\"ts\" setup>\nimport InputRichTextEditor from '@/components/input/RichTextEditor.vue'\nconst value = ref('')\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputRichTextEditor v-model=\"value\" label=\"Label\" :required=\"false\" />\n\u003C/template>\n",{"name":2844,"displayName":2845,"url":2846,"code":2847},"size-m","Size m","/main/#/922/product-patterns/usage-examples/rich-text-editor/size-m","\u003Cscript lang=\"ts\" setup>\nimport InputRichTextEditor from '@/components/input/RichTextEditor.vue'\nconst value = ref(\n  `\u003Ch1>Heading 1\u003C/h1>\u003Ch2>Heading 2\u003C/h2>\u003Ch3>Heading 3\u003C/h3>\u003Cp>Paragraph 1\u003C/p>\u003Cp>Paragraph 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.\u003C/p>\u003Cul>\u003Cli>\u003Cp>Ordered 1\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ordered 2\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ordered 3\u003C/p>\u003C/li>\u003C/ul>\u003Cp>Paragraph 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.\u003C/p>`,\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputRichTextEditor v-model=\"value\" label=\"Label\" size=\"m\" />\n\u003C/template>\n",{"name":2357,"displayName":2358,"url":2849,"code":2850},"/main/#/922/product-patterns/usage-examples/rich-text-editor/with-a-hint","\u003Cscript lang=\"ts\" setup>\nimport InputRichTextEditor from '@/components/input/RichTextEditor.vue'\n\nconst value = ref('')\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputRichTextEditor\n    v-model=\"value\"\n    label=\"Label\"\n    hint=\"Hint is an accessible way to provide additional information that might help the user\"\n  />\n\u003C/template>\n",{"name":2852,"displayName":2853,"url":2854,"code":2855},"with-counter","With counter","/main/#/922/product-patterns/usage-examples/rich-text-editor/with-counter","\u003Cscript lang=\"ts\" setup>\nimport InputRichTextEditor from '@/components/input/RichTextEditor.vue'\nconst value = ref(\n  `\u003Ch1>Heading 1\u003C/h1>\u003Ch2>Heading 2\u003C/h2>\u003Ch3>Heading 3\u003C/h3>\u003Cp>Paragraph 1\u003C/p>\u003Cp>Paragraph 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.\u003C/p>\u003Cul>\u003Cli>\u003Cp>Ordered 1\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ordered 2\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ordered 3\u003C/p>\u003C/li>\u003C/ul>\u003Cp>Paragraph 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.\u003C/p>\u003Cblockquote>\u003Cp>Grown-ups never understand anything by themselves, and it is tiresome for children to be always and forever explaining things to them.\u003C/p>\u003C/blockquote>\u003Col>\u003Cli>\u003Cp>Point one - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Point two\u003C/p>\u003C/li>\u003Cli>\u003Cp>Point three\u003C/p>\u003C/li>\u003C/ol>\u003Cp>Below is an example of a relation having three named attributes: 'ID' from the domain of integers, and 'Name' and 'Address' from the domain of strings:\u003C/p>\u003Ctable>\u003Ctr>\u003Cth>ID\u003C/th>\u003Cth>Name\u003C/th>\u003Cth>City\u003C/th>\u003Cth>Country\u003C/th>\u003Cth>Age\u003C/th>\u003Cth>Occupation\u003C/th>\u003Cth>Favorite Food\u003C/th>\u003Cth>Hobby\u003C/th>\u003Cth>Email\u003C/th>\u003Cth>Status\u003C/th>\u003C/tr>\u003Ctr>\u003Ctd>102\u003C/td>\u003Ctd>Yonezawa Akinori\u003C/td>\u003Ctd>Naha\u003C/td>\u003Ctd>Japan\u003C/td>\u003Ctd>29\u003C/td>\u003Ctd>Designer\u003C/td>\u003Ctd>Sushi\u003C/td>\u003Ctd>Painting\u003C/td>\u003Ctd>yonezawa@email.jp\u003C/td>\u003Ctd>Active\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>202\u003C/td>\u003Ctd>Nilay Patel\u003C/td>\u003Ctd>Sendai\u003C/td>\u003Ctd>Japan\u003C/td>\u003Ctd>34\u003C/td>\u003Ctd>Engineer\u003C/td>\u003Ctd>Pizza\u003C/td>\u003Ctd>Cycling\u003C/td>\u003Ctd>nilay@email.jp\u003C/td>\u003Ctd>On Leave\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>104\u003C/td>\u003Ctd>Murata Makoto\u003C/td>\u003Ctd>Kumamoto\u003C/td>\u003Ctd>Japan\u003C/td>\u003Ctd>27\u003C/td>\u003Ctd>Teacher\u003C/td>\u003Ctd>Paella\u003C/td>\u003Ctd>Reading\u003C/td>\u003Ctd>murata@email.jp\u003C/td>\u003Ctd>Active\u003C/td>\u003C/tr>\u003C/table>\u003Cp>A predicate for \u003Cu>this\u003C/u> relation, using the attribute names to denote free variables, might be \"Employee number ID is known as Name and lives at Address\". Examination of the relation tells us that there are just four tuples for which the predicate holds true. So, for example, employee 102 is known only by that name, Yonezawa Akinori, and does not live anywhere else but in Naha, Okinawa. Also, apart from the four employees shown, there is no other employee who has both a name and an address.\u003C/p>`,\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputRichTextEditor v-model=\"value\" label=\"Label\" :character-limit=\"2000\" />\n\u003C/template>\n",{"name":2372,"displayName":2373,"url":2857,"code":2858},"/main/#/922/product-patterns/usage-examples/rich-text-editor/with-error","\u003Cscript lang=\"ts\" setup>\nimport InputRichTextEditor from '@/components/input/RichTextEditor.vue'\n\nconst value = ref('')\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputRichTextEditor\n    v-model=\"value\"\n    label=\"Label\"\n    error=\"This is an error message\"\n  />\n\u003C/template>\n",{"name":2810,"displayName":2811,"url":2860,"code":2861},"/main/#/922/product-patterns/usage-examples/rich-text-editor/with-slots","\u003Cscript lang=\"ts\" setup>\nimport BaseAutoSave from '@/components/base/AutoSave.vue'\nimport BaseButton from '@/components/base/Button.vue'\nimport InputComboboxMultiple from '@/components/input/ComboboxMultiple.vue'\nimport InputRichTextEditor from '@/components/input/RichTextEditor.vue'\n\nconst value = ref(\n  `\u003Ch1>Heading 1\u003C/h1>\u003Ch2>Heading 2\u003C/h2>\u003Ch3>Heading 3\u003C/h3>\u003Cp>Paragraph 1\u003C/p>\u003Cp>Paragraph 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.\u003C/p>\u003Cul>\u003Cli>\u003Cp>Ordered 1\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ordered 2\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ordered 3\u003C/p>\u003C/li>\u003C/ul>\u003Cp>Paragraph 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.\u003C/p>\u003Cblockquote>\u003Cp>Grown-ups never understand anything by themselves, and it is tiresome for children to be always and forever explaining things to them.\u003C/p>\u003C/blockquote>\u003Col>\u003Cli>\u003Cp>Point one - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Point two\u003C/p>\u003C/li>\u003Cli>\u003Cp>Point three\u003C/p>\u003C/li>\u003C/ol>\u003Cp>Below is an example of a relation having three named attributes: 'ID' from the domain of integers, and 'Name' and 'Address' from the domain of strings:\u003C/p>\u003Ctable>\u003Ctr>\u003Cth>ID\u003C/th>\u003Cth>Name\u003C/th>\u003Cth>City\u003C/th>\u003Cth>Country\u003C/th>\u003Cth>Age\u003C/th>\u003Cth>Occupation\u003C/th>\u003Cth>Favorite Food\u003C/th>\u003Cth>Hobby\u003C/th>\u003Cth>Email\u003C/th>\u003Cth>Status\u003C/th>\u003C/tr>\u003Ctr>\u003Ctd>102\u003C/td>\u003Ctd>Yonezawa Akinori\u003C/td>\u003Ctd>Naha\u003C/td>\u003Ctd>Japan\u003C/td>\u003Ctd>29\u003C/td>\u003Ctd>Designer\u003C/td>\u003Ctd>Sushi\u003C/td>\u003Ctd>Painting\u003C/td>\u003Ctd>yonezawa@email.jp\u003C/td>\u003Ctd>Active\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>202\u003C/td>\u003Ctd>Nilay Patel\u003C/td>\u003Ctd>Sendai\u003C/td>\u003Ctd>Japan\u003C/td>\u003Ctd>34\u003C/td>\u003Ctd>Engineer\u003C/td>\u003Ctd>Pizza\u003C/td>\u003Ctd>Cycling\u003C/td>\u003Ctd>nilay@email.jp\u003C/td>\u003Ctd>On Leave\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>104\u003C/td>\u003Ctd>Murata Makoto\u003C/td>\u003Ctd>Kumamoto\u003C/td>\u003Ctd>Japan\u003C/td>\u003Ctd>27\u003C/td>\u003Ctd>Teacher\u003C/td>\u003Ctd>Paella\u003C/td>\u003Ctd>Reading\u003C/td>\u003Ctd>murata@email.jp\u003C/td>\u003Ctd>Active\u003C/td>\u003C/tr>\u003C/table>\u003Cp>A predicate for \u003Cu>this\u003C/u> relation, using the attribute names to denote free variables, might be \"Employee number ID is known as Name and lives at Address\". Examination of the relation tells us that there are just four tuples for which the predicate holds true. So, for example, employee 102 is known only by that name, Yonezawa Akinori, and does not live anywhere else but in Naha, Okinawa. Also, apart from the four employees shown, there is no other employee who has both a name and an address.\u003C/p>`,\n)\nconst comboboxValue = ref(['history'])\nconst comboboxOptions = ref([\n  { value: 'history', label: 'History' },\n  { value: 'batman', label: 'Batman' },\n  { value: 'robin', label: 'Robin' },\n  { value: 'joker', label: 'Joker' },\n])\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputRichTextEditor\n    v-model=\"value\"\n    label=\"Example label\"\n    hint=\"Example hint\"\n    min-size=\"s\"\n  >\n    \u003Ctemplate #header>\n      \u003Cdiv class=\"n:pbe-xs\">\n        \u003Cdiv class=\"n:mbe-s n:text-l n:font-heading n:text-weak\">\n          Edit clinical note\n        \u003C/div>\n        \u003CInputComboboxMultiple\n          v-model=\"comboboxValue\"\n          class=\"n:mbe-xs\"\n          name=\"rich-text-editor-select\"\n          label=\"Clinical note type\"\n          :options=\"comboboxOptions\"\n          hide-label\n          expand\n          create-option\n        />\n      \u003C/div>\n    \u003C/template>\n    \u003Ctemplate #additional-controls>\n      \u003CBaseButton size=\"s\" variant=\"plain\">\n        \u003Cnord-icon slot=\"start\" name=\"interface-add\">\u003C/nord-icon>\n        Add template\n      \u003C/BaseButton>\n      \u003Cnord-dropdown>\n        \u003Cnord-button slot=\"toggle\" variant=\"plain\" size=\"s\">\n          Today, 16:15\n        \u003C/nord-button>\n        \u003Cnord-dropdown-item>View profile\u003C/nord-dropdown-item>\n        \u003Cnord-dropdown-item>Settings\u003C/nord-dropdown-item>\n        \u003Cnord-dropdown-item>Show keyboard shortcuts\u003C/nord-dropdown-item>\n      \u003C/nord-dropdown>\n      \u003CBaseAutoSave />\n    \u003C/template>\n    \u003Ctemplate #footer>\n      \u003Cnord-button-group\n        variant=\"spaced\"\n        class=\"n:flex n:flex-row n:flex-wrap n:items-center n:justify-end n:gap-m\"\n      >\n        \u003Cnord-button>Discard note\u003C/nord-button>\n        \u003Cnord-button variant=\"primary\">Add note\u003C/nord-button>\n      \u003C/nord-button-group>\n    \u003C/template>\n  \u003C/InputRichTextEditor>\n\u003C/template>\n",{"name":2863,"displayName":2864,"url":2865,"code":2866},"with-slots-complex","With slots complex","/main/#/922/product-patterns/usage-examples/rich-text-editor/with-slots-complex","\u003Cscript lang=\"ts\" setup>\nimport BaseAutoSave from '@/components/base/AutoSave.vue'\nimport BaseButton from '@/components/base/Button.vue'\nimport InputComboboxMultiple from '@/components/input/ComboboxMultiple.vue'\nimport InputRichTextEditor from '@/components/input/RichTextEditor.vue'\n\nconst value = ref(\n  `\u003Ch1>Heading 1\u003C/h1>\u003Ch2>Heading 2\u003C/h2>\u003Ch3>Heading 3\u003C/h3>\u003Cp>Paragraph 1\u003C/p>\u003Cp>Paragraph 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.\u003C/p>\u003Cul>\u003Cli>\u003Cp>Ordered 1\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ordered 2\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ordered 3\u003C/p>\u003C/li>\u003C/ul>\u003Cp>Paragraph 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.\u003C/p>\u003Cblockquote>\u003Cp>Grown-ups never understand anything by themselves, and it is tiresome for children to be always and forever explaining things to them.\u003C/p>\u003C/blockquote>\u003Col>\u003Cli>\u003Cp>Point one - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Point two\u003C/p>\u003C/li>\u003Cli>\u003Cp>Point three\u003C/p>\u003C/li>\u003C/ol>\u003Cp>Below is an example of a relation having three named attributes: 'ID' from the domain of integers, and 'Name' and 'Address' from the domain of strings:\u003C/p>\u003Ctable>\u003Ctr>\u003Cth>ID\u003C/th>\u003Cth>Name\u003C/th>\u003Cth>City\u003C/th>\u003Cth>Country\u003C/th>\u003Cth>Age\u003C/th>\u003Cth>Occupation\u003C/th>\u003Cth>Favorite Food\u003C/th>\u003Cth>Hobby\u003C/th>\u003Cth>Email\u003C/th>\u003Cth>Status\u003C/th>\u003C/tr>\u003Ctr>\u003Ctd>102\u003C/td>\u003Ctd>Yonezawa Akinori\u003C/td>\u003Ctd>Naha\u003C/td>\u003Ctd>Japan\u003C/td>\u003Ctd>29\u003C/td>\u003Ctd>Designer\u003C/td>\u003Ctd>Sushi\u003C/td>\u003Ctd>Painting\u003C/td>\u003Ctd>yonezawa@email.jp\u003C/td>\u003Ctd>Active\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>202\u003C/td>\u003Ctd>Nilay Patel\u003C/td>\u003Ctd>Sendai\u003C/td>\u003Ctd>Japan\u003C/td>\u003Ctd>34\u003C/td>\u003Ctd>Engineer\u003C/td>\u003Ctd>Pizza\u003C/td>\u003Ctd>Cycling\u003C/td>\u003Ctd>nilay@email.jp\u003C/td>\u003Ctd>On Leave\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>104\u003C/td>\u003Ctd>Murata Makoto\u003C/td>\u003Ctd>Kumamoto\u003C/td>\u003Ctd>Japan\u003C/td>\u003Ctd>27\u003C/td>\u003Ctd>Teacher\u003C/td>\u003Ctd>Paella\u003C/td>\u003Ctd>Reading\u003C/td>\u003Ctd>murata@email.jp\u003C/td>\u003Ctd>Active\u003C/td>\u003C/tr>\u003C/table>\u003Cp>A predicate for \u003Cu>this\u003C/u> relation, using the attribute names to denote free variables, might be \"Employee number ID is known as Name and lives at Address\". Examination of the relation tells us that there are just four tuples for which the predicate holds true. So, for example, employee 102 is known only by that name, Yonezawa Akinori, and does not live anywhere else but in Naha, Okinawa. Also, apart from the four employees shown, there is no other employee who has both a name and an address.\u003C/p>`,\n)\nconst comboboxValue = ref(['history'])\nconst comboboxOptions = ref([\n  { value: 'history', label: 'History' },\n  { value: 'batman', label: 'Batman' },\n  { value: 'robin', label: 'Robin' },\n  { value: 'joker', label: 'Joker' },\n])\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputRichTextEditor\n    v-model=\"value\"\n    label=\"Example label\"\n    hint=\"Example hint\"\n    min-size=\"s\"\n    error=\"This is an error message\"\n    :character-limit=\"2000\"\n  >\n    \u003Ctemplate #header>\n      \u003Cdiv class=\"n:pbe-xs\">\n        \u003Cdiv class=\"n:mbe-s n:text-l n:font-heading n:text-weak\">\n          Edit clinical note\n        \u003C/div>\n        \u003CInputComboboxMultiple\n          v-model=\"comboboxValue\"\n          class=\"n:mbe-xs\"\n          name=\"rich-text-editor-select\"\n          label=\"Clinical note type\"\n          :options=\"comboboxOptions\"\n          hide-label\n          expand\n          create-option\n        />\n      \u003C/div>\n    \u003C/template>\n    \u003Ctemplate #additional-controls>\n      \u003CBaseButton size=\"s\" variant=\"plain\">\n        \u003Cnord-icon slot=\"start\" name=\"interface-add\">\u003C/nord-icon>\n        Add template\n      \u003C/BaseButton>\n      \u003Cnord-dropdown>\n        \u003Cnord-button slot=\"toggle\" variant=\"plain\" size=\"s\">\n          Today, 16:15\n        \u003C/nord-button>\n        \u003Cnord-dropdown-item>View profile\u003C/nord-dropdown-item>\n        \u003Cnord-dropdown-item>Settings\u003C/nord-dropdown-item>\n        \u003Cnord-dropdown-item>Show keyboard shortcuts\u003C/nord-dropdown-item>\n      \u003C/nord-dropdown>\n      \u003CBaseAutoSave />\n    \u003C/template>\n    \u003Ctemplate #footer>\n      \u003Cnord-button-group\n        variant=\"spaced\"\n        class=\"n:flex n:flex-row n:flex-wrap n:items-center n:justify-end n:gap-m\"\n      >\n        \u003Cnord-button>Discard note\u003C/nord-button>\n        \u003Cnord-button variant=\"primary\">Add note\u003C/nord-button>\n      \u003C/nord-button-group>\n    \u003C/template>\n  \u003C/InputRichTextEditor>\n\u003C/template>\n",{"name":2868,"displayName":2869,"url":2870,"code":2871},"without-table","Without table","/main/#/922/product-patterns/usage-examples/rich-text-editor/without-table","\u003Cscript lang=\"ts\" setup>\nimport InputRichTextEditor from '@/components/input/RichTextEditor.vue'\nconst value = ref(\n  `\u003Ch1>Heading 1\u003C/h1>\u003Ch2>Heading 2\u003C/h2>\u003Ch3>Heading 3\u003C/h3>\u003Cp>Paragraph 1\u003C/p>\u003Cp>Paragraph 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.\u003C/p>\u003Cul>\u003Cli>\u003Cp>Ordered 1\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ordered 2\u003C/p>\u003C/li>\u003Cli>\u003Cp>Ordered 3\u003C/p>\u003C/li>\u003C/ul>\u003Cp>Paragraph 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue. Phasellus a vehicula dui. Fusce vel nisi nec leo sodales laoreet. Quisque facilisis orci vel rutrum porttitor. Duis leo elit, pretium fermentum est ac, porta sodales eros. Proin a tristique magna. Sed quis lacus nisl. Vivamus luctus dignissim elit sed vestibulum. Praesent nisl urna, fermentum id justo vel, fringilla imperdiet justo. Duis et tortor massa. Proin nec congue velit. Cras dignissim lacus non convallis efficitur.\u003C/p>\u003Cblockquote>\u003Cp>Grown-ups never understand anything by themselves, and it is tiresome for children to be always and forever explaining things to them.\u003C/p>\u003C/blockquote>\u003Col>\u003Cli>\u003Cp>Point one - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in justo ornare metus luctus congue.\u003C/p>\u003C/li>\u003Cli>\u003Cp>Point two\u003C/p>\u003C/li>\u003Cli>\u003Cp>Point three\u003C/p>\u003C/li>\u003C/ol>`,\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputRichTextEditor v-model=\"value\" label=\"Label\" disable-table />\n\u003C/template>\n",{"name":2873,"displayName":2874,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2875},"pcnf-selection-popout","Selection Popout",[2876,2881,2886],{"name":2877,"displayName":2878,"url":2879,"code":2880},"variants","Variants","/main/#/922/product-patterns/usage-examples/selection-popout/variants","\u003Cscript setup lang=\"ts\">\nimport type { Option } from '@/components/base/popout/Selection.vue'\nimport BasePopoutSelection from '@/components/base/popout/Selection.vue'\n\nconst selectedOptions = ref\u003CRecord\u003Cstring, Option | null>>({\n  default: null,\n  primary: null,\n  danger: null,\n  dashed: null,\n  plain: null,\n})\n\nconst searchModels = ref\u003CRecord\u003Cstring, string>>({\n  default: '',\n  primary: '',\n  danger: '',\n  dashed: '',\n  plain: '',\n})\n\nconst basicOptions: Option[] = [\n  { value: '1', label: 'Apple' },\n  { value: '2', label: 'Banana' },\n  { value: '3', label: 'Cherry' },\n  { value: '4', label: 'Date' },\n  { value: '5', label: 'Elderberry' },\n  { value: '6', label: 'Fig' },\n  { value: '7', label: 'Grape' },\n  { value: '8', label: 'Honeydew' },\n  { value: '9', label: 'Kiwi' },\n  { value: '10', label: 'Lemon' },\n]\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n    \u003Ch3>Default Variant\u003C/h3>\n    \u003CBasePopoutSelection\n      v-model=\"searchModels.default\"\n      label=\"Add Item (Default)\"\n      :options=\"basicOptions\"\n      parent-id=\"variant-default-example\"\n      variant=\"default\"\n      is-searchable\n      @select=\"selectedOptions.default = $event\"\n    />\n    \u003Cdiv v-if=\"selectedOptions.default\" class=\"n:text-s n:text-weaker\">\n      Selected: {{ selectedOptions.default.label }}\n    \u003C/div>\n\n    \u003Ch3>Primary Variant\u003C/h3>\n    \u003CBasePopoutSelection\n      v-model=\"searchModels.primary\"\n      label=\"Add Item (Primary)\"\n      :options=\"basicOptions\"\n      parent-id=\"variant-primary-example\"\n      variant=\"primary\"\n      is-searchable\n      @select=\"selectedOptions.primary = $event\"\n    />\n    \u003Cdiv v-if=\"selectedOptions.primary\" class=\"n:text-s n:text-weaker\">\n      Selected: {{ selectedOptions.primary.label }}\n    \u003C/div>\n\n    \u003Ch3>Danger Variant\u003C/h3>\n    \u003CBasePopoutSelection\n      v-model=\"searchModels.danger\"\n      label=\"Add Item (Danger)\"\n      :options=\"basicOptions\"\n      parent-id=\"variant-danger-example\"\n      variant=\"danger\"\n      is-searchable\n      @select=\"selectedOptions.danger = $event\"\n    />\n    \u003Cdiv v-if=\"selectedOptions.danger\" class=\"n:text-s n:text-weaker\">\n      Selected: {{ selectedOptions.danger.label }}\n    \u003C/div>\n\n    \u003Ch3>Dashed Variant\u003C/h3>\n    \u003CBasePopoutSelection\n      v-model=\"searchModels.dashed\"\n      label=\"Add Item (Dashed)\"\n      :options=\"basicOptions\"\n      parent-id=\"variant-dashed-example\"\n      variant=\"dashed\"\n      is-searchable\n      @select=\"selectedOptions.dashed = $event\"\n    />\n    \u003Cdiv v-if=\"selectedOptions.dashed\" class=\"n:text-s n:text-weaker\">\n      Selected: {{ selectedOptions.dashed.label }}\n    \u003C/div>\n\n    \u003Ch3>Plain Variant\u003C/h3>\n    \u003CBasePopoutSelection\n      v-model=\"searchModels.plain\"\n      label=\"Add Item (Plain)\"\n      :options=\"basicOptions\"\n      parent-id=\"variant-plain-example\"\n      variant=\"plain\"\n      is-searchable\n      @select=\"selectedOptions.plain = $event\"\n    />\n    \u003Cdiv v-if=\"selectedOptions.plain\" class=\"n:text-s n:text-weaker\">\n      Selected: {{ selectedOptions.plain.label }}\n    \u003C/div>\n  \u003C/div>\n\u003C/template>\n",{"name":2882,"displayName":2883,"url":2884,"code":2885},"with-search-keys","With search keys","/main/#/922/product-patterns/usage-examples/selection-popout/with-search-keys","\u003Cscript setup lang=\"ts\">\nimport type { Option } from '@/components/base/popout/Selection.vue'\nimport BasePopoutSelection from '@/components/base/popout/Selection.vue'\n\nconst selectedOption = ref\u003COption | null>(null)\nconst searchModel = ref('')\n\nconst optionsWithExtraData: Option[] = [\n  {\n    value: 'dog-1',\n    label: 'German Shepherd',\n    extraData: {\n      breed: 'German Shepherd',\n      code: 'GSD001',\n      type: 'Large',\n      origin: 'Germany',\n    },\n  },\n  {\n    value: 'dog-2',\n    label: 'Golden Retriever',\n    extraData: {\n      breed: 'Golden Retriever',\n      code: 'GRT002',\n      type: 'Large',\n      origin: 'Scotland',\n    },\n  },\n  {\n    value: 'dog-3',\n    label: 'French Bulldog',\n    extraData: {\n      breed: 'French Bulldog',\n      code: 'FBD003',\n      type: 'Small',\n      origin: 'France',\n    },\n  },\n  {\n    value: 'dog-4',\n    label: 'Labrador Retriever',\n    extraData: {\n      breed: 'Labrador Retriever',\n      code: 'LAB004',\n      type: 'Large',\n      origin: 'Canada',\n    },\n  },\n  {\n    value: 'dog-5',\n    label: 'Beagle',\n    extraData: {\n      breed: 'Beagle',\n      code: 'BGL005',\n      type: 'Medium',\n      origin: 'England',\n    },\n  },\n]\n\nconst handleSelect = (option: Option) => {\n  selectedOption.value = option\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cdiv class=\"n:py-m\">\n      \u003CBasePopoutSelection\n        v-model=\"searchModel\"\n        label=\"Add Dog Breed\"\n        :options=\"optionsWithExtraData\"\n        parent-id=\"search-keys-example\"\n        is-searchable\n        :search-keys=\"['code', 'type']\"\n        @select=\"handleSelect\"\n      >\n        \u003Ctemplate #default=\"{ option, highlightProps }\">\n          \u003Cdiv\n            class=\"n:flex n:flex-row n:flex-wrap n:items-center n:justify-between n:gap-m\"\n          >\n            \u003Cspan v-text-highlight=\"highlightProps\" class=\"option-label\">\n              {{ option.label }}\n            \u003C/span>\n            \u003Cspan\n              v-if=\"option.extraData?.code\"\n              v-text-highlight=\"highlightProps\"\n              class=\"n:text-weaker\"\n            >\n              {{ option.extraData.code }}\n            \u003C/span>\n          \u003C/div>\n          \u003Cdiv class=\"n:text-s n:text-weaker\">\n            \u003Cspan v-text-highlight=\"highlightProps\">\n              {{ option.extraData?.type }}\n            \u003C/span>\n          \u003C/div>\n        \u003C/template>\n      \u003C/BasePopoutSelection>\n    \u003C/div>\n\n    \u003Cdiv v-if=\"selectedOption\" class=\"n:pbs-m\">\n      \u003Cnord-card>\n        \u003Ch3>Selected Option:\u003C/h3>\n        \u003Cp>\u003Cstrong>Value:\u003C/strong> {{ selectedOption.value }}\u003C/p>\n        \u003Cp>\u003Cstrong>Label:\u003C/strong> {{ selectedOption.label }}\u003C/p>\n        \u003Cdiv v-if=\"selectedOption.extraData\">\n          \u003Ch4>Extra Data:\u003C/h4>\n          \u003Cul>\n            \u003Cli v-for=\"(value, key) in selectedOption.extraData\" :key>\n              \u003Cstrong>{{ key }}:\u003C/strong> {{ value }}\n            \u003C/li>\n          \u003C/ul>\n        \u003C/div>\n      \u003C/nord-card>\n    \u003C/div>\n  \u003C/div>\n\u003C/template>\n",{"name":2887,"displayName":2888,"url":2889,"code":2890},"without-search","Without search","/main/#/922/product-patterns/usage-examples/selection-popout/without-search","\u003Cscript setup lang=\"ts\">\nimport type { Option } from '@/components/base/popout/Selection.vue'\nimport BasePopoutSelection from '@/components/base/popout/Selection.vue'\n\nconst selectedOption = ref\u003COption | null>(null)\n\nconst basicOptions: Option[] = [\n  { value: '1', label: 'Option 1' },\n  { value: '2', label: 'Option 2' },\n  { value: '3', label: 'Option 3' },\n  { value: '4', label: 'Option 4' },\n  { value: '5', label: 'Option 5' },\n]\n\nconst handleSelect = (option: Option) => {\n  selectedOption.value = option\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cdiv class=\"n:py-m\">\n      \u003CBasePopoutSelection\n        label=\"Add Item\"\n        :options=\"basicOptions\"\n        parent-id=\"basic-example\"\n        @select=\"handleSelect\"\n      />\n    \u003C/div>\n\n    \u003Cdiv v-if=\"selectedOption\" class=\"n:py-m\">\n      \u003Cnord-card>\n        \u003Ch3>Selected Option:\u003C/h3>\n        \u003Cp>\u003Cstrong>Value:\u003C/strong> {{ selectedOption.value }}\u003C/p>\n        \u003Cp>\u003Cstrong>Label:\u003C/strong> {{ selectedOption.label }}\u003C/p>\n      \u003C/nord-card>\n    \u003C/div>\n  \u003C/div>\n\u003C/template>\n",{"name":2892,"displayName":2893,"description":2894,"usageContent":2895,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2896},"pcnf-tab-menu","Tab Menu","Tab Menu is a navigational menu designed to display a list of links with customizable labels.","\u003Cdiv class=\"n-usage n-usage-do\">\n\u003Ch3>Do\u003C/h3>\n\u003Cul>\n\u003Cli>Use short and easily scannable labels for navigation items.\u003C/li>\n\u003Cli>Use links to navigate between pages or to external destinations.\u003C/li>\n\u003Cli>Ensure link text is descriptive and meaningful on its own.\u003C/li>\n\u003C/ul>\n\u003C/div>\n\u003Cdiv class=\"n-usage n-usage-dont\">\n\u003Ch3>Don't\u003C/h3>\n\u003Cul>\n\u003Cli>Avoid using long labels, truncated text negatively impacts usability.\u003C/li>\n\u003Cli>Don't use links to perform actions like save, add, or edit. Use a button for such actions instead.\u003C/li>\n\u003Cli>Avoid generic phrases like \"read more\" or \"click here\" that lack context and clarity.\u003C/li>\n\u003C/ul>\n\u003C/div>",[2897,2900,2905,2908],{"name":2154,"displayName":2155,"url":2898,"code":2899},"/main/#/922/product-patterns/usage-examples/tab-menu/basic","\u003Cscript setup lang=\"ts\">\nimport BaseTabMenu from '@/components/base/tab-menu/TabMenu.vue'\nimport type { TabMenuItem } from '@/components/base/tab-menu/TabMenu.vue'\n\nconst route = useRoute()\nconst items = computed(\n  () =>\n    [\n      {\n        id: 'overview',\n        label: 'Overview',\n        to: '#',\n        isActive: !route.hash || route.hash === '#',\n      },\n      {\n        id: 'provet-cloud',\n        label: 'Provet',\n        to: '#provet-cloud',\n        isActive: route.hash === '#provet-cloud',\n      },\n      {\n        id: 'nordhealth',\n        label: 'Nord Design System',\n        to: '#nordhealth',\n        target: '_blank',\n      },\n    ] satisfies TabMenuItem[],\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBaseTabMenu :items />\n\u003C/template>\n",{"name":2901,"displayName":2902,"url":2903,"code":2904},"click-events","Click events","/main/#/922/product-patterns/usage-examples/tab-menu/click-events","\u003Cscript setup lang=\"ts\">\nimport BaseTabMenu from '@/components/base/tab-menu/TabMenu.vue'\nimport type { TabMenuItem } from '@/components/base/tab-menu/TabMenu.vue'\n\nconst activeTab = ref('dashboard')\n\nconst handleTabClick = (tabId: string) => {\n  activeTab.value = tabId\n}\n\nconst items = computed(\n  () =>\n    [\n      {\n        id: 'dashboard',\n        label: 'Dashboard',\n        isActive: activeTab.value === 'dashboard',\n        clickHandler: () => handleTabClick('dashboard'),\n      },\n      {\n        id: 'notifications',\n        label: `Notifications`,\n        isActive: activeTab.value === 'notifications',\n        clickHandler: () => handleTabClick('notifications'),\n      },\n      {\n        id: 'settings',\n        label: 'Settings',\n        isActive: activeTab.value === 'settings',\n        clickHandler: () => handleTabClick('settings'),\n      },\n      {\n        id: 'logout',\n        label: 'Logout',\n        isActive: activeTab.value === 'logout',\n        clickHandler: () => handleTabClick('logout'),\n      },\n    ] satisfies TabMenuItem[],\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n    \u003CBaseTabMenu :items />\n\n    \u003Cdiv class=\"n:p-m\">\n      \u003Cp>\u003Cstrong>Active Tab:\u003C/strong> {{ activeTab || 'None' }}\u003C/p>\n      \u003Cp class=\"n:text-weak\">\n        Click on the tabs above to see the click events in action.\n      \u003C/p>\n    \u003C/div>\n  \u003C/div>\n\u003C/template>\n",{"name":2237,"displayName":2238,"url":2906,"code":2907},"/main/#/922/product-patterns/usage-examples/tab-menu/external","\u003Cscript setup lang=\"ts\">\nimport BaseTabMenu from '@/components/base/tab-menu/TabMenu.vue'\nimport type { TabMenuItem } from '@/components/base/tab-menu/TabMenu.vue'\n\nconst items = ref([\n  {\n    id: 'local-page',\n    label: 'Local Page',\n    to: '#',\n  },\n  {\n    id: 'provet-cloud',\n    label: 'Provet (External)',\n    to: 'https://www.provet.cloud/',\n    external: true,\n  },\n  {\n    id: 'nord-design-system',\n    label: 'Nord Design System (External)',\n    to: 'https://nordhealth.design/',\n    external: true,\n  },\n  {\n    id: 'provet-support',\n    label: 'Support Portal (External and Target Blank)',\n    to: 'https://support.provet.cloud/',\n    external: true,\n    target: '_blank',\n  },\n] satisfies TabMenuItem[])\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBaseTabMenu :items />\n\u003C/template>\n",{"name":2909,"displayName":2910,"url":2911,"code":2912},"target","Target","/main/#/922/product-patterns/usage-examples/tab-menu/target","\u003Cscript setup lang=\"ts\">\nimport BaseTabMenu from '@/components/base/tab-menu/TabMenu.vue'\nimport type { TabMenuItem } from '@/components/base/tab-menu/TabMenu.vue'\n\nconst items = ref([\n  {\n    id: 'same-tab',\n    label: 'Same Tab',\n    to: '#',\n  },\n  {\n    id: 'new-tab-provet',\n    label: 'Provet (New Tab)',\n    to: 'https://www.provet.cloud/',\n    external: true,\n    target: '_blank',\n  },\n  {\n    id: 'new-tab-nord',\n    label: 'Nord Design (New Tab)',\n    to: 'https://nordhealth.design/',\n    external: true,\n    target: '_blank',\n  },\n  {\n    id: 'new-tab-docs',\n    label: 'Documentation (New Tab)',\n    to: 'https://docs.provet.cloud/',\n    external: true,\n    target: '_blank',\n  },\n] satisfies TabMenuItem[])\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBaseTabMenu :items />\n\u003C/template>\n",{"name":2914,"displayName":2915,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2916},"pcnf-tags","Tags",[2917,2920,2925,2930,2935,2940],{"name":2154,"displayName":2155,"url":2918,"code":2919},"/main/#/922/product-patterns/usage-examples/tags/basic","\u003Cscript setup lang=\"ts\">\nimport BaseEditableField from '@/components/base/editable/Field.vue'\nimport InputComboboxMultiple from '@/components/input/ComboboxMultiple.vue'\nimport BaseTags from '@/components/base/Tags.vue'\ntype TagsExampleData = {\n  vowels: string[]\n  consonant: string[]\n}\n\nconst alphabet = Array.from({ length: 26 }, (_, i) =>\n  String.fromCharCode(65 + i),\n)\nconst vowels: TagsExampleData['vowels'] = ['A', 'E', 'I', 'O', 'U']\nconst consonant: TagsExampleData['consonant'] = alphabet.filter(\n  (char) => !vowels.includes(char),\n)\n\nconst isEditing = ref\u003Cboolean>(false)\nconst inlineEdit = ref\u003Cboolean>(false)\nconst expand = ref\u003Cboolean>(true)\nconst selectedTags = ref\u003Cstring[]>([])\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n    \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n      \u003Cnord-toggle\n        label=\"Edit mode\"\n        :checked=\"isEditing\"\n        @change=\"isEditing = !isEditing\"\n      />\n\n      \u003Cnord-toggle label=\"Inline-edit\" @change=\"inlineEdit = !inlineEdit\" />\n\n      \u003Cnord-toggle label=\"Expand\" checked @change=\"expand = !expand\" />\n    \u003C/div>\n\n    \u003CBaseEditableField :is-editing>\n      \u003CBaseTags\n        v-model:is-editing=\"isEditing\"\n        v-model:selected-tags=\"selectedTags\"\n        :categories=\"[\n          { label: 'Vowels', tags: vowels },\n          { label: 'Consonants', tags: consonant },\n        ]\"\n      />\n\n      \u003Ctemplate #edit>\n        \u003CInputComboboxMultiple\n          v-model=\"selectedTags\"\n          label=\"Alphabet\"\n          hide-label\n          :inline-edit\n          :expand\n          :options=\"\n            alphabet.map((letter) => ({ label: letter, value: letter }))\n          \"\n        />\n      \u003C/template>\n    \u003C/BaseEditableField>\n  \u003C/div>\n\u003C/template>\n",{"name":2921,"displayName":2922,"url":2923,"code":2924},"async","Async","/main/#/922/product-patterns/usage-examples/tags/async","\u003Cscript setup lang=\"ts\">\nimport { safeMathRandom } from '@/utils/number.js'\nimport BaseEditableField from '@/components/base/editable/Field.vue'\nimport InputComboboxMultiple from '@/components/input/ComboboxMultiple.vue'\nimport BaseTags from '@/components/base/Tags.vue'\ntype TagsExampleData = {\n  vowels: string[]\n  consonant: string[]\n}\n\nconst alphabet = Array.from({ length: 26 }, (_, i) =>\n  String.fromCharCode(65 + i),\n)\n\nconst fetchAlphabet = async (query: string) => {\n  await new Promise((resolve) =>\n    setTimeout(resolve, Math.floor(safeMathRandom() * 500) + 500),\n  )\n\n  if (query) {\n    return alphabet\n      .filter((type) => type.toLowerCase().includes(query.toLowerCase()))\n      .map((letter) => ({\n        label: letter,\n        value: letter,\n      }))\n  }\n\n  return alphabet.map((letter) => ({\n    label: letter,\n    value: letter,\n  }))\n}\n\nconst vowels: TagsExampleData['vowels'] = ['A', 'E', 'I', 'O', 'U']\nconst consonant: TagsExampleData['consonant'] = alphabet.filter(\n  (char) => !vowels.includes(char),\n)\n\nconst isEditing = ref\u003Cboolean>(false)\nconst inlineEdit = ref\u003Cboolean>(false)\nconst expand = ref\u003Cboolean>(true)\nconst selectedTags = ref\u003Cstring[]>([])\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n    \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n      \u003Cnord-toggle\n        label=\"Edit mode\"\n        :checked=\"isEditing\"\n        @change=\"isEditing = !isEditing\"\n      />\n\n      \u003Cnord-toggle label=\"Inline-edit\" @change=\"inlineEdit = !inlineEdit\" />\n\n      \u003Cnord-toggle label=\"Expand\" checked @change=\"expand = !expand\" />\n    \u003C/div>\n\n    \u003CBaseEditableField :is-editing>\n      \u003CBaseTags\n        v-model:is-editing=\"isEditing\"\n        v-model:selected-tags=\"selectedTags\"\n        :categories=\"[\n          { label: 'Vowels', tags: vowels },\n          { label: 'Consonants', tags: consonant },\n        ]\"\n      />\n\n      \u003Ctemplate #edit>\n        \u003CInputComboboxMultiple\n          v-model=\"selectedTags\"\n          async\n          label=\"Alphabet\"\n          hide-label\n          :min-chars=\"0\"\n          :delay=\"0\"\n          :max-displayed-options=\"10\"\n          resolve-on-load\n          resolve-on-open\n          infinite-scroll\n          :inline-edit\n          :expand\n          :options=\"fetchAlphabet\"\n        />\n      \u003C/template>\n    \u003C/BaseEditableField>\n  \u003C/div>\n\u003C/template>\n",{"name":2926,"displayName":2927,"url":2928,"code":2929},"client-tags","Client tags","/main/#/922/product-patterns/usage-examples/tags/client-tags","\u003Cscript setup lang=\"ts\">\nimport { safeMathRandom } from '@/utils/number.js'\nimport ClientSectionTags from '@/components/ClientSectionTags.vue'\nconst alphabet = Array.from({ length: 26 }, (_, i) =>\n  String.fromCharCode(65 + i),\n)\n\n// Values set here to simulate the billing categories\nconst billingTags = ['C', 'W', 'K', 'S']\n\nconst inlineEdit = ref\u003Cboolean>(false)\n\nconst fetchAlphabet = async (query: string) => {\n  await new Promise((resolve) =>\n    setTimeout(resolve, Math.floor(safeMathRandom() * 500) + 500),\n  )\n\n  if (query) {\n    return alphabet\n      .filter((type) => type.toLowerCase().includes(query.toLowerCase()))\n      .map((letter) => ({\n        label: letter,\n        value: letter,\n      }))\n  }\n\n  return alphabet.map((letter) => ({\n    label: letter,\n    value: letter,\n  }))\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n    \u003Cnord-toggle label=\"Inline-edit\" @change=\"inlineEdit = !inlineEdit\" />\n\n    \u003CClientSectionTags\n      :form-options=\"fetchAlphabet\"\n      :billing-tags\n      :inline-edit\n    />\n  \u003C/div>\n\u003C/template>\n",{"name":2931,"displayName":2932,"url":2933,"code":2934},"form-async","Form async","/main/#/922/product-patterns/usage-examples/tags/form-async","\u003Cscript setup lang=\"ts\">\nimport { z } from 'zod'\nimport { useFormValidation } from '@/composables/useFormValidation.js'\nimport { safeMathRandom } from '@/utils/number.js'\nimport BaseEditableField from '@/components/base/editable/Field.vue'\nimport BaseTags from '@/components/base/Tags.vue'\nimport FormComboboxMultiple from '@/components/form/ComboboxMultiple.vue'\n\ntype TagsExampleData = {\n  vowels: string[]\n  consonant: string[]\n}\n\nconst alphabet = Array.from({ length: 26 }, (_, i) =>\n  String.fromCharCode(65 + i),\n)\n\nconst fetchAlphabet = async (query: string) => {\n  await new Promise((resolve) =>\n    setTimeout(resolve, Math.floor(safeMathRandom() * 500) + 500),\n  )\n\n  if (query) {\n    return alphabet\n      .filter((type) => type.toLowerCase().includes(query.toLowerCase()))\n      .map((letter) => ({\n        label: letter,\n        value: letter,\n      }))\n  }\n\n  return alphabet.map((letter) => ({\n    label: letter,\n    value: letter,\n  }))\n}\n\nconst vowels: TagsExampleData['vowels'] = ['A', 'E', 'I', 'O', 'U']\nconst consonant: TagsExampleData['consonant'] = alphabet.filter(\n  (char) => !vowels.includes(char),\n)\nconst formSchema = z.object({\n  letters: z.string().array().optional(),\n})\nconst validationSchema = toTypedSchema(formSchema)\n\nconst isEditing = ref\u003Cboolean>(false)\nconst inlineEdit = ref\u003Cboolean>(false)\nconst expand = ref\u003Cboolean>(true)\nconst selectedTags = ref\u003Cstring[]>([])\nconst formElement = useTemplateRef('formRef')\n\nconst { handleErrors } = useFormValidation(formElement)\nconst { handleSubmit } = useForm({\n  validationSchema,\n  keepValuesOnUnmount: true,\n})\n\nconst onSubmit = handleSubmit(\n  (data) => console.log(data),\n  () => handleErrors(),\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cform\n    ref=\"formRef\"\n    class=\"n:flex n:flex-col n:flex-wrap n:gap-m\"\n    @submit=\"onSubmit\"\n  >\n    \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n      \u003Cnord-toggle\n        label=\"Edit mode\"\n        :checked=\"isEditing\"\n        @change=\"isEditing = !isEditing\"\n      />\n\n      \u003Cnord-toggle label=\"Inline-edit\" @change=\"inlineEdit = !inlineEdit\" />\n\n      \u003Cnord-toggle label=\"Expand\" checked @change=\"expand = !expand\" />\n\n      \u003Cnord-button size=\"s\" variant=\"primary\">Submit\u003C/nord-button>\n    \u003C/div>\n\n    \u003CBaseEditableField :is-editing>\n      \u003CBaseTags\n        v-model:is-editing=\"isEditing\"\n        v-model:selected-tags=\"selectedTags\"\n        :categories=\"[\n          { label: 'Vowels', tags: vowels },\n          { label: 'Consonants', tags: consonant },\n        ]\"\n      />\n\n      \u003Ctemplate #edit>\n        \u003CFormComboboxMultiple\n          v-model=\"selectedTags\"\n          async\n          name=\"letters\"\n          label=\"Alphabet\"\n          hide-label\n          :min-chars=\"0\"\n          :delay=\"0\"\n          :max-displayed-options=\"10\"\n          resolve-on-load\n          resolve-on-open\n          infinite-scroll\n          :inline-edit\n          :expand\n          :options=\"fetchAlphabet\"\n        />\n      \u003C/template>\n    \u003C/BaseEditableField>\n  \u003C/form>\n\u003C/template>\n",{"name":2936,"displayName":2937,"url":2938,"code":2939},"form-basic","Form basic","/main/#/922/product-patterns/usage-examples/tags/form-basic","\u003Cscript setup lang=\"ts\">\nimport { z } from 'zod'\nimport { useFormValidation } from '@/composables/useFormValidation.js'\nimport BaseEditableField from '@/components/base/editable/Field.vue'\nimport BaseTags from '@/components/base/Tags.vue'\nimport FormComboboxMultiple from '@/components/form/ComboboxMultiple.vue'\n\ntype TagsExampleData = {\n  vowels: string[]\n  consonant: string[]\n}\n\nconst alphabet = Array.from({ length: 26 }, (_, i) =>\n  String.fromCharCode(65 + i),\n)\nconst vowels: TagsExampleData['vowels'] = ['A', 'E', 'I', 'O', 'U']\nconst consonant: TagsExampleData['consonant'] = alphabet.filter(\n  (char) => !vowels.includes(char),\n)\nconst formSchema = z.object({\n  letters: z.string().array().min(1, 'You need some letters!'),\n})\nconst validationSchema = toTypedSchema(formSchema)\n\nconst isEditing = ref\u003Cboolean>(false)\nconst inlineEdit = ref\u003Cboolean>(false)\nconst expand = ref\u003Cboolean>(true)\nconst selectedTags = ref\u003Cstring[]>([])\nconst formElement = useTemplateRef('formRef')\n\nconst { handleErrors } = useFormValidation(formElement)\nconst { handleSubmit } = useForm({\n  initialValues: { letters: [] },\n  validationSchema,\n  keepValuesOnUnmount: true,\n})\n\nconst onSubmit = handleSubmit(\n  (data) => console.log(data),\n  () => handleErrors(),\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cform\n    ref=\"formRef\"\n    class=\"n:flex n:flex-col n:flex-wrap n:gap-m\"\n    @submit=\"onSubmit\"\n  >\n    \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n      \u003Cnord-toggle\n        label=\"Edit mode\"\n        :checked=\"isEditing\"\n        @change=\"isEditing = !isEditing\"\n      />\n\n      \u003Cnord-toggle label=\"Inline-edit\" @change=\"inlineEdit = !inlineEdit\" />\n\n      \u003Cnord-toggle label=\"Expand\" checked @change=\"expand = !expand\" />\n\n      \u003Cnord-button size=\"s\" variant=\"primary\">Submit\u003C/nord-button>\n    \u003C/div>\n\n    \u003CBaseEditableField :is-editing>\n      \u003CBaseTags\n        v-model:is-editing=\"isEditing\"\n        v-model:selected-tags=\"selectedTags\"\n        :categories=\"[\n          { label: 'Vowels', tags: vowels },\n          { label: 'Consonants', tags: consonant },\n        ]\"\n      />\n\n      \u003Ctemplate #edit>\n        \u003CFormComboboxMultiple\n          v-model=\"selectedTags\"\n          name=\"letters\"\n          label=\"Alphabet\"\n          hide-label\n          :inline-edit\n          :expand\n          :options=\"\n            alphabet.map((letter) => ({ label: letter, value: letter }))\n          \"\n        />\n      \u003C/template>\n    \u003C/BaseEditableField>\n  \u003C/form>\n\u003C/template>\n",{"name":2168,"displayName":2169,"url":2941,"code":2942},"/main/#/922/product-patterns/usage-examples/tags/with-initial-state","\u003Cscript setup lang=\"ts\">\nimport BaseEditableField from '@/components/base/editable/Field.vue'\nimport InputComboboxMultiple from '@/components/input/ComboboxMultiple.vue'\nimport BaseTags from '@/components/base/Tags.vue'\ntype TagsExampleData = {\n  vowels: string[]\n  consonant: string[]\n}\n\nconst alphabet = Array.from({ length: 26 }, (_, i) =>\n  String.fromCharCode(65 + i),\n)\nconst vowels: TagsExampleData['vowels'] = ['A', 'E', 'I', 'O', 'U']\nconst consonant: TagsExampleData['consonant'] = alphabet.filter(\n  (char) => !vowels.includes(char),\n)\n\nconst isEditing = ref\u003Cboolean>(true)\nconst inlineEdit = ref\u003Cboolean>(false)\nconst expand = ref\u003Cboolean>(true)\nconst selectedTags = ref\u003Cstring[]>(['C', 'W', 'K', 'S'])\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n    \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n      \u003Cnord-toggle\n        label=\"Edit mode\"\n        :checked=\"isEditing\"\n        @change=\"isEditing = !isEditing\"\n      />\n\n      \u003Cnord-toggle label=\"Inline-edit\" @change=\"inlineEdit = !inlineEdit\" />\n\n      \u003Cnord-toggle label=\"Expand\" checked @change=\"expand = !expand\" />\n    \u003C/div>\n\n    \u003CBaseEditableField :is-editing>\n      \u003CBaseTags\n        v-model:is-editing=\"isEditing\"\n        v-model:selected-tags=\"selectedTags\"\n        :categories=\"[\n          { label: 'Vowels', tags: vowels },\n          { label: 'Consonants', tags: consonant },\n        ]\"\n      />\n\n      \u003Ctemplate #edit>\n        \u003CInputComboboxMultiple\n          v-model=\"selectedTags\"\n          label=\"Vowels & Consonants\"\n          :inline-edit\n          :expand\n          :options=\"\n            alphabet.map((letter) => ({ label: letter, value: letter }))\n          \"\n        />\n      \u003C/template>\n    \u003C/BaseEditableField>\n  \u003C/div>\n\u003C/template>\n",{"name":2944,"displayName":2945,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2946},"pcnf-time-duration","Time Duration",[2947,2950,2955,2960],{"name":2154,"displayName":2155,"url":2948,"code":2949},"/main/#/922/product-patterns/usage-examples/time-duration/basic","\u003Cscript setup lang=\"ts\">\nimport InputTimeDuration from '@/components/input/TimeDuration.vue'\nconst value = ref\u003Cstring>()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputTimeDuration v-model=\"value\" label=\"Duration\" />\n\u003C/template>\n",{"name":2951,"displayName":2952,"url":2953,"code":2954},"with-custom-interval","With custom interval","/main/#/922/product-patterns/usage-examples/time-duration/with-custom-interval","\u003Cscript setup lang=\"ts\">\nimport InputTimeDuration from '@/components/input/TimeDuration.vue'\nconst value = ref\u003Cstring>()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputTimeDuration v-model=\"value\" label=\"Duration\" :interval=\"15\" />\n\u003C/template>\n",{"name":2956,"displayName":2957,"url":2958,"code":2959},"with-custom-min-and-max-duration","With custom min and max duration","/main/#/922/product-patterns/usage-examples/time-duration/with-custom-min-and-max-duration","\u003Cscript setup lang=\"ts\">\nimport InputTimeDuration from '@/components/input/TimeDuration.vue'\nconst value = ref\u003Cstring>()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputTimeDuration\n    v-model=\"value\"\n    label=\"Duration\"\n    :min-duration=\"60\"\n    :max-duration=\"490\"\n  />\n\u003C/template>\n",{"name":2372,"displayName":2373,"url":2961,"code":2962},"/main/#/922/product-patterns/usage-examples/time-duration/with-error","\u003Cscript setup lang=\"ts\">\nimport InputTimeDuration from '@/components/input/TimeDuration.vue'\nconst value = ref\u003Cstring>()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputTimeDuration\n    v-model=\"value\"\n    label=\"Duration\"\n    :error=\"value ? undefined : 'This field is required'\"\n  />\n\u003C/template>\n",{"name":2964,"displayName":2965,"description":2966,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2967},"pcnf-time-picker","Time Picker","Time picker is designed to allow the user to type time or select it from a predefined dropdown menu.",[2968],{"name":2154,"displayName":2155,"url":2969,"code":2970},"/main/#/922/product-patterns/usage-examples/time-picker/basic","\u003Cscript lang=\"ts\" setup>\nimport InputTimePicker from '@/components/input/TimePicker.vue'\nconst value = ref\u003Cstring>()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputTimePicker v-model=\"value\" label=\"Time picker\" />\n\u003C/template>\n",{"name":2972,"displayName":2116,"product":2148,"availability":2149,"productColor":2150,"examplesBaseURL":2151,"examples":2973},"pcnf-toast",[2974,2977,2982,2987],{"name":2154,"displayName":2155,"url":2975,"code":2976},"/main/#/922/product-patterns/usage-examples/toast/basic","\u003Cscript setup lang=\"ts\">\nimport { useAddToast } from '@/composables/useToast.js'\nconst addToast = useAddToast()\n\nconst handleAddToast = () => {\n  addToast('Message sent')\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n    \u003Cp>Click the button below to add a toast notification.\u003C/p>\n\n    \u003Cnord-button variant=\"primary\" @click=\"handleAddToast\">\n      Add toast\n    \u003C/nord-button>\n  \u003C/div>\n\u003C/template>\n",{"name":2978,"displayName":2979,"url":2980,"code":2981},"custom-auto-dismiss","Custom auto dismiss","/main/#/922/product-patterns/usage-examples/toast/custom-auto-dismiss","\u003Cscript setup lang=\"ts\">\nimport { useAddToast } from '@/composables/useToast.js'\nconst addToast = useAddToast()\n\nconst handleShortDismiss = () => {\n  addToast('Quick message (1s)', {\n    autoDismiss: 1000,\n  })\n}\n\nconst handleLongDismiss = () => {\n  addToast('Important update (5s)', {\n    autoDismiss: 5000,\n  })\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n    \u003Cp>\n      By default, toasts auto-dismiss after 3 seconds. This example demonstrates\n      how to set a custom auto-dismiss duration.\n    \u003C/p>\n\n    \u003Cdiv class=\"n:flex n:flex-row n:flex-wrap n:items-center n:gap-m\">\n      \u003Cnord-button variant=\"primary\" @click=\"handleShortDismiss\">\n        Show quick toast\n      \u003C/nord-button>\n\n      \u003Cnord-button variant=\"primary\" @click=\"handleLongDismiss\">\n        Show longer toast\n      \u003C/nord-button>\n    \u003C/div>\n  \u003C/div>\n\u003C/template>\n",{"name":2983,"displayName":2984,"url":2985,"code":2986},"custom-rendering","Custom rendering","/main/#/922/product-patterns/usage-examples/toast/custom-rendering","\u003Cscript setup lang=\"tsx\">\nimport { NuxtLink } from '#components'\nimport { useAddToast } from '@/composables/useToast.js'\n\nconst route = useRoute()\nconst addToast = useAddToast()\n\nconst handleAddToastWithTSX = () => {\n  addToast(\n    \u003Cspan>\n      Credit note \u003CNuxtLink to={route.path}>#12345\u003C/NuxtLink> created\n      successfully\n    \u003C/span>,\n  )\n}\n\nconst handleAddToastWithHFunction = () => {\n  addToast(\n    h('span', [\n      'Invoice Payment ',\n      h(\n        NuxtLink,\n        {\n          to: route.path,\n        },\n        () => '#67890',\n      ),\n      ' updated successfully',\n    ]),\n  )\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n    \u003Cp>\n      You can use TSX or Vue's h() function to create custom toast content with\n      interactive elements like links.\n    \u003C/p>\n\n    \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n      \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n        \u003Ch3 class=\"n:typeset n:font-heading\">Using TSX\u003C/h3>\n        \u003Cp>TSX provides a familiar React-like syntax for creating VNodes.\u003C/p>\n        \u003Cnord-button variant=\"primary\" @click=\"handleAddToastWithTSX\">\n          Show toast with TSX\n        \u003C/nord-button>\n      \u003C/div>\n\n      \u003Cnord-divider />\n\n      \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n        \u003Ch3 class=\"n:typeset n:font-heading\">Using h() Function\u003C/h3>\n        \u003Cp>\n          Vue's h() function offers programmatic control over creating VNodes.\n        \u003C/p>\n        \u003Cnord-button variant=\"primary\" @click=\"handleAddToastWithHFunction\">\n          Show toast with h()\n        \u003C/nord-button>\n      \u003C/div>\n    \u003C/div>\n  \u003C/div>\n\u003C/template>\n",{"name":2988,"displayName":2989,"url":2990,"code":2991},"error","Error","/main/#/922/product-patterns/usage-examples/toast/error","\u003Cscript setup lang=\"ts\">\nimport { useAddToast } from '@/composables/useToast.js'\nconst addToast = useAddToast()\n\nconst handleAddErrorToast = () => {\n  addToast('No internet connection', {\n    variant: 'danger',\n  })\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"n:flex n:flex-col n:flex-wrap n:gap-m\">\n    \u003Cp>\n      Error toasts use the danger variant to indicate that something went wrong.\n    \u003C/p>\n\n    \u003Cnord-button variant=\"primary\" @click=\"handleAddErrorToast\">\n      Add error toast\n    \u003C/nord-button>\n  \u003C/div>\n\u003C/template>\n",[2993,2995,2997,3000,3002,3004,3007,3009,3011,3013,3015,3017,3019,3021,3023,3025,3027,3029,3031,3033,3035,3037,3040,3042,3044,3046,3048,3050,3052,3054,3056,3058,3060,3062,3064,3066,3068,3070,3072,3074,3075,3077,3079,3081,3083,3085,3087,3089,3091,3093,3095,3097,3099,3101,3103,3105,3107,3109,3111,3113,3115,3117,3119],{"path":2994,"isNew":17,"updated":1643,"status":1641},"/component-docs/accordion",{"path":2996,"isNew":17,"updated":1643,"status":1643},"/component-docs/aside",{"path":2998,"isNew":17,"updated":2999,"status":1641},"/component-docs/autocomplete","2026-06-30",{"path":3001,"isNew":8,"updated":1643,"status":1643},"/component-docs/avatar",{"path":3003,"isNew":8,"updated":1643,"status":1643},"/component-docs/badge",{"path":3005,"isNew":8,"updated":3006,"status":1643},"/component-docs/banner","2026-06-24",{"path":3008,"isNew":8,"updated":1643,"status":1643},"/component-docs/button",{"path":3010,"isNew":8,"updated":1643,"status":1643},"/component-docs/button-group",{"path":3012,"isNew":8,"updated":3006,"status":1643},"/component-docs/calendar",{"path":3014,"isNew":8,"updated":1643,"status":1643},"/component-docs/card",{"path":3016,"isNew":8,"updated":2999,"status":1643},"/component-docs/checkbox",{"path":3018,"isNew":17,"updated":1643,"status":1641},"/component-docs/collapsible",{"path":3020,"isNew":17,"updated":2999,"status":1641},"/component-docs/combobox",{"path":3022,"isNew":8,"updated":1643,"status":1643},"/component-docs/command-menu",{"path":3024,"isNew":8,"updated":2999,"status":1643},"/component-docs/date-picker",{"path":3026,"isNew":17,"updated":2999,"status":1641},"/component-docs/date-range-picker",{"path":3028,"isNew":8,"updated":1643,"status":1643},"/component-docs/divider",{"path":3030,"isNew":8,"updated":1643,"status":1643},"/component-docs/drawer",{"path":3032,"isNew":8,"updated":1643,"status":1643},"/component-docs/dropdown",{"path":3034,"isNew":8,"updated":1643,"status":1643},"/component-docs/empty-state",{"path":3036,"isNew":17,"updated":1643,"status":1641},"/component-docs/field",{"path":3038,"isNew":8,"updated":1643,"status":3039},"/component-docs/fieldset","deprecated",{"path":3041,"isNew":17,"updated":1643,"status":1641},"/component-docs/filter-bar",{"path":3043,"isNew":8,"updated":1643,"status":1643},"/component-docs/filter-date-range",{"path":3045,"isNew":8,"updated":1643,"status":1643},"/component-docs/filter-dropdown",{"path":3047,"isNew":8,"updated":1643,"status":1643},"/component-docs/footer",{"path":3049,"isNew":8,"updated":1643,"status":1643},"/component-docs/header",{"path":3051,"isNew":8,"updated":1643,"status":1643},"/component-docs/icon",{"path":3053,"isNew":8,"updated":2999,"status":1643},"/component-docs/input",{"path":3055,"isNew":17,"updated":1643,"status":1641},"/component-docs/item",{"path":3057,"isNew":17,"updated":1643,"status":1641},"/component-docs/kbd",{"path":3059,"isNew":8,"updated":1643,"status":1643},"/component-docs/layout",{"path":3061,"isNew":8,"updated":1643,"status":1643},"/component-docs/message",{"path":3063,"isNew":17,"updated":1643,"status":1641},"/component-docs/meter",{"path":3065,"isNew":8,"updated":1643,"status":1643},"/component-docs/modal",{"path":3067,"isNew":8,"updated":1643,"status":1643},"/component-docs/navigation",{"path":3069,"isNew":8,"updated":1643,"status":1643},"/component-docs/notification",{"path":3071,"isNew":17,"updated":2999,"status":1641},"/component-docs/number-field",{"path":3073,"isNew":17,"updated":2999,"status":1641},"/component-docs/otp-field",{"path":1639,"isNew":17,"updated":1643,"status":1641},{"path":3076,"isNew":8,"updated":3006,"status":1643},"/component-docs/popout",{"path":3078,"isNew":8,"updated":1643,"status":1643},"/component-docs/progress",{"path":3080,"isNew":8,"updated":1643,"status":1643},"/component-docs/progress-bar",{"path":3082,"isNew":8,"updated":1643,"status":1643},"/component-docs/qrcode",{"path":3084,"isNew":8,"updated":2999,"status":1643},"/component-docs/radio",{"path":3086,"isNew":8,"updated":2999,"status":1643},"/component-docs/range",{"path":3088,"isNew":17,"updated":1643,"status":1641},"/component-docs/scroll-area",{"path":3090,"isNew":8,"updated":1643,"status":1643},"/component-docs/segmented-control",{"path":3092,"isNew":8,"updated":2999,"status":1643},"/component-docs/select",{"path":3094,"isNew":8,"updated":1643,"status":1643},"/component-docs/skeleton",{"path":3096,"isNew":8,"updated":1643,"status":1643},"/component-docs/spinner",{"path":3098,"isNew":8,"updated":1643,"status":1643},"/component-docs/stack",{"path":3100,"isNew":8,"updated":1643,"status":1643},"/component-docs/tab",{"path":3102,"isNew":8,"updated":1643,"status":1643},"/component-docs/table",{"path":3104,"isNew":8,"updated":1643,"status":1643},"/component-docs/tag",{"path":3106,"isNew":8,"updated":2999,"status":1643},"/component-docs/textarea",{"path":3108,"isNew":17,"updated":2999,"status":1641},"/component-docs/time-picker",{"path":3110,"isNew":8,"updated":1643,"status":1643},"/component-docs/toast",{"path":3112,"isNew":8,"updated":2999,"status":1643},"/component-docs/toggle",{"path":3114,"isNew":8,"updated":1643,"status":1643},"/component-docs/tooltip",{"path":3116,"isNew":8,"updated":1643,"status":1643},"/component-docs/top-bar",{"path":3118,"isNew":17,"updated":1643,"status":1643},"/component-docs/truncate",{"path":3120,"isNew":8,"updated":1643,"status":1643},"/component-docs/visually-hidden",[3122,3132,3147,3183,3229,3234,3238,3244,3353,3359,3394,3409,3413,3417,3420,3422,3426,3430,3434,3438,3441],{"title":3123,"path":3124,"stem":3125,"children":3126},"Getting Started","/start","02.start/01.index",[3127,3128],{"title":3123,"path":3124,"stem":3125},{"title":3129,"path":3130,"stem":3131},"About Nord","/start/about","02.start/02.about",{"title":3133,"path":3134,"stem":3135,"children":3136,"icon":3146},"What's New","/new","03.new/00.index",[3137,3140,3143],{"path":3138,"title":3139},"/changelogs/web-components","Changelog",{"path":3141,"title":3142},"/updates","Latest Updates",{"path":3144,"title":3145},"/migrations","Migrations","i-lucide-sparkles",{"title":3148,"path":3149,"stem":3150,"children":3151},"Design Tokens","/tokens","04.tokens/index",[3152,3155,3158,3161,3164,3167,3170,3172,3175,3178,3181],{"path":3153,"title":3154},"#color","Color",{"path":3156,"title":3157},"#border-radius","Border Radius",{"path":3159,"title":3160},"#box-shadow","Box Shadow",{"path":3162,"title":3163},"#font-size","Font Size",{"path":3165,"title":3166},"#font","Font",{"path":3168,"title":3169},"#line-height","Line Height",{"path":3171,"title":2631},"#size",{"path":3173,"title":3174},"#space","Space",{"path":3176,"title":3177},"#transition","Transition",{"path":3179,"title":3180},"#z-index","Z-index",{"path":3182,"title":41},"#usage",{"title":3184,"path":3185,"stem":3186,"children":3187,"order":160},"Guidelines","/guidelines","05.guidelines/0.index",[3188,3190,3193,3196,3199,3202,3205,3208,3211,3214,3217,3220,3223,3226],{"path":3189,"title":1569},"/accessibility-checklist",{"path":3191,"title":3192},"/colors","Color System",{"path":3194,"title":3195},"/color-utilities","Color Utilities",{"path":3197,"title":3198},"/cdn","Content Delivery Network",{"path":3200,"title":3201},"/principles","Principles",{"path":3203,"title":3204},"/figma","Figma Toolkit",{"path":3206,"title":3207},"/grid","Grid",{"path":3209,"title":3210},"/iconography","Iconography",{"path":3212,"title":3213},"/localization","Localization",{"path":3215,"title":3216},"/naming","Naming",{"path":3218,"title":3219},"/brand","Nordhealth Brand",{"path":3221,"title":3222},"/typography","Typography",{"path":3224,"title":3225},"/web-components","Web Components",{"path":3227,"title":3228},"/webfonts","Webfonts",{"title":3225,"path":3230,"stem":3231,"children":3232,"order":194},"/components","06.components/index",[3233],{"title":3225,"path":3230,"stem":3231,"order":194},{"title":3235,"path":3236,"stem":3237,"order":218},"Community Assets","/community-assets","07.community-assets",{"title":3239,"path":3240,"stem":3241,"children":3242,"order":233},"Templates","/templates","08.templates/index",[3243],{"title":3239,"path":3240,"stem":3241,"order":233},{"title":3245,"path":3246,"stem":3247,"children":3248},"CSS","/css","09.css/00.index",[3249,3296,3333],{"path":3250,"title":3251,"children":3252},"/css/tailwind/","Tailwind CSS",[3253,3256,3258,3261,3264,3267,3270,3273,3276,3279,3282,3285,3288,3290,3293],{"path":3254,"title":3255},"/css/tailwind/#installation","Installation",{"path":3257,"title":41},"/css/tailwind/#usage",{"path":3259,"title":3260},"/css/tailwind/#peer-dependencies","Peer Dependencies",{"path":3262,"title":3263},"/css/tailwind/#theme-variables","Theme Variables",{"path":3265,"title":3266},"/css/tailwind/#logical-properties","Logical Properties",{"path":3268,"title":3269},"/css/tailwind/#typography-examples","Typography Examples",{"path":3271,"title":3272},"/css/tailwind/#color-examples","Color Examples",{"path":3274,"title":3275},"/css/tailwind/#border-examples","Border Examples",{"path":3277,"title":3278},"/css/tailwind/#shadow-examples","Shadow Examples",{"path":3280,"title":3281},"/css/tailwind/#miscellaneous-utilities","Miscellaneous Utilities",{"path":3283,"title":3284},"/css/tailwind/#nord-components","Nord Components",{"path":3286,"title":3287},"/css/tailwind/#form-utilities","Form Utilities",{"path":3289,"title":3207},"/css/tailwind/#grid",{"path":3291,"title":3292},"/css/tailwind/#states-hover-focus-etc","States (Hover, Focus, etc.)",{"path":3294,"title":3295},"/css/tailwind/#extending-the-theme","Extending the Theme",{"path":3297,"title":3298,"children":3299},"/css/css-framework/","Legacy CSS Framework",[3300,3302,3304,3307,3310,3313,3316,3318,3321,3324,3327,3330],{"path":3301,"title":3255},"/css/css-framework/#installation",{"path":3303,"title":41},"/css/css-framework/#usage",{"path":3305,"title":3306},"/css/css-framework/#utilities","Utilities",{"path":3308,"title":3309},"/css/css-framework/#reset-utility","Reset Utility",{"path":3311,"title":3312},"/css/css-framework/#typographic-utilities","Typographic Utilities",{"path":3314,"title":3315},"/css/css-framework/#font-size-utilities","Font Size Utilities",{"path":3317,"title":3195},"/css/css-framework/#color-utilities",{"path":3319,"title":3320},"/css/css-framework/#border-utilities","Border Utilities",{"path":3322,"title":3323},"/css/css-framework/#box-shadow-utilities","Box Shadow Utilities",{"path":3325,"title":3326},"/css/css-framework/#grid-and-container-utilities","Grid & Container Utilities",{"path":3328,"title":3329},"/css/css-framework/#spacing-utilities","Spacing Utilities",{"path":3331,"title":3332},"/css/css-framework/#css-custom-properties","CSS Custom Properties",{"path":3334,"title":3335,"children":3336},"/css/eslint/","ESLint Plugin",[3337,3339,3341,3344,3347,3350],{"path":3338,"title":3255},"/css/eslint/#installation",{"path":3340,"title":41},"/css/eslint/#usage",{"path":3342,"title":3343},"/css/eslint/#nord-rules","Nord Rules",{"path":3345,"title":3346},"/css/eslint/#tailwind-rules","Tailwind Rules",{"path":3348,"title":3349},"/css/eslint/#custom-configuration","Custom Configuration",{"path":3351,"title":3352},"/css/eslint/#class-detection","Class Detection",{"title":3354,"path":3355,"stem":3356,"children":3357,"order":253},"Nordicons","/nordicons","10.nordicons/index",[3358],{"title":3354,"path":3355,"stem":3356,"order":253},{"title":3360,"path":3361,"stem":3362,"children":3363},"Themes","/themes","11.themes/index",[3364,3366,3368,3371,3373,3376,3379,3382,3385,3388,3391],{"path":3365,"title":799},"#top",{"path":3367,"title":3255},"#installation",{"path":3369,"title":3370},"#available-themes","Available Themes",{"path":3372,"title":851},"#examples",{"path":3374,"title":3375},"#dark-mode","Dark Mode",{"path":3377,"title":3378},"#creating-themes","Creating Themes",{"path":3380,"title":3381},"#accent-color","Accent Color",{"path":3383,"title":3384},"#top-bar-theming","Top Bar theming",{"path":3386,"title":3387},"#logo-usage","Logo Usage",{"path":3389,"title":3390},"#theming-in-figma","Theming in Figma",{"path":3392,"title":3393},"#theme-builder","Theme Builder",{"title":3395,"path":3396,"stem":3397,"children":3398},"AI","/ai","12.ai/0.index",[3399,3401,3405],{"title":3400,"path":3396,"stem":3397},"AI Integration",{"title":3402,"path":3403,"stem":3404},"LLMs.txt","/ai/llms-txt","12.ai/02.llms-txt",{"title":3406,"path":3407,"stem":3408},"Agent Skills","/ai/skills","12.ai/03.skills",{"title":3410,"path":3411,"stem":3412},"Downloads","/downloads","13.downloads",{"title":3414,"path":3415,"stem":3416},"FAQ","/faq","14.faq",{"title":3129,"path":3418,"stem":3419},"/about","about",{"title":1569,"path":3421,"stem":1568},"/accessibility",{"title":3423,"path":3424,"stem":3425},"Backlog Prioritization Model","/backlog-prioritization-model","backlog-prioritization-model",{"title":3427,"path":3428,"stem":3429},"Careers","/careers","careers",{"title":3431,"path":3432,"stem":3433},"Contributing","/contributing","contributing",{"title":3435,"path":3436,"stem":3437},"Help & Feedback","/help","help",{"title":62,"path":3439,"stem":3440},"/","index",{"title":3442,"path":3443,"stem":3444},"Terms of Use","/terms","terms",{"hasPlayground":17,"stories":3446},[3447,3448,3449,3450,3451,3452,3453],{"id":1648,"name":799,"exportName":799},{"id":1650,"name":1651,"exportName":1651,"html":1652},{"id":1654,"name":877,"exportName":877,"html":1655},{"id":1657,"name":855,"exportName":855,"html":1658},{"id":1660,"name":1661,"exportName":901,"html":1662},{"id":1664,"name":911,"exportName":911,"html":1665},{"id":1667,"name":926,"exportName":926,"html":1668},[3455,3469,3488,3502,3518,3532],{"slug":3456,"title":3457,"meta":3458},"pagination-content","Pagination Content",{"name":2012,"tagName":144,"description":3459,"status":7,"isNew":8,"category":9,"lightDom":10,"properties":3460,"slots":3461,"events":3464,"cssProperties":3465,"stateAttributes":3466,"methods":3467,"dependencies":3468},"The list container for composed \u003Ca href=\"/components/pagination/\">Pagination\u003C/a> controls.\nLays its \u003Ca href=\"/components/pagination-item/\">Pagination Item\u003C/a> children out in a row.\n\nPlace it inside \u003Ca href=\"/components/pagination/\">Pagination\u003C/a>, which is already the\n\u003Ccode>navigation\u003C/code> landmark (it sets \u003Ccode>role=\"navigation\"\u003C/code> and an accessible label).\nDo not add your own \u003Ccode><nav>\u003C/code> wrapper — a second landmark around the same\ncontrols would be a duplicate that screen-reader users have to wade through.",[],[3462],{"name":20,"description":3463},"Default slot for Pagination Item children.",[],[],[],[],[],{"slug":3470,"title":3471,"meta":3472},"pagination-ellipsis","Pagination Ellipsis",{"name":2015,"tagName":408,"description":3473,"status":7,"isNew":8,"category":9,"lightDom":10,"properties":3474,"slots":3479,"events":3480,"cssProperties":3481,"stateAttributes":3484,"methods":3485,"dependencies":3486},"The collapsed-pages marker (…) in a composed \u003Ca href=\"/components/pagination/\">Pagination\u003C/a>.\nThe glyph is decorative; a visually-hidden label gives it meaning for\nassistive tech. Set \u003Ccode>label\u003C/code> to localise it.",[3475],{"name":1615,"attribute":1615,"type":3476,"default":3477,"description":3478,"fieldRelated":8},"string","'More pages'","The visually-hidden label announced for the collapsed pages.",[],[],[3482],{"name":25,"default":26,"description":3483},"Inherited spacing token used by the pagination row.",[],[],[3487],"visually-hidden",{"slug":3489,"title":3490,"meta":3491},"pagination-item","Pagination Item",{"name":2018,"tagName":155,"description":3492,"status":7,"isNew":8,"category":9,"lightDom":10,"properties":3493,"slots":3494,"events":3497,"cssProperties":3498,"stateAttributes":3499,"methods":3500,"dependencies":3501},"A single slot in a composed \u003Ca href=\"/components/pagination-content/\">Pagination Content\u003C/a>\nrow. Wrap each control — a \u003Ca href=\"/components/pagination-link/\">Pagination Link\u003C/a>,\n\u003Ca href=\"/components/pagination-previous/\">Pagination Previous\u003C/a>, \u003Ca href=\"/components/pagination-next/\">Pagination Next\u003C/a>\nor \u003Ca href=\"/components/pagination-ellipsis/\">Pagination Ellipsis\u003C/a> — in its own item.",[],[3495],{"name":20,"description":3496},"Default slot for a single pagination control.",[],[],[],[],[],{"slug":3503,"title":3504,"meta":3505},"pagination-link","Pagination Link",{"name":2021,"tagName":111,"description":3506,"status":7,"isNew":8,"category":9,"lightDom":10,"properties":3507,"slots":3510,"events":3513,"cssProperties":3514,"stateAttributes":3515,"methods":3516,"dependencies":3517},"A page link in a composed \u003Ca href=\"/components/pagination/\">Pagination\u003C/a>. A layout\nwrapper around your own interactive element — provide an \u003Ccode><a>\u003C/code> (e.g. a\nframework \u003Ccode><Link>\u003C/code> for crawlable, SSR-friendly links) or a \u003Ccode>nord-button\u003C/code>. Set\n\u003Ccode>current\u003C/code> on the link for the active page; it mirrors \u003Ccode>aria-current=\"page\"\u003C/code>\nonto the interactive child so assistive tech announces it.",[3508],{"name":107,"attribute":107,"type":14,"default":15,"description":3509,"reflects":17,"fieldRelated":8},"Marks this as the current page, mirroring \u003Ccode>aria-current=\"page\"\u003C/code> onto the child.",[3511],{"name":20,"description":3512},"Default slot for the page link or button.",[],[],[],[],[],{"slug":3519,"title":3520,"meta":3521},"pagination-next","Pagination Next",{"name":2024,"tagName":440,"description":3522,"status":7,"isNew":8,"category":9,"lightDom":10,"properties":3523,"slots":3524,"events":3527,"cssProperties":3528,"stateAttributes":3529,"methods":3530,"dependencies":3531},"The \"next page\" control in a composed \u003Ca href=\"/components/pagination/\">Pagination\u003C/a>. A\nlayout wrapper around your own interactive element — provide an \u003Ccode><a>\u003C/code> (e.g. a\nframework \u003Ccode><Link>\u003C/code>) or a \u003Ccode>nord-button\u003C/code> with its own icon, label and\nnavigation, and disable it when there is no next page.",[],[3525],{"name":20,"description":3526},"Default slot for the next-page link or button.",[],[],[],[],[],{"slug":3533,"title":3534,"meta":3535},"pagination-previous","Pagination Previous",{"name":2027,"tagName":166,"description":3536,"status":7,"isNew":8,"category":9,"lightDom":10,"properties":3537,"slots":3538,"events":3541,"cssProperties":3542,"stateAttributes":3543,"methods":3544,"dependencies":3545},"The \"previous page\" control in a composed \u003Ca href=\"/components/pagination/\">Pagination\u003C/a>.\nA layout wrapper around your own interactive element — provide an \u003Ccode><a>\u003C/code>\n(e.g. a framework \u003Ccode><Link>\u003C/code>) or a \u003Ccode>nord-button\u003C/code> with its own icon, label and\nnavigation, and disable it when there is no previous page.",[],[3539],{"name":20,"description":3540},"Default slot for the previous-page link or button.",[],[],[],[],[],[3547,3553,3557,3558,3559,3560,3561,3562,3563,3564,3565,3566,3570,3574,3577,3578,3579,3580,3581,3586,3587,3598,3599,3607,3608,3609,3610,3611,3622,3625,3626,3627,3628,3629,3634,3637,3638,3639,3647,3648,3649,3650,3651,3652,3653,3654,3657,3658,3659,3660,3661,3665,3666,3669,3670,3671,3674,3675,3676,3677,3678],{"name":1671,"tagName":1672,"description":1673,"category":1674,"status":7,"isNew":8,"lightDom":17,"parts":3548},[3549,3550,3551,3552],{"name":1677,"tagName":1678,"description":1679},{"name":1681,"tagName":1682,"description":1683},{"name":1685,"tagName":1686,"description":1687},{"name":1689,"tagName":1690,"description":1691},{"name":1693,"tagName":1694,"description":1695,"category":1674,"status":7,"isNew":8,"lightDom":8,"parts":3554},[3555,3556],{"name":1698,"tagName":1699,"description":1700},{"name":1702,"tagName":1703,"description":1704},{"name":1706,"tagName":1707,"description":1708,"category":1709,"status":7,"isNew":8,"lightDom":17},{"name":1711,"tagName":1712,"description":1713,"category":1714,"status":7,"isNew":8,"lightDom":8},{"name":1716,"tagName":1717,"description":1718,"category":1719,"status":7,"isNew":8,"lightDom":8},{"name":1721,"tagName":1722,"description":1723,"category":1719,"status":7,"isNew":8,"lightDom":8},{"name":1725,"tagName":95,"description":1726,"category":1727,"status":7,"isNew":8,"lightDom":8},{"name":1729,"tagName":1730,"description":1731,"category":1727,"status":7,"isNew":8,"lightDom":8},{"name":1733,"tagName":1734,"description":1735,"category":1736,"status":7,"isNew":8,"lightDom":8},{"name":1738,"tagName":1739,"description":1740,"category":1674,"status":7,"isNew":8,"lightDom":8},{"name":1742,"tagName":1743,"description":1744,"category":1709,"status":7,"isNew":8,"lightDom":8},{"name":1746,"tagName":1747,"description":1748,"category":1674,"status":7,"isNew":8,"lightDom":17,"parts":3567},[3568,3569],{"name":1751,"tagName":1752,"description":1753},{"name":1755,"tagName":1756,"description":1757},{"name":1759,"tagName":1760,"description":1761,"category":1709,"status":7,"isNew":8,"lightDom":17,"parts":3571},[3572,3573],{"name":1764,"tagName":1765,"description":1766},{"name":1768,"tagName":1769,"description":1770},{"name":1772,"tagName":1773,"description":1774,"category":1727,"status":7,"isNew":8,"lightDom":8,"parts":3575},[3576],{"name":1777,"tagName":1778,"description":1779},{"name":1781,"tagName":1782,"description":1783,"category":1709,"status":7,"isNew":8,"lightDom":8},{"name":1785,"tagName":1786,"description":1787,"category":1709,"status":7,"isNew":8,"lightDom":17},{"name":1789,"tagName":1790,"description":1791,"category":1674,"status":7,"isNew":8,"lightDom":8},{"name":1793,"tagName":1794,"description":1795,"category":1674,"status":7,"isNew":8,"lightDom":8},{"name":1797,"tagName":1798,"description":1799,"category":1800,"status":7,"isNew":8,"lightDom":8,"parts":3582},[3583,3584,3585],{"name":1803,"tagName":1804,"description":1805},{"name":1807,"tagName":1808,"description":1809},{"name":1811,"tagName":1812,"description":1813},{"name":1815,"tagName":1816,"description":1817,"category":1719,"status":7,"isNew":8,"lightDom":8},{"name":1819,"tagName":1820,"description":1821,"category":1709,"status":7,"isNew":8,"lightDom":17,"parts":3588},[3589,3590,3591,3592,3593,3594,3595,3596,3597],{"name":1824,"tagName":1825,"description":1826},{"name":1828,"tagName":1829,"description":1830},{"name":1832,"tagName":1833,"description":1834},{"name":1836,"tagName":1837,"description":1838},{"name":1840,"tagName":1841,"description":1842},{"name":1844,"tagName":1845,"description":1846},{"name":1848,"tagName":1849,"description":1850},{"name":1852,"tagName":1853,"description":1854},{"name":1856,"tagName":1857,"description":1858},{"name":1860,"tagName":1861,"description":1862,"category":1709,"status":7,"isNew":8,"lightDom":8},{"name":1864,"tagName":1865,"description":1866,"category":1709,"status":7,"isNew":8,"lightDom":17,"parts":3600},[3601,3602,3603,3604,3605,3606],{"name":1869,"tagName":1870,"description":1871},{"name":1873,"tagName":1874,"description":1875},{"name":1877,"tagName":1878,"description":1879},{"name":1881,"tagName":1882,"description":1883},{"name":1885,"tagName":1886,"description":1887},{"name":1889,"tagName":1890,"description":1891},{"name":1893,"tagName":1894,"description":1895,"category":1674,"status":7,"isNew":8,"lightDom":8},{"name":1897,"tagName":1898,"description":1899,"category":1674,"status":7,"isNew":8,"lightDom":8},{"name":1901,"tagName":200,"description":1902,"category":1714,"status":7,"isNew":8,"lightDom":8},{"name":1904,"tagName":1905,"description":1906,"category":1709,"status":7,"isNew":8,"lightDom":8},{"name":1908,"tagName":1909,"description":1910,"category":1736,"status":7,"isNew":8,"lightDom":17,"parts":3612},[3613,3614,3615,3616,3617,3618,3619,3620,3621],{"name":1913,"tagName":1914,"description":1915},{"name":1917,"tagName":1918,"description":1919},{"name":1921,"tagName":1922,"description":1923},{"name":1925,"tagName":1926,"description":1927},{"name":1929,"tagName":1930,"description":1931},{"name":1933,"tagName":1934,"description":1935},{"name":1937,"tagName":1938,"description":1939},{"name":1941,"tagName":1942,"description":1943},{"name":1945,"tagName":1946,"description":1947},{"name":1949,"tagName":1950,"description":1951,"category":1952,"status":7,"isNew":8,"lightDom":17,"parts":3623},[3624],{"name":1955,"tagName":1956,"description":1957},{"name":1959,"tagName":1960,"description":1961,"category":1674,"status":7,"isNew":8,"lightDom":8},{"name":1963,"tagName":1964,"description":1965,"category":1727,"status":7,"isNew":8,"lightDom":8},{"name":1967,"tagName":1968,"description":1969,"category":1719,"status":7,"isNew":8,"lightDom":17},{"name":1971,"tagName":1972,"description":1973,"category":1800,"status":7,"isNew":8,"lightDom":8},{"name":1975,"tagName":1976,"description":1977,"category":9,"status":7,"isNew":8,"lightDom":8,"parts":3630},[3631,3632,3633],{"name":1980,"tagName":1981,"description":1982},{"name":1984,"tagName":1985,"description":1986},{"name":1988,"tagName":1989,"description":1990},{"name":1992,"tagName":1993,"description":1994,"category":1719,"status":7,"isNew":8,"lightDom":8,"parts":3635},[3636],{"name":1997,"tagName":1998,"description":1999},{"name":2001,"tagName":2002,"description":2003,"category":1709,"status":7,"isNew":8,"lightDom":17},{"name":2005,"tagName":2006,"description":2007,"category":1709,"status":7,"isNew":8,"lightDom":17},{"name":4,"tagName":5,"description":2009,"category":9,"status":7,"isNew":8,"lightDom":17,"parts":3640},[3641,3642,3643,3644,3645,3646],{"name":2012,"tagName":144,"description":2013},{"name":2015,"tagName":408,"description":2016},{"name":2018,"tagName":155,"description":2019},{"name":2021,"tagName":111,"description":2022},{"name":2024,"tagName":440,"description":2025},{"name":2027,"tagName":166,"description":2028},{"name":2030,"tagName":2031,"description":2032,"category":1800,"status":7,"isNew":8,"lightDom":8},{"name":2034,"tagName":2035,"description":2036,"category":1719,"status":7,"isNew":8,"lightDom":8},{"name":2038,"tagName":2039,"description":2040,"category":1719,"status":7,"isNew":8,"lightDom":8},{"name":2042,"tagName":2043,"description":2044,"category":1714,"status":7,"isNew":8,"lightDom":8},{"name":2046,"tagName":2047,"description":2048,"category":1709,"status":7,"isNew":8,"lightDom":8},{"name":2050,"tagName":2051,"description":2052,"category":1709,"status":7,"isNew":8,"lightDom":8},{"name":2054,"tagName":2055,"description":2056,"category":1674,"status":7,"isNew":8,"lightDom":8},{"name":2058,"tagName":2059,"description":2060,"category":1727,"status":7,"isNew":8,"lightDom":8,"parts":3655},[3656],{"name":2063,"tagName":2064,"description":2065},{"name":2067,"tagName":792,"description":2068,"category":1709,"status":7,"isNew":8,"lightDom":8},{"name":2070,"tagName":2071,"description":2072,"category":1719,"status":7,"isNew":8,"lightDom":8},{"name":2074,"tagName":2075,"description":2076,"category":1719,"status":7,"isNew":8,"lightDom":8},{"name":2078,"tagName":2079,"description":2080,"category":1674,"status":7,"isNew":8,"lightDom":8},{"name":2082,"tagName":2083,"description":2084,"category":9,"status":7,"isNew":8,"lightDom":8,"parts":3662},[3663,3664],{"name":2087,"tagName":2088,"description":2089},{"name":2091,"tagName":2092,"description":2093},{"name":2095,"tagName":2096,"description":2097,"category":1736,"status":7,"isNew":8,"lightDom":8},{"name":2099,"tagName":2100,"description":2101,"category":1952,"status":7,"isNew":8,"lightDom":8,"parts":3667},[3668],{"name":2104,"tagName":2105,"description":2106},{"name":2108,"tagName":2109,"description":2110,"category":1709,"status":7,"isNew":8,"lightDom":8},{"name":2112,"tagName":2113,"description":2114,"category":1709,"status":7,"isNew":8,"lightDom":8},{"name":2116,"tagName":2117,"description":2118,"category":1719,"status":7,"isNew":8,"lightDom":8,"parts":3672},[3673],{"name":2121,"tagName":2122,"description":2123},{"name":2125,"tagName":2126,"description":2127,"category":1709,"status":7,"isNew":8,"lightDom":8},{"name":2129,"tagName":2130,"description":2131,"category":1800,"status":7,"isNew":8,"lightDom":8},{"name":2133,"tagName":2134,"description":2135,"category":1674,"status":7,"isNew":8,"lightDom":8},{"name":2137,"tagName":2138,"description":2139,"category":1952,"status":7,"isNew":8,"lightDom":8},{"name":2141,"tagName":223,"description":2142,"category":1952,"status":7,"isNew":8,"lightDom":8},{"hasPlayground":17,"stories":3680},[3681,3682,3683,3684,3685,3686,3687],{"id":1648,"name":799,"exportName":799},{"id":1650,"name":1651,"exportName":1651,"html":1652},{"id":1654,"name":877,"exportName":877,"html":1655},{"id":1657,"name":855,"exportName":855,"html":1658},{"id":1660,"name":1661,"exportName":901,"html":1662},{"id":1664,"name":911,"exportName":911,"html":1665},{"id":1667,"name":926,"exportName":926,"html":1668},{"components":3689,"css":3692,"themes":3695},{"url":3690,"version":3691},"https://nordcdn.net/ds/components/4.26.2/index.js","4.26.2",{"url":3693,"version":3694},"https://nordcdn.net/ds/css/5.1.0/nord.min.css","5.1.0",{"nord":3696,"nordDark":3698,"vet":3700,"vetDark":3702},{"url":3697},"https://nordcdn.net/ds/themes/9.0.9/nord.css",{"url":3699},"https://nordcdn.net/ds/themes/9.0.9/nord-dark.css",{"url":3701},"https://nordcdn.net/ds/themes/9.0.9/vet.css",{"url":3703},"https://nordcdn.net/ds/themes/9.0.9/vet-dark.css",1782988345007]