[{"data":1,"prerenderedAt":3494},["ShallowReactive",2],{"component-meta-combobox":3,"components-combobox":193,"component-docs-combobox":697,"component-stories-tabs-combobox":1384,"$fntEwaC_vExaUIA5o0zRa9aAB0NaVm3PY0tsQN1i4S1g":1489,"$fftzqO3QrAjxB2qDH4BOh8gBnvtpXboO68ISRYA6J_DY":1962,"nav-component-doc-meta":2802,"$fEjZpFH0sX5lf9r5DqHjpE5W7CJ1Rj0Oiu25ygAOvmSk":2931,"$f52fdop2OmMiCsTBuilu9s6qyoSf9zaocNujyaSR-le0":3259,"component-parts-combobox":3285,"$fxNFHl6oAEqYICBlbY7Kf5FoxQ8MHHF92LCha9vCI7C0":3319,"edit-url-/components/combobox":2805,"example-stories-combobox":3452,"$fsnSGTjxJbwbyeIKGKRLM1aZyvHCO750tb-yYxbPAr8k":3478},{"name":4,"tagName":5,"description":6,"status":7,"isNew":8,"category":9,"lightDom":10,"properties":11,"slots":128,"events":135,"cssProperties":156,"stateAttributes":163,"methods":170,"dependencies":189},"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 \u003Ca href=\"/components/select/\">Select\u003C/a>\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 \u003Ca href=\"/components/field/\">Field\u003C/a> to give it a label, hint and error\nmessage, the same way you would a native input.\n\nThe committed \u003Ccode>value\u003C/code> is an option's \u003Ccode>value\u003C/code> (or an array of them with\n\u003Ccode>multiple\u003C/code>); 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 \u003Ca href=\"/components/autocomplete/\">Autocomplete\u003C/a> instead.","ready",false,"form","true",[12,17,23,26,29,34,39,42,46,50,54,57,60,64,67,70,73,76,81,86,92,97,100,104,107,111,114,117,121,125],{"name":13,"attribute":13,"type":14,"default":15,"description":16,"fieldRelated":8},"value","string","''","The value of the combobox. A single string when \u003Ccode>multiple\u003C/code> is \u003Ccode>false\u003C/code>,\nor an array of strings when \u003Ccode>multiple\u003C/code> is \u003Ccode>true\u003C/code>.",{"name":18,"attribute":18,"type":19,"default":20,"description":21,"reflects":22,"fieldRelated":8},"multiple","boolean","false","Allows selecting more than one option. Selected options are shown as\nremovable chips and the listbox stays open after each selection.",true,{"name":24,"attribute":24,"type":19,"default":10,"description":25,"reflects":22,"fieldRelated":8},"clearable","Shows a clear (✕) button while there is a value. Pressing it resets the\nvalue to \u003Ccode>''\u003C/code> (or \u003Ccode>[]\u003C/code> when \u003Ccode>multiple\u003C/code>), then fires \u003Ccode>clear\u003C/code> and \u003Ccode>change\u003C/code>.\nDefaults to \u003Ccode>true\u003C/code>.\n\nThis prop only toggles the button. A single-select value can always be\ncleared by deleting the input text, regardless of this prop (Base UI\nparity).",{"name":27,"attribute":27,"type":19,"default":20,"description":28,"reflects":22,"fieldRelated":8},"creatable","Offers a \"Create\" affordance when the query does not exactly match an\nexisting option. Choosing it (click or Enter) adds the typed value as an\noption and selects it (in \u003Ccode>multiple\u003C/code> mode it is appended as a chip), and\nfires a cancelable \u003Ccode>create\u003C/code> event. Call \u003Ccode>event.preventDefault()\u003C/code> to opt out\nand handle creation yourself (e.g. to map the value to a different \u003Ccode>value\u003C/code>).",{"name":30,"attribute":30,"type":31,"default":32,"description":33,"reflects":22,"fieldRelated":8},"size","'s' | 'm' | 'l'","'m'","The size of the component.",{"name":35,"attribute":35,"type":36,"default":37,"description":38,"fieldRelated":8},"autocomplete","AutocompleteAttribute","'off'","Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",{"name":40,"attribute":40,"type":14,"default":15,"description":41,"reflects":22,"fieldRelated":22},"label","Label for the control. Ignored when the control is wrapped in a\n\u003Ccode><nord-field>\u003C/code>, which provides the label via \u003Ccode><nord-field-label>\u003C/code>.",{"name":43,"attribute":43,"type":44,"description":45,"reflects":22,"fieldRelated":22},"hint","string | undefined","Optional hint text shown with the control. Ignored inside a \u003Ccode><nord-field>\u003C/code>,\nwhich provides it via \u003Ccode><nord-field-description>\u003C/code>.",{"name":47,"attribute":48,"type":19,"default":20,"description":49,"reflects":22,"fieldRelated":22},"hintBelow","hint-below","Renders the hint below the control and any error instead of below the label.",{"name":51,"attribute":52,"type":19,"default":20,"description":53,"reflects":22,"fieldRelated":22},"hideLabel","hide-label","Visually hide the label, but still expose it to assistive technologies.",{"name":55,"attribute":55,"type":44,"description":56,"reflects":22,"fieldRelated":22},"error","Optional error shown with the control. Ignored inside a \u003Ccode><nord-field>\u003C/code>,\nwhich provides it via \u003Ccode><nord-field-error>\u003C/code>.",{"name":58,"attribute":58,"type":19,"default":20,"description":59,"reflects":22,"fieldRelated":8},"required","Determines whether the control is required or not.\nA required control is announced as such to assistive technology and, inside\na \u003Ccode><nord-field>\u003C/code>, drives the required indicator on the \u003Ccode><nord-field-label>\u003C/code>.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",{"name":61,"attribute":62,"type":19,"default":20,"description":63,"reflects":22,"fieldRelated":22},"hideRequired","hide-required","Visually hide the required indicator, but still expose the required state\nto assistive technologies.",{"name":65,"attribute":65,"type":19,"default":20,"description":66,"reflects":22,"fieldRelated":8},"disabled","Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",{"name":68,"attribute":68,"type":44,"description":69,"reflects":22,"fieldRelated":8},"name","The name of the form component.",{"name":9,"attribute":9,"type":71,"description":72,"fieldRelated":8},"HTMLFormElement | null","Gets the form, if any, associated with the form element.\nThe setter accepts a string, which is the id of the form.",{"name":74,"attribute":74,"type":19,"default":20,"description":75,"reflects":22,"fieldRelated":8},"open","Controls whether the component is open or not.",{"name":77,"attribute":77,"type":78,"default":79,"description":80,"reflects":22,"fieldRelated":8},"align","'start' | 'end'","'start'","Set the alignment in relation to the toggle (or anchor) depending on the position.\n\u003Ccode>start\u003C/code> will align it to the left of the toggle (or anchor).\n\u003Ccode>end\u003C/code> will align it to the right of the toggle (or anchor).\nSetting the \u003Ccode>position\u003C/code> to \u003Ccode>inline-start\u003C/code> or \u003Ccode>inline-end\u003C/code> will switch\n\u003Ccode>start\u003C/code> and \u003Ccode>end\u003C/code> to the top and bottom respectively.",{"name":82,"attribute":82,"type":83,"default":84,"description":85,"reflects":22,"fieldRelated":8},"position","'block-end' | 'block-start' | 'inline-start' | 'inline-end' | 'auto'","'block-end'","Set the position in relation to the toggle (or anchor).\nOptions follow logical properties.\n\u003Ccode>block-start\u003C/code> and \u003Ccode>block-end\u003C/code> referring to top and bottom respectively,\n\u003Ccode>inline-start\u003C/code> and \u003Ccode>inline-end\u003C/code> referring to left and right respectively.\nYou can also set it to \u003Ccode>auto\u003C/code> for automatic positioning depending on\nwhich side has the most space available.",{"name":87,"attribute":88,"type":89,"default":90,"description":91,"reflects":22,"fieldRelated":8},"sideOffset","side-offset","number","8","Distance in pixels from the toggle (or anchor) along the main axis — the\ngap between the floating element and the side it opens against. Fed into\nFloating UI's \u003Ccode>offset\u003C/code> middleware as \u003Ccode>mainAxis\u003C/code>. Defaults to \u003Ccode>8\u003C/code>.",{"name":93,"attribute":94,"type":89,"default":95,"description":96,"reflects":22,"fieldRelated":8},"alignOffset","align-offset","0","Offset in pixels along the alignment axis — slides the floating element\ntoward the \u003Ccode>start\u003C/code> or \u003Ccode>end\u003C/code> of the toggle (or anchor). Fed into Floating\nUI's \u003Ccode>offset\u003C/code> middleware as \u003Ccode>alignmentAxis\u003C/code>. Defaults to \u003Ccode>0\u003C/code>.",{"name":98,"attribute":98,"type":44,"description":99,"reflects":22,"fieldRelated":8},"placeholder","Placeholder text to display within the input.",{"name":101,"attribute":102,"type":19,"default":20,"description":103,"reflects":22,"fieldRelated":8},"externalFiltering","external-filtering","Use external filtering mode. When set to \u003Ccode>true\u003C/code>, the component will not\nperform internal text-based filtering and expects the consumer to update\nthe \u003Ccode>options\u003C/code> in response to the \u003Ccode>input\u003C/code> event.",{"name":105,"attribute":105,"type":19,"default":20,"description":106,"reflects":22,"fieldRelated":8},"loading","Shows a spinner in the control and listbox while asynchronous results are\nloading. Pair with \u003Ccode>external-filtering\u003C/code> for async search.",{"name":108,"attribute":109,"type":19,"default":20,"description":110,"reflects":22,"fieldRelated":8},"autoHighlight","auto-highlight","Highlights the first option after filtering so pressing Enter selects it.",{"name":112,"attribute":112,"type":19,"default":20,"description":113,"reflects":22,"fieldRelated":8},"invalid","Marks the control as invalid, applying error styling and setting\n\u003Ccode>aria-invalid\u003C/code> on the input.",{"name":115,"attribute":115,"type":19,"default":20,"description":116,"reflects":22,"fieldRelated":8},"readonly","Marks the control read-only: the value stays visible, focusable and\nsubmitted with the form, but the listbox can't be opened and the value can't\nbe changed (no typing, navigation, selection or clearing). Unlike \u003Ccode>disabled\u003C/code>,\na read-only control still participates in form submission.",{"name":118,"attribute":119,"type":19,"default":10,"description":120,"reflects":22,"fieldRelated":8},"openOnFocus","open-on-focus","Whether focusing or clicking into the input opens the listbox. Defaults to\n\u003Ccode>true\u003C/code>. Set to \u003Ccode>false\u003C/code> to only open on typing or a trigger (chevron) click.",{"name":122,"attribute":123,"type":44,"description":124,"reflects":22,"fieldRelated":8},"noResultsText","no-results-text","Message shown when no options match the query. Defaults to \"No items found.\".",{"name":126,"attribute":126,"type":19,"default":20,"description":127,"reflects":22,"fieldRelated":8},"virtualized","Virtualizes (windows) the option list so only the rows in view are rendered,\nkeeping very large lists (thousands of options) fast. Rows are assumed to be a\nuniform height, which is measured from the first option. Virtualization is\nskipped for grouped lists, whose labels and separators break that assumption —\ngrouped lists are expected to be short and curated.",[129,132],{"name":130,"description":131},"start","Optional slot used to place an icon or prefix at the start of the control.",{"name":133,"description":134},"end","Optional slot used to place an icon or suffix at the end of the control.",[136,140,143,145,148,152],{"name":137,"type":138,"description":139},"change","NordEvent","Dispatched when the committed value changes via user interaction.",{"name":141,"type":138,"description":142},"input","Dispatched as the user types into the search input.",{"name":74,"type":138,"description":144},"Dispatched when the listbox is opened.",{"name":146,"type":138,"description":147},"close","Dispatched when the listbox is closed.",{"name":149,"type":150,"description":151},"clear","ComboboxClearEvent","Dispatched when the value is cleared via the clear button or \u003Ccode>clear()\u003C/code>.",{"name":153,"type":154,"description":155},"create","ComboboxCreateEvent","Dispatched when the user chooses the \"Create\" affordance in a \u003Ccode>creatable\u003C/code> combobox.",[157,160],{"name":158,"description":159},"--n-combobox-list-inline-size","Controls the inline size, or width, of the dropdown list. Defaults to the width of the combobox control.",{"name":161,"description":162},"--n-combobox-block-size","Controls the block size, or height, of the control. The medium default is \u003Ccode>var(--n-space-xl)\u003C/code>; the s and l sizes scale from it.",[164,167],{"name":165,"description":166},"data-invalid","Present while the control is invalid (mirrors the \u003Ccode>invalid\u003C/code> property). Style hook for the whole control.",{"name":168,"description":169},"data-focused","Present while the control has focus. Style hook for focus-within treatments.",[171,176,181],{"name":172,"signature":173,"parameters":174,"description":175},"show","show() => void",[],"Show the listbox programmatically.",{"name":177,"signature":178,"parameters":179,"description":180},"hide","hide() => void",[],"Hide the listbox programmatically.",{"name":182,"signature":183,"parameters":184,"description":188},"focus","focus(options?: FocusOptions) => void",[185],{"name":186,"type":187,"optional":22},"options","FocusOptions","Focus the control's input.",[190,191,192],"icon","kbd","tag",{"id":194,"title":195,"body":196,"description":238,"extension":691,"meta":692,"navigation":22,"path":693,"seo":694,"stem":695,"__hash__":696},"componentUsage/components/combobox/readme.md","Readme",{"type":197,"value":198,"toc":683},"minimark",[199,204,229,232,286,289,392,398,461,464,485,490,502,519,523,541,579,586,637,679],[200,201,203],"h2",{"id":202},"usage","Usage",[205,206,207,208,212,213,218,219,223,224,228],"p",{},"Combobox is a ",[209,210,211],"strong",{},"control only"," — it has no built-in label, hint or error. Pair it with a ",[214,215,217],"a",{"href":216},"/components/field/","Field"," to give it a label, helper text and an error message, exactly like a native input. Connect the ",[214,220,222],{"href":221},"/components/field-label/","Field Label"," to the combobox with the ",[225,226,227],"code",{},"for"," attribute so it gets an accessible name and click-to-focus.",[205,230,231],{},"Import the combobox and the Field parts you need — each import registers its custom element:",[233,234,239],"pre",{"className":235,"code":236,"language":237,"meta":238,"style":238},"language-js shiki shiki-themes github-light github-dark","import '@nordhealth/components/lib/Combobox'\nimport '@nordhealth/components/lib/Field'\nimport '@nordhealth/components/lib/FieldLabel'\nimport '@nordhealth/components/lib/FieldDescription'\nimport '@nordhealth/components/lib/FieldError'\n","js","",[225,240,241,254,262,270,278],{"__ignoreMap":238},[242,243,246,250],"span",{"class":244,"line":245},"line",1,[242,247,249],{"class":248},"szBVR","import",[242,251,253],{"class":252},"sZZnC"," '@nordhealth/components/lib/Combobox'\n",[242,255,257,259],{"class":244,"line":256},2,[242,258,249],{"class":248},[242,260,261],{"class":252}," '@nordhealth/components/lib/Field'\n",[242,263,265,267],{"class":244,"line":264},3,[242,266,249],{"class":248},[242,268,269],{"class":252}," '@nordhealth/components/lib/FieldLabel'\n",[242,271,273,275],{"class":244,"line":272},4,[242,274,249],{"class":248},[242,276,277],{"class":252}," '@nordhealth/components/lib/FieldDescription'\n",[242,279,281,283],{"class":244,"line":280},5,[242,282,249],{"class":248},[242,284,285],{"class":252}," '@nordhealth/components/lib/FieldError'\n",[205,287,288],{},"Then compose the Field around the combobox:",[233,290,294],{"className":291,"code":292,"language":293,"meta":238,"style":238},"language-html shiki shiki-themes github-light github-dark","\u003Cnord-field>\n  \u003Cnord-field-label for=\"framework\">Framework\u003C/nord-field-label>\n  \u003Cnord-combobox id=\"framework\" placeholder=\"Select a framework\">\u003C/nord-combobox>\n  \u003Cnord-field-description>Choose the framework for your project.\u003C/nord-field-description>\n  \u003C!-- show a Field Error and mark the Field invalid instead, when validation fails -->\n\u003C/nord-field>\n","html",[225,295,296,309,334,362,376,382],{"__ignoreMap":238},[242,297,298,302,306],{"class":244,"line":245},[242,299,301],{"class":300},"sVt8B","\u003C",[242,303,305],{"class":304},"s9eBZ","nord-field",[242,307,308],{"class":300},">\n",[242,310,311,314,317,321,324,327,330,332],{"class":244,"line":256},[242,312,313],{"class":300},"  \u003C",[242,315,316],{"class":304},"nord-field-label",[242,318,320],{"class":319},"sScJk"," for",[242,322,323],{"class":300},"=",[242,325,326],{"class":252},"\"framework\"",[242,328,329],{"class":300},">Framework\u003C/",[242,331,316],{"class":304},[242,333,308],{"class":300},[242,335,336,338,340,343,345,347,350,352,355,358,360],{"class":244,"line":264},[242,337,313],{"class":300},[242,339,5],{"class":304},[242,341,342],{"class":319}," id",[242,344,323],{"class":300},[242,346,326],{"class":252},[242,348,349],{"class":319}," placeholder",[242,351,323],{"class":300},[242,353,354],{"class":252},"\"Select a framework\"",[242,356,357],{"class":300},">\u003C/",[242,359,5],{"class":304},[242,361,308],{"class":300},[242,363,364,366,369,372,374],{"class":244,"line":272},[242,365,313],{"class":300},[242,367,368],{"class":304},"nord-field-description",[242,370,371],{"class":300},">Choose the framework for your project.\u003C/",[242,373,368],{"class":304},[242,375,308],{"class":300},[242,377,378],{"class":244,"line":280},[242,379,381],{"class":380},"sJ8bj","  \u003C!-- show a Field Error and mark the Field invalid instead, when validation fails -->\n",[242,383,385,388,390],{"class":244,"line":384},6,[242,386,387],{"class":300},"\u003C/",[242,389,305],{"class":304},[242,391,308],{"class":300},[205,393,394,395,397],{},"Provide the choices with the ",[225,396,186],{}," property — pairing it with a Field only handles labelling and layout, it doesn't change how you populate the list:",[233,399,401],{"className":235,"code":400,"language":237,"meta":238,"style":238},"document.querySelector('nord-combobox').options = [\n  { value: 'next', label: 'Next.js' },\n  { value: 'astro', label: 'Astro' },\n]\n",[225,402,403,425,442,456],{"__ignoreMap":238},[242,404,405,408,411,414,417,420,422],{"class":244,"line":245},[242,406,407],{"class":300},"document.",[242,409,410],{"class":319},"querySelector",[242,412,413],{"class":300},"(",[242,415,416],{"class":252},"'nord-combobox'",[242,418,419],{"class":300},").options ",[242,421,323],{"class":248},[242,423,424],{"class":300}," [\n",[242,426,427,430,433,436,439],{"class":244,"line":256},[242,428,429],{"class":300},"  { value: ",[242,431,432],{"class":252},"'next'",[242,434,435],{"class":300},", label: ",[242,437,438],{"class":252},"'Next.js'",[242,440,441],{"class":300}," },\n",[242,443,444,446,449,451,454],{"class":244,"line":264},[242,445,429],{"class":300},[242,447,448],{"class":252},"'astro'",[242,450,435],{"class":300},[242,452,453],{"class":252},"'Astro'",[242,455,441],{"class":300},[242,457,458],{"class":244,"line":272},[242,459,460],{"class":300},"]\n",[205,462,463],{},"Combobox renders in the light DOM, so you can style it directly with your own CSS or Tailwind utilities, and set its width on the combobox (or on its Field).",[205,465,466,467,469,470,473,474,477,478,481,482,484],{},"Use the ",[225,468,30],{}," property (",[225,471,472],{},"s",", ",[225,475,476],{},"m"," or ",[225,479,480],{},"l",", defaulting to ",[225,483,476],{},") to scale the control's height, padding and font size to match surrounding form controls.",[486,487,489],"h3",{"id":488},"select-vs-free-text-suggestions","Select vs free-text suggestions",[205,491,492,493,495,496,498,499,501],{},"The committed ",[225,494,13],{}," is an option's ",[225,497,13],{},". The input is a search/filter field whose text is discarded on commit; closing the listbox reverts the input to the selected option's label. Nothing is committed unless the user picks an option, so the value is always one of the options you provide (or an array of them with ",[225,500,18],{},").",[205,503,504,505,509,510,514,515,518],{},"If you instead need the typed text ",[506,507,508],"em",{},"itself"," to be the committed value — free-text input with the options as completion aids — use ",[214,511,513],{"href":512},"/components/autocomplete/","Autocomplete",". Autocomplete also offers ",[225,516,517],{},"inline"," ghost-text completion, where arrow-key navigation previews the highlighted option's remaining label.",[486,520,522],{"id":521},"picking-an-option-vs-creating-one","Picking an option vs creating one",[205,524,525,526,528,529,531,532,534,535,537,538,540],{},"Both ",[225,527,18],{}," and ",[225,530,27],{}," keep the ",[225,533,13],{}," made of option ",[225,536,13],{},"s — they never produce arbitrary free text (use ",[214,539,513],{"href":512}," for that):",[542,543,544,552],"ul",{},[545,546,547,551],"li",{},[209,548,549],{},[225,550,18],{}," lets users pick several options, each shown as a removable chip; the listbox stays open after every selection.",[545,553,554,558,559,562,563,565,566,569,570,572,573,575,576,578],{},[209,555,556],{},[225,557,27],{}," offers a ",[506,560,561],{},"Create"," row (hinted with a ⏎ Kbd) when the query matches no option. Choosing it fires a ",[225,564,153],{}," event so ",[209,567,568],{},"you"," add the option — the combobox never mutates ",[225,571,186],{},". With ",[225,574,18],{},", append the created option to ",[225,577,13],{}," yourself.",[205,580,581,582,585],{},"The inner input always hard-codes ",[225,583,584],{},"autocomplete=\"off\""," so browser autofill never fights the suggestion list.",[587,588,592,596],"div",{"className":589},[590,591],"n-usage","n-usage-do",[486,593,595],{"id":594},"do","Do",[542,597,598,601,613,619,630],{},[545,599,600],{},"Use when users need to pick from a long list of options and benefit from typing to filter, such as countries, timezones or frameworks.",[545,602,603,604,606,607,609,610,612],{},"Pair it with a ",[214,605,217],{"href":216}," and a ",[214,608,222],{"href":221}," connected with ",[225,611,227],{},", so it has an accessible name, helper text and an error message.",[545,614,615,616,618],{},"Use ",[225,617,18],{}," when users may legitimately pick more than one option, showing each choice as a removable chip.",[545,620,615,621,623,624,626,627,629],{},[225,622,102],{}," and update ",[225,625,186],{}," from the ",[225,628,141],{}," event when the list comes from a server or is too large to filter on the client.",[545,631,632,633,636],{},"Group related options with the ",[225,634,635],{},"group"," property to help users scan long lists.",[587,638,641,645],{"className":639},[590,640],"n-usage-dont",[486,642,644],{"id":643},"dont","Don’t",[542,646,647,655,665,672],{},[545,648,649,650,654],{},"Don’t use when there are only a handful of options and filtering adds no value, see ",[214,651,653],{"href":652},"/components/select/","Select"," instead.",[545,656,657,658,660,661,664],{},"Don’t add a Field Label without a ",[225,659,227],{}," pointing at the combobox’s ",[225,662,663],{},"id",", or the control will have no accessible name.",[545,666,667,668,654],{},"Don’t use for free-form text entry, see ",[214,669,671],{"href":670},"/components/input/","Input",[545,673,674,675,654],{},"Don’t use to trigger actions or commands, see ",[214,676,678],{"href":677},"/components/command-menu/","Command Menu",[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":238,"searchDepth":256,"depth":256,"links":684},[685],{"id":202,"depth":256,"text":203,"children":686},[687,688,689,690],{"id":488,"depth":264,"text":489},{"id":521,"depth":264,"text":522},{"id":594,"depth":264,"text":595},{"id":643,"depth":264,"text":644},"md",{},"/components/combobox/readme",{"description":238},"components/combobox/readme","l93PgGIClPBlaA1fvLsSYParM9bu-xU4MAXt-holqYg",{"id":698,"title":4,"body":699,"description":1376,"extension":691,"isNew":22,"meta":1377,"navigation":22,"path":1378,"seo":1379,"status":1380,"stem":1381,"updated":1382,"__hash__":1383},"componentDocs/component-docs/combobox.md",{"type":197,"value":700,"toc":1347},[701,703,709,733,736,762,770,775,779,785,789,792,807,818,908,913,917,923,942,951,955,959,970,978,982,1007,1011,1015,1018,1031,1034,1037,1055,1058,1062,1076,1080,1084,1093,1097,1100,1105,1108,1111,1132,1136,1140,1151,1155,1158,1163,1167,1170,1179,1182,1186,1205,1209,1213,1219,1223,1226,1232,1235,1238,1247,1251,1255,1263,1267,1271,1277,1281,1285,1293,1297,1301,1304,1307,1311,1344],[200,702,203],{"id":202},[205,704,705,706,708],{},"Combobox lets people choose one option (or several) from a list by typing to filter, then picking with the keyboard or pointer. Reach for it when a ",[214,707,653],{"href":652}," would be unwieldy because there are many options to scan.",[205,710,711,712,473,714,528,716,718,719,721,722,473,724,528,728,732],{},"Combobox renders its built-in ",[225,713,40],{},[225,715,43],{},[225,717,55],{}," on its own. Wrapped in a ",[214,720,217],{"href":216},", the Field takes over with a ",[214,723,222],{"href":221},[214,725,727],{"href":726},"/components/field-description/","Field Description",[214,729,731],{"href":730},"/components/field-error/","Field Error",", and the built-in versions step aside automatically.",[205,734,735],{},"Import the combobox; add the option parts when you author options declaratively (importing the combobox also registers them):",[233,737,739],{"className":235,"code":738,"language":237,"meta":238,"style":238},"import \"@nordhealth/components/lib/Combobox\"\nimport \"@nordhealth/components/lib/ComboboxOption\"\nimport \"@nordhealth/components/lib/ComboboxGroup\"\n",[225,740,741,748,755],{"__ignoreMap":238},[242,742,743,745],{"class":244,"line":245},[242,744,249],{"class":248},[242,746,747],{"class":252}," \"@nordhealth/components/lib/Combobox\"\n",[242,749,750,752],{"class":244,"line":256},[242,751,249],{"class":248},[242,753,754],{"class":252}," \"@nordhealth/components/lib/ComboboxOption\"\n",[242,756,757,759],{"class":244,"line":264},[242,758,249],{"class":248},[242,760,761],{"class":252}," \"@nordhealth/components/lib/ComboboxGroup\"\n",[205,763,764,765,769],{},"Options can be authored declaratively as child elements or set as a data array — see ",[214,766,768],{"href":767},"#composition","Composition",".",[205,771,772,773,769],{},"For a free-text input with suggestions (where the typed text is the value), see ",[214,774,513],{"href":512},[200,776,778],{"id":777},"standalone-or-inside-a-field","Standalone or inside a Field",[205,780,781,782,784],{},"Use the control on its own with its built-in label, hint and error, or wrap it in a ",[214,783,217],{"href":216}," — the Field then provides the labelling. Both render the same control:",[786,787],"example-tabs",{"component":788},"combobox",[200,790,768],{"id":791},"composition",[205,793,794,795,798,799,802,803,806],{},"There are two ways to supply options. Author them declaratively as children of ",[225,796,797],{},"\u003Cnord-combobox>",", like a native ",[225,800,801],{},"\u003Cselect>"," — no JavaScript required — or set the ",[225,804,805],{},".options"," property for dynamic data.",[808,809,810],"anatomy-tree",{},[233,811,816],{"className":812,"code":814,"language":815,"meta":238},[813],"language-text","Combobox\n├── ComboboxOption\n├── ComboboxOption\n└── ComboboxGroup        (optional)\n    ├── ComboboxOption\n    └── ComboboxOption\n","text",[225,817,814],{"__ignoreMap":238},[233,819,821],{"className":291,"code":820,"language":293,"meta":238,"style":238},"\u003Cnord-combobox>\n  \u003Cnord-combobox-option value=\"next\">Next.js\u003C/nord-combobox-option>\n  \u003Cnord-combobox-group label=\"Meta-frameworks\">\n    \u003Cnord-combobox-option value=\"astro\">Astro\u003C/nord-combobox-option>\n  \u003C/nord-combobox-group>\n\u003C/nord-combobox>\n",[225,822,823,831,853,870,891,900],{"__ignoreMap":238},[242,824,825,827,829],{"class":244,"line":245},[242,826,301],{"class":300},[242,828,5],{"class":304},[242,830,308],{"class":300},[242,832,833,835,838,841,843,846,849,851],{"class":244,"line":256},[242,834,313],{"class":300},[242,836,837],{"class":304},"nord-combobox-option",[242,839,840],{"class":319}," value",[242,842,323],{"class":300},[242,844,845],{"class":252},"\"next\"",[242,847,848],{"class":300},">Next.js\u003C/",[242,850,837],{"class":304},[242,852,308],{"class":300},[242,854,855,857,860,863,865,868],{"class":244,"line":264},[242,856,313],{"class":300},[242,858,859],{"class":304},"nord-combobox-group",[242,861,862],{"class":319}," label",[242,864,323],{"class":300},[242,866,867],{"class":252},"\"Meta-frameworks\"",[242,869,308],{"class":300},[242,871,872,875,877,879,881,884,887,889],{"class":244,"line":272},[242,873,874],{"class":300},"    \u003C",[242,876,837],{"class":304},[242,878,840],{"class":319},[242,880,323],{"class":300},[242,882,883],{"class":252},"\"astro\"",[242,885,886],{"class":300},">Astro\u003C/",[242,888,837],{"class":304},[242,890,308],{"class":300},[242,892,893,896,898],{"class":244,"line":280},[242,894,895],{"class":300},"  \u003C/",[242,897,859],{"class":304},[242,899,308],{"class":300},[242,901,902,904,906],{"class":244,"line":384},[242,903,387],{"class":300},[242,905,5],{"class":304},[242,907,308],{"class":300},[909,910],"example-usage",{"component":788,"name":911,"story":912},"Declarative combobox options","Declarative",[486,914,916],{"id":915},"combobox-option","Combobox Option",[205,918,919,922],{},[225,920,921],{},"\u003Cnord-combobox-option>"," declares a single option:",[542,924,925,932,937],{},[545,926,927,929,930,769],{},[225,928,13],{}," — the value submitted with the form and tracked in the combobox's ",[225,931,13],{},[545,933,934,936],{},[225,935,65],{}," — marks the option unselectable; it stays visible but is skipped during keyboard navigation.",[545,938,939,941],{},[225,940,40],{}," — text used for filtering and the accessible name. Defaults to the element's text content.",[205,943,944,945,947,948,950],{},"The option's child markup becomes the rendered row, so you can author custom items — an avatar, secondary text, an icon — without an ",[225,946,293],{}," string or a render function. Set ",[225,949,40],{}," when the content isn't plain text, so filtering and the accessible name have something to match on.",[909,952],{"component":788,"name":953,"story":954},"Combobox with declarative custom items","DeclarativeCustomItems",[486,956,958],{"id":957},"combobox-group","Combobox Group",[205,960,961,964,965,967,968,769],{},[225,962,963],{},"\u003Cnord-combobox-group label=\"…\">"," clusters the ",[225,966,921],{}," children inside it under a heading; each contained option inherits the group's ",[225,969,40],{},[808,971,972],{},[233,973,976],{"className":974,"code":975,"language":815,"meta":238},[813],"Combobox\n└── ComboboxGroup        (label)\n    ├── ComboboxOption\n    └── ComboboxOption\n",[225,977,975],{"__ignoreMap":238},[486,979,981],{"id":980},"data-driven-options","Data-driven options",[205,983,984,985,987,988,991,992,995,996,999,1000,1003,1004,1006],{},"For dynamic, async or very large (virtualized) lists, set the ",[225,986,805],{}," property — an array of ",[225,989,990],{},"{ value, label }"," objects — instead of declaring children. It's bound like any framework prop: ",[225,993,994],{},":options"," in Vue, ",[225,997,998],{},"options={}"," in React, ",[225,1001,1002],{},".options=${}"," in Lit. When ",[225,1005,805],{}," is set it takes precedence over any declarative children.",[909,1008],{"component":788,"name":1009,"story":1010},"Combobox overview","Basic",[200,1012,1014],{"id":1013},"examples","Examples",[486,1016,1017],{"id":18},"Multiple",[205,1019,1020,1021,1023,1024,1026,1027,1030],{},"Add ",[225,1022,18],{}," to select several options. Selected options appear as removable chips. Pair it with ",[225,1025,24],{}," when users need to clear all selected chips at once. Set the initial selection with the ",[225,1028,1029],{},".value"," property as an array.",[909,1032],{"component":788,"name":1033,"story":1017},"Combobox with multiple selection",[486,1035,1036],{"id":27},"Creatable",[205,1038,1020,1039,1041,1042,1045,1046,1048,1049,1052,1053,501],{},[225,1040,27],{}," to offer the typed query as a new option. When the query doesn't match an existing option, a highlighted \"Create\" row (hinted with a ⏎ Kbd) appears; selecting it ",[209,1043,1044],{},"adds the value as an option and selects it automatically"," — no JavaScript required. A ",[225,1047,153],{}," event still fires for notification; call ",[225,1050,1051],{},"event.preventDefault()"," in the handler to opt out and add the option yourself (for example, to map the typed text to a different ",[225,1054,13],{},[909,1056],{"component":788,"name":1057,"story":1036},"Creatable combobox",[486,1059,1061],{"id":1060},"async-search","Async search",[205,1063,1020,1064,1066,1067,1069,1070,1072,1073,1075],{},[225,1065,102],{}," to take over filtering yourself — listen for ",[225,1068,141],{},", fetch matches, and assign them to ",[225,1071,805],{},". Set ",[225,1074,105],{}," to show a spinner while the request is in flight. A preselected value keeps its label even before its option has loaded.",[909,1077],{"component":788,"name":1078,"story":1079},"Async combobox","Async",[486,1081,1083],{"id":1082},"async-search-multiple","Async search (multiple)",[205,1085,1086,1087,1089,1090,1092],{},"The same async pattern works with ",[225,1088,18],{},": selections become chips while typing fetches fresh matches. Use ",[225,1091,24],{}," to offer one-step clearing for the selected chips.",[909,1094],{"component":788,"name":1095,"story":1096},"Async combobox with multiple selection","AsyncMultiple",[486,1098,1099],{"id":126},"Virtualized",[205,1101,1020,1102,1104],{},[225,1103,126],{}," for very large lists. The combobox renders only the options in view (windowing), so a list of thousands stays fast. Rows are assumed to be a uniform height; virtualization is skipped for grouped lists.",[909,1106],{"component":788,"name":1107,"story":1099},"Virtualized combobox",[486,1109,1110],{"id":24},"Clearable",[205,1112,1113,1114,1116,1117,1119,1120,1123,1124,1127,1128,1131],{},"A clear (✕) button is shown by default whenever there is a value. Set the ",[225,1115,24],{}," property to ",[225,1118,20],{}," (e.g. ",[225,1121,1122],{},".clearable = false",", or ",[225,1125,1126],{},":clearable=\"false\""," / ",[225,1129,1130],{},"clearable={false}"," in a framework) to hide it. The button only controls that affordance — a single-select value can always be cleared by deleting the input text.",[909,1133],{"component":788,"name":1134,"story":1135},"Combobox with clear button","ClearButton",[486,1137,1139],{"id":1138},"grouped-options","Grouped options",[205,1141,1142,1143,1145,1146,1148,1149,769],{},"Cluster related options under a heading: wrap declarative options in a ",[225,1144,963],{},", or give each ",[225,1147,805],{}," entry a ",[225,1150,635],{},[909,1152],{"component":788,"name":1153,"story":1154},"Combobox with grouped options","Groups",[486,1156,1157],{"id":109},"Auto highlight",[205,1159,1020,1160,1162],{},[225,1161,109],{}," to highlight the first matching option as the user types, so it can be committed by pressing Enter.",[909,1164],{"component":788,"name":1165,"story":1166},"Combobox with auto highlight","AutoHighlight",[486,1168,1169],{"id":112},"Invalid",[205,1171,1172,1173,1175,1176,1178],{},"Mark the surrounding ",[214,1174,217],{"href":216}," as ",[225,1177,112],{}," to show the error state.",[909,1180],{"component":788,"name":1181,"story":1169},"Invalid combobox",[486,1183,1185],{"id":1184},"custom-items","Custom items",[205,1187,1188,1189,1191,1192,1194,1195,1197,1198,1201,1202,1204],{},"For declarative options, author custom content as markup inside ",[225,1190,921],{}," (see ",[214,1193,768],{"href":767},"). For data-driven ",[225,1196,805],{},", provide a ",[225,1199,1200],{},".renderOption"," function (or a per-option ",[225,1203,293],{}," string) to render richer rows.",[909,1206],{"component":788,"name":1207,"story":1208},"Combobox with custom items","CustomItems",[486,1210,1212],{"id":1211},"disabled-items","Disabled items",[205,1214,1215,1216,1218],{},"Mark individual options with ",[225,1217,65],{}," to keep them visible but unselectable. They are skipped during keyboard navigation.",[909,1220],{"component":788,"name":1221,"story":1222},"Combobox with disabled items","DisabledItems",[486,1224,1225],{"id":115},"Readonly",[205,1227,1228,1229,1231],{},"Set ",[225,1230,115],{}," to show the current value while preventing edits. The control stays focusable so its value can still be read, but the list cannot be opened.",[909,1233],{"component":788,"name":1234,"story":1225},"Readonly combobox",[486,1236,1237],{"id":119},"Open on focus",[205,1239,1240,1241,1243,1244,1246],{},"By default the list opens when the combobox receives focus. Set ",[225,1242,119],{}," to ",[225,1245,20],{}," to require a keystroke or click before the list appears.",[909,1248],{"component":788,"name":1249,"story":1250},"Combobox without open on focus","OpenOnFocusOff",[486,1252,1254],{"id":1253},"input-group","Input group",[205,1256,1257,1258,1262],{},"Combobox composes inside an ",[214,1259,1261],{"href":1260},"/components/input-group/","Input Group"," so you can pair it with buttons or other controls as a single unit.",[909,1264],{"component":788,"name":1265,"story":1266},"Combobox in an input group","InputGroup",[486,1268,1270],{"id":1269},"preselected-value","Preselected value",[205,1272,1273,1274,1276],{},"Set the ",[225,1275,1029],{}," property to preselect an option. The combobox shows its label on load, even before the user opens the list.",[909,1278],{"component":788,"name":1279,"story":1280},"Combobox with a preselected value","Popup",[486,1282,1284],{"id":1283},"inside-a-dialog","Inside a dialog",[205,1286,1287,1288,1292],{},"Combobox positions its list correctly when used inside a ",[214,1289,1291],{"href":1290},"/components/modal/","Modal"," or other dialog, so the options are never clipped by the dialog bounds.",[909,1294],{"component":788,"name":1295,"story":1296},"Combobox inside a dialog","InsideDialog",[486,1298,1300],{"id":1299},"rtl","RTL",[205,1302,1303],{},"Combobox follows the document or container direction. Toggle the direction to see the layout mirror.",[909,1305],{"component":788,"name":1306,"story":1300,":dir-toggle":10},"Right-to-left combobox",[200,1308,1310],{"id":1309},"accessibility","Accessibility",[542,1312,1313,1328,1335,1338],{},[545,1314,1315,1316,1318,1319,1321,1322,1324,1325,1327],{},"Give Combobox an accessible name with its built-in ",[225,1317,40],{},", or — inside a ",[214,1320,217],{"href":216}," — a ",[214,1323,222],{"href":221},"; use ",[214,1326,731],{"href":730}," for validation messages.",[545,1329,1330,1331,1334],{},"The list, active option and selection state are wired up with ARIA, and the highlighted option is tracked with ",[225,1332,1333],{},"aria-activedescendant"," so screen reader users hear the current choice while filtering.",[545,1336,1337],{},"The full keyboard pattern is supported: type to filter, move through options with the arrow keys, commit with Enter, and dismiss the list with Escape.",[545,1339,1340,1341,1343],{},"When ",[225,1342,24],{}," is set, the clear button has an accessible label so its purpose is announced.",[680,1345,1346],{},"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}",{"title":238,"searchDepth":256,"depth":256,"links":1348},[1349,1350,1351,1356,1375],{"id":202,"depth":256,"text":203},{"id":777,"depth":256,"text":778},{"id":791,"depth":256,"text":768,"children":1352},[1353,1354,1355],{"id":915,"depth":264,"text":916},{"id":957,"depth":264,"text":958},{"id":980,"depth":264,"text":981},{"id":1013,"depth":256,"text":1014,"children":1357},[1358,1359,1360,1361,1362,1363,1364,1365,1366,1367,1368,1369,1370,1371,1372,1373,1374],{"id":18,"depth":264,"text":1017},{"id":27,"depth":264,"text":1036},{"id":1060,"depth":264,"text":1061},{"id":1082,"depth":264,"text":1083},{"id":126,"depth":264,"text":1099},{"id":24,"depth":264,"text":1110},{"id":1138,"depth":264,"text":1139},{"id":109,"depth":264,"text":1157},{"id":112,"depth":264,"text":1169},{"id":1184,"depth":264,"text":1185},{"id":1211,"depth":264,"text":1212},{"id":115,"depth":264,"text":1225},{"id":119,"depth":264,"text":1237},{"id":1253,"depth":264,"text":1254},{"id":1269,"depth":264,"text":1270},{"id":1283,"depth":264,"text":1284},{"id":1299,"depth":264,"text":1300},{"id":1309,"depth":256,"text":1310},"Lets users choose one or several options from a list by typing to filter, then picking with the keyboard or pointer.",{},"/component-docs/combobox",{"title":4,"description":1376},"alpha","component-docs/combobox","2026-06-30","IJj2uPlzK0fqqsiy8e-In6Av0cponqsRnSyJJy97n2U",{"hasPlayground":22,"stories":1385},[1386,1390,1396,1400,1404,1407,1410,1414,1418,1423,1427,1432,1437,1441,1445,1450,1454,1459,1464,1469,1474,1478,1482,1486],{"id":1387,"name":1010,"exportName":1010,"html":1388,"js":1389},"components-combobox--basic","\u003Cnord-field class=\"n:container-xxs\">\n      \u003Cnord-field-label for=\"cb-basic\">Framework\u003C/nord-field-label>\n      \u003Cnord-combobox id=\"cb-basic\" placeholder=\"Select a framework\">\u003C/nord-combobox>\n    \u003C/nord-field>","document.getElementById(\"cb-basic\").options = [\n  { value: \"Next.js\", label: \"Next.js\" },\n  { value: \"SvelteKit\", label: \"SvelteKit\" },\n  { value: \"Nuxt.js\", label: \"Nuxt.js\" },\n  { value: \"Remix\", label: \"Remix\" },\n  { value: \"Astro\", label: \"Astro\" },\n]",{"id":1391,"name":1392,"exportName":1393,"html":1394,"js":1395},"components-combobox--with-start-end-slots","With Start End Slots","WithStartEndSlots","\u003Cnord-field class=\"n:container-xxs\">\n      \u003Cnord-field-label for=\"cb-slots\">Framework\u003C/nord-field-label>\n      \u003Cnord-combobox id=\"cb-slots\" placeholder=\"Select a framework\">\n        \u003Cnord-icon slot=\"start\" name=\"navigation-search\">\u003C/nord-icon>\n      \u003C/nord-combobox>\n    \u003C/nord-field>","document.getElementById(\"cb-slots\").options = [\n  { value: \"Next.js\", label: \"Next.js\" },\n  { value: \"SvelteKit\", label: \"SvelteKit\" },\n  { value: \"Nuxt.js\", label: \"Nuxt.js\" },\n  { value: \"Remix\", label: \"Remix\" },\n  { value: \"Astro\", label: \"Astro\" },\n]",{"id":1397,"name":1017,"exportName":1017,"html":1398,"js":1399},"components-combobox--multiple","\u003Cnord-field class=\"n:container-xxs\">\n      \u003Cnord-field-label for=\"cb-multiple\">Frameworks\u003C/nord-field-label>\n      \u003Cnord-combobox id=\"cb-multiple\" placeholder=\"Select frameworks\" multiple clearable>\u003C/nord-combobox>\n    \u003C/nord-field>","const combobox = document.getElementById(\"cb-multiple\")\ncombobox.options = [\n  { value: \"Next.js\", label: \"Next.js\" },\n  { value: \"SvelteKit\", label: \"SvelteKit\" },\n  { value: \"Nuxt.js\", label: \"Nuxt.js\" },\n  { value: \"Remix\", label: \"Remix\" },\n  { value: \"Astro\", label: \"Astro\" },\n]\ncombobox.value = [\"Next.js\"]",{"id":1401,"name":1154,"exportName":1154,"html":1402,"js":1403},"components-combobox--groups","\u003Cnord-field class=\"n:container-xxs\">\n      \u003Cnord-field-label for=\"cb-groups\">Timezone\u003C/nord-field-label>\n      \u003Cnord-combobox\n        id=\"cb-groups\"\n        placeholder=\"Select a timezone\"\n      >\u003C/nord-combobox>\n    \u003C/nord-field>","document.getElementById(\"cb-groups\").options = [\n  { value: \"(GMT-5) New York\", label: \"(GMT-5) New York\", group: \"Americas\" },\n  { value: \"(GMT-8) Los Angeles\", label: \"(GMT-8) Los Angeles\", group: \"Americas\" },\n  { value: \"(GMT-3) São Paulo\", label: \"(GMT-3) São Paulo\", group: \"Americas\" },\n  { value: \"(GMT+0) London\", label: \"(GMT+0) London\", group: \"Europe\" },\n  { value: \"(GMT+1) Paris\", label: \"(GMT+1) Paris\", group: \"Europe\" },\n  { value: \"(GMT+1) Berlin\", label: \"(GMT+1) Berlin\", group: \"Europe\" },\n  { value: \"(GMT+9) Tokyo\", label: \"(GMT+9) Tokyo\", group: \"Asia/Pacific\" },\n  { value: \"(GMT+8) Singapore\", label: \"(GMT+8) Singapore\", group: \"Asia/Pacific\" },\n]",{"id":1405,"name":1036,"exportName":1036,"html":1406},"components-combobox--creatable","\u003Cnord-field class=\"n:container-xxs\">\n      \u003Cnord-field-label for=\"cb-creatable\">Tag\u003C/nord-field-label>\n      \u003Cnord-combobox id=\"cb-creatable\" placeholder=\"Type to create a tag\" creatable>\n        \u003Cnord-combobox-option value=\"bug\">bug\u003C/nord-combobox-option>\n        \u003Cnord-combobox-option value=\"feature\">feature\u003C/nord-combobox-option>\n        \u003Cnord-combobox-option value=\"docs\">docs\u003C/nord-combobox-option>\n      \u003C/nord-combobox>\n      \u003Cnord-field-description>Type a new tag, then press Enter to create it\u003C/nord-field-description>\n    \u003C/nord-field>",{"id":1408,"name":912,"exportName":912,"html":1409},"components-combobox--declarative","\u003Cnord-stack>\n      \u003Cnord-field class=\"n:container-xxs\">\n        \u003Cnord-field-label for=\"cb-decl\">Framework\u003C/nord-field-label>\n        \u003Cnord-combobox id=\"cb-decl\" placeholder=\"Select a framework\">\n          \u003Cnord-combobox-option value=\"next\">Next.js\u003C/nord-combobox-option>\n          \u003Cnord-combobox-option value=\"sveltekit\">SvelteKit\u003C/nord-combobox-option>\n          \u003Cnord-combobox-option value=\"nuxt\">Nuxt.js\u003C/nord-combobox-option>\n          \u003Cnord-combobox-option value=\"astro\">Astro\u003C/nord-combobox-option>\n        \u003C/nord-combobox>\n      \u003C/nord-field>\n\n      \u003Cnord-field class=\"n:container-xxs\">\n        \u003Cnord-field-label for=\"cb-decl-groups\">Timezone\u003C/nord-field-label>\n        \u003Cnord-combobox id=\"cb-decl-groups\" placeholder=\"Select a timezone\">\n          \u003Cnord-combobox-group label=\"Americas\">\n            \u003Cnord-combobox-option value=\"nyc\">(GMT-5) New York\u003C/nord-combobox-option>\n            \u003Cnord-combobox-option value=\"la\">(GMT-8) Los Angeles\u003C/nord-combobox-option>\n          \u003C/nord-combobox-group>\n          \u003Cnord-combobox-group label=\"Europe\">\n            \u003Cnord-combobox-option value=\"london\">(GMT+0) London\u003C/nord-combobox-option>\n            \u003Cnord-combobox-option value=\"paris\">(GMT+1) Paris\u003C/nord-combobox-option>\n          \u003C/nord-combobox-group>\n        \u003C/nord-combobox>\n      \u003C/nord-field>\n    \u003C/nord-stack>",{"id":1411,"name":1412,"exportName":954,"html":1413},"components-combobox--declarative-custom-items","Declarative Custom Items","\u003Cnord-field class=\"n:container-xxs\">\n      \u003Cnord-field-label for=\"cb-decl-custom\">Assignee\u003C/nord-field-label>\n      \u003Cnord-combobox id=\"cb-decl-custom\" placeholder=\"Search people\">\n        \u003Cnord-combobox-option value=\"ada\" label=\"Ada Lovelace\">\n          \u003Cspan class=\"n:flex n:items-center n:gap-s\">\n            \u003Cnord-avatar size=\"s\" name=\"Ada Lovelace\">\u003C/nord-avatar> Ada Lovelace\n          \u003C/span>\n        \u003C/nord-combobox-option>\n        \u003Cnord-combobox-option value=\"grace\" label=\"Grace Hopper\">\n          \u003Cspan class=\"n:flex n:items-center n:gap-s\">\n            \u003Cnord-avatar size=\"s\" name=\"Grace Hopper\">\u003C/nord-avatar> Grace Hopper\n          \u003C/span>\n        \u003C/nord-combobox-option>\n      \u003C/nord-combobox>\n    \u003C/nord-field>",{"id":1415,"name":1079,"exportName":1079,"html":1416,"js":1417},"components-combobox--async","\u003Cnord-field class=\"n:inline-[20rem] n:max-inline-full\">\n      \u003Cnord-field-label for=\"cb-async\">User\u003C/nord-field-label>\n      \u003Cnord-combobox\n        id=\"cb-async\"\n        placeholder=\"Search users\"\n        external-filtering\n        clearable\n        value=\"u4\"\n      >\u003C/nord-combobox>\n    \u003C/nord-field>","const combobox = document.getElementById(\"cb-async\")\n\n// The full user list your async search resolves against.\nconst users = [\n  { value: \"u1\", label: \"Ada Lovelace\" },\n  { value: \"u2\", label: \"Grace Hopper\" },\n  { value: \"u3\", label: \"Alan Turing\" },\n  { value: \"u4\", label: \"Katherine Johnson\" },\n  { value: \"u5\", label: \"Margaret Hamilton\" },\n  { value: \"u6\", label: \"Dorothy Vaughan\" },\n]\n\n// Seed the preselected option so its label shows before any search runs.\ncombobox.options = [{ value: \"u4\", label: \"Katherine Johnson\" }]\ncombobox.value = \"u4\"\n\n// Wire up your own async search on \"input\" (fetch, set .loading / .options).\ncombobox.addEventListener(\"input\", () => {\n  const query = combobox.querySelector(\"input\").value.toLowerCase()\n  combobox.loading = true\n  combobox.options = []\n  setTimeout(() => {\n    combobox.options = users.filter((user) => user.label.toLowerCase().includes(query))\n    combobox.loading = false\n  }, 600)\n})",{"id":1419,"name":1420,"exportName":1096,"html":1421,"js":1422},"components-combobox--async-multiple","Async Multiple","\u003Cnord-field class=\"n:inline-[20rem] n:max-inline-full\">\n      \u003Cnord-field-label for=\"cb-async-multi\">Users\u003C/nord-field-label>\n      \u003Cnord-combobox\n        id=\"cb-async-multi\"\n        placeholder=\"Search users\"\n        multiple\n        external-filtering\n        clearable\n      >\u003C/nord-combobox>\n    \u003C/nord-field>","const combobox = document.getElementById(\"cb-async-multi\")\n\n// The full user list your async search resolves against.\nconst users = [\n  { value: \"u1\", label: \"Ada Lovelace\" },\n  { value: \"u2\", label: \"Grace Hopper\" },\n  { value: \"u3\", label: \"Alan Turing\" },\n  { value: \"u4\", label: \"Katherine Johnson\" },\n  { value: \"u5\", label: \"Margaret Hamilton\" },\n  { value: \"u6\", label: \"Dorothy Vaughan\" },\n]\n\n// Seed the preselected option so its label shows before any search runs.\ncombobox.options = [{ value: \"u2\", label: \"Grace Hopper\" }]\ncombobox.value = [\"u2\"]\n\n// Wire up your own async search on \"input\" (fetch, set .loading / .options).\ncombobox.addEventListener(\"input\", () => {\n  const query = combobox.querySelector(\"input\").value.toLowerCase()\n  combobox.loading = true\n  combobox.options = []\n  setTimeout(() => {\n    combobox.options = users.filter((user) => user.label.toLowerCase().includes(query))\n    combobox.loading = false\n  }, 600)\n})",{"id":1424,"name":1099,"exportName":1099,"html":1425,"js":1426},"components-combobox--virtualized","\u003Cnord-field class=\"n:container-xxs\">\n      \u003Cnord-field-label for=\"cb-virtual\">Option\u003C/nord-field-label>\n      \u003Cnord-combobox\n        id=\"cb-virtual\"\n        placeholder=\"Search 10,000 options\"\n        virtualized","document.getElementById(\"cb-virtual\").options = Array.from({ length: 10000 }, (_, index) => ({\n  value: `option-${index}`,\n  label: `Option ${index + 1}`,\n}))",{"id":1428,"name":1429,"exportName":1135,"html":1430,"js":1431},"components-combobox--clear-button","Clear Button","\u003Cnord-field class=\"n:container-xxs\">\n      \u003Cnord-field-label for=\"cb-clear\">Country\u003C/nord-field-label>\n      \u003Cnord-combobox\n        id=\"cb-clear\"\n        placeholder=\"Search\"\n        clearable\n        value=\"france\"\n      >\u003C/nord-combobox>\n    \u003C/nord-field>","const combobox = document.getElementById(\"cb-clear\")\ncombobox.options = [\n  { value: \"argentina\", label: \"Argentina\" },\n  { value: \"brazil\", label: \"Brazil\" },\n  { value: \"canada\", label: \"Canada\" },\n  { value: \"france\", label: \"France\" },\n  { value: \"germany\", label: \"Germany\" },\n  { value: \"japan\", label: \"Japan\" },\n]\ncombobox.value = \"france\"",{"id":1433,"name":1434,"exportName":1166,"html":1435,"js":1436},"components-combobox--auto-highlight","Auto Highlight","\u003Cnord-field class=\"n:container-xxs\">\n      \u003Cnord-field-label for=\"cb-autohighlight\">Country\u003C/nord-field-label>\n      \u003Cnord-combobox\n        id=\"cb-autohighlight\"\n        placeholder=\"Type then press Enter\"\n        auto-highlight\n      >\u003C/nord-combobox>\n      \u003Cnord-field-description>The first match is highlighted — press Enter to select it\u003C/nord-field-description>\n    \u003C/nord-field>","document.getElementById(\"cb-autohighlight\").options = [\n  { value: \"argentina\", label: \"Argentina\" },\n  { value: \"australia\", label: \"Australia\" },\n  { value: \"brazil\", label: \"Brazil\" },\n  { value: \"canada\", label: \"Canada\" },\n  { value: \"china\", label: \"China\" },\n  { value: \"france\", label: \"France\" },\n]",{"id":1438,"name":1169,"exportName":1169,"html":1439,"js":1440},"components-combobox--invalid","\u003Cnord-field invalid class=\"n:container-xxs\">\n      \u003Cnord-field-label for=\"cb-invalid\">Country\u003C/nord-field-label>\n      \u003Cnord-combobox\n        id=\"cb-invalid\"\n        placeholder=\"Search\"\n        invalid\n      >\u003C/nord-combobox>\n      \u003Cnord-field-error>Please choose a country.\u003C/nord-field-error>\n    \u003C/nord-field>","document.getElementById(\"cb-invalid\").options = [\n  { value: \"argentina\", label: \"Argentina\" },\n  { value: \"brazil\", label: \"Brazil\" },\n  { value: \"canada\", label: \"Canada\" },\n  { value: \"france\", label: \"France\" },\n]",{"id":1442,"name":1225,"exportName":1225,"html":1443,"js":1444},"components-combobox--readonly","\u003Cnord-field class=\"n:container-xxs\">\n      \u003Cnord-field-label for=\"cb-readonly\">Country\u003C/nord-field-label>\n      \u003Cnord-combobox\n        id=\"cb-readonly\"\n        placeholder=\"Search\"\n        readonly\n        value=\"france\"\n      >\u003C/nord-combobox>\n    \u003C/nord-field>","const combobox = document.getElementById(\"cb-readonly\")\ncombobox.options = [\n  { value: \"argentina\", label: \"Argentina\" },\n  { value: \"brazil\", label: \"Brazil\" },\n  { value: \"canada\", label: \"Canada\" },\n  { value: \"france\", label: \"France\" },\n]\ncombobox.value = \"france\"",{"id":1446,"name":1447,"exportName":1447,"html":1448,"js":1449},"components-combobox--disabled","Disabled","\u003Cnord-field class=\"n:container-xxs\">\n      \u003Cnord-field-label for=\"cb-disabled\">Country\u003C/nord-field-label>\n      \u003Cnord-combobox\n        id=\"cb-disabled\"\n        placeholder=\"Search\"\n        disabled\n        value=\"france\"\n      >\u003C/nord-combobox>\n    \u003C/nord-field>","const combobox = document.getElementById(\"cb-disabled\")\ncombobox.options = [\n  { value: \"argentina\", label: \"Argentina\" },\n  { value: \"brazil\", label: \"Brazil\" },\n  { value: \"canada\", label: \"Canada\" },\n  { value: \"france\", label: \"France\" },\n]\ncombobox.value = \"france\"",{"id":1451,"name":1300,"exportName":1300,"html":1452,"js":1453},"components-combobox--rtl","\u003Cnord-field class=\"n:container-xxs\">\n      \u003Cnord-field-label for=\"cb-rtl\">نوع الحيوان\u003C/nord-field-label>\n      \u003Cnord-combobox\n        id=\"cb-rtl\"\n        placeholder=\"اختر نوعًا\"\n        clearable\n      >\u003C/nord-combobox>\n    \u003C/nord-field>","document.getElementById(\"cb-rtl\").options = [\n  { value: \"canine\", label: \"كلبيات\" },\n  { value: \"feline\", label: \"سنوريات\" },\n  { value: \"equine\", label: \"خيليات\" },\n  { value: \"rabbit\", label: \"أرنب\" },\n  { value: \"rodent\", label: \"قوارض\" },\n]",{"id":1455,"name":1456,"exportName":1208,"html":1457,"js":1458},"components-combobox--custom-items","Custom Items","\u003Cnord-field class=\"n:container-xxs\">\n      \u003Cnord-field-label for=\"cb-custom\">Assignee\u003C/nord-field-label>\n      \u003Cnord-combobox\n        id=\"cb-custom\"\n        placeholder=\"Search people\"","document.getElementById(\"cb-custom\").options = [\n  {\n    value: \"ada\",\n    label: \"Ada Lovelace\",\n    html: `\u003Cspan class=\"n:flex n:items-center n:gap-s\">\u003Cnord-avatar size=\"s\" name=\"Ada Lovelace\">\u003C/nord-avatar>\u003Cspan class=\"n:flex n:flex-col n:leading-tight\">\u003Cspan>Ada Lovelace\u003C/span>\u003Cspan class=\"n:text-weaker n:text-s\">ada@example.com · Engineer\u003C/span>\u003C/span>\u003C/span>`,\n  },\n  {\n    value: \"grace\",\n    label: \"Grace Hopper\",\n    html: `\u003Cspan class=\"n:flex n:items-center n:gap-s\">\u003Cnord-avatar size=\"s\" name=\"Grace Hopper\">\u003C/nord-avatar>\u003Cspan class=\"n:flex n:flex-col n:leading-tight\">\u003Cspan>Grace Hopper\u003C/span>\u003Cspan class=\"n:text-weaker n:text-s\">grace@example.com · Engineer\u003C/span>\u003C/span>\u003C/span>`,\n  },\n  // …one entry per person, each with its own `html` markup.\n]",{"id":1460,"name":1461,"exportName":1222,"html":1462,"js":1463},"components-combobox--disabled-items","Disabled Items","\u003Cnord-field class=\"n:container-xxs\">\n      \u003Cnord-field-label for=\"cb-disabled\">Framework\u003C/nord-field-label>\n      \u003Cnord-combobox\n        id=\"cb-disabled\"\n        placeholder=\"Select a framework\"\n      >\u003C/nord-combobox>\n    \u003C/nord-field>","document.getElementById(\"cb-disabled\").options = [\n  { value: \"Next.js\", label: \"Next.js\" },\n  { value: \"SvelteKit\", label: \"SvelteKit\", disabled: true },\n  { value: \"Nuxt.js\", label: \"Nuxt.js\" },\n  { value: \"Remix\", label: \"Remix\", disabled: true },\n  { value: \"Astro\", label: \"Astro\" },\n]",{"id":1465,"name":1466,"exportName":1250,"html":1467,"js":1468},"components-combobox--open-on-focus-off","Open On Focus Off","\u003Cnord-field class=\"n:container-xxs\">\n      \u003Cnord-field-label for=\"cb-openonfocus\">Framework\u003C/nord-field-label>\n      \u003Cnord-combobox id=\"cb-openonfocus\" placeholder=\"Click or type to open\">\u003C/nord-combobox>\n    \u003C/nord-field>","const combobox = document.getElementById(\"cb-openonfocus\")\ncombobox.openOnFocus = false\ncombobox.options = [\n  { value: \"Next.js\", label: \"Next.js\" },\n  { value: \"SvelteKit\", label: \"SvelteKit\" },\n  { value: \"Nuxt.js\", label: \"Nuxt.js\" },\n  { value: \"Remix\", label: \"Remix\" },\n  { value: \"Astro\", label: \"Astro\" },\n]",{"id":1470,"name":1471,"exportName":1296,"html":1472,"js":1473},"components-combobox--inside-dialog","Inside Dialog","\u003Cnord-button onclick=\"document.getElementById('combobox-dialog').showModal()\">Open dialog\u003C/nord-button>\n\n    \u003Cnord-modal id=\"combobox-dialog\" aria-labelledby=\"combobox-dialog-title\">\n      \u003Ch2 slot=\"header\" id=\"combobox-dialog-title\">Choose a framework\u003C/h2>\n      \u003Cnord-field>\n        \u003Cnord-field-label for=\"cb-dialog\">Framework\u003C/nord-field-label>\n        \u003Cnord-combobox id=\"cb-dialog\" placeholder=\"Select a framework\">\u003C/nord-combobox>\n      \u003C/nord-field>\n      \u003Cnord-button slot=\"footer\" variant=\"primary\" onclick=\"document.getElementById('combobox-dialog').close()\">Done\u003C/nord-button>\n    \u003C/nord-modal>","document.getElementById(\"cb-dialog\").options = [\n  { value: \"Next.js\", label: \"Next.js\" },\n  { value: \"SvelteKit\", label: \"SvelteKit\" },\n  { value: \"Nuxt.js\", label: \"Nuxt.js\" },\n  { value: \"Remix\", label: \"Remix\" },\n  { value: \"Astro\", label: \"Astro\" },\n]",{"id":1475,"name":1261,"exportName":1266,"html":1476,"js":1477},"components-combobox--input-group","\u003Cnord-stack direction=\"horizontal\" align-items=\"end\" gap=\"s\" class=\"n:container-xs\">\n      \u003Cnord-field class=\"n:flex-1\">\n        \u003Cnord-field-label for=\"cb-inputgroup\">Country\u003C/nord-field-label>\n        \u003Cnord-combobox id=\"cb-inputgroup\" placeholder=\"Search\" clearable>\u003C/nord-combobox>\n      \u003C/nord-field>\n      \u003Cnord-button variant=\"primary\">Apply\u003C/nord-button>\n    \u003C/nord-stack>","document.getElementById(\"cb-inputgroup\").options = [\n  { value: \"argentina\", label: \"Argentina\" },\n  { value: \"australia\", label: \"Australia\" },\n  { value: \"brazil\", label: \"Brazil\" },\n  { value: \"canada\", label: \"Canada\" },\n  { value: \"china\", label: \"China\" },\n  { value: \"france\", label: \"France\" },\n  { value: \"germany\", label: \"Germany\" },\n  { value: \"italy\", label: \"Italy\" },\n  { value: \"japan\", label: \"Japan\" },\n  { value: \"mexico\", label: \"Mexico\" },\n  { value: \"south-korea\", label: \"South Korea\" },\n  { value: \"united-kingdom\", label: \"United Kingdom\" },\n  { value: \"united-states\", label: \"United States\" },\n]",{"id":1479,"name":1280,"exportName":1280,"html":1480,"js":1481},"components-combobox--popup","\u003Cnord-field class=\"n:container-xxs\">\n      \u003Cnord-field-label for=\"cb-popup\">Country\u003C/nord-field-label>\n      \u003Cnord-combobox id=\"cb-popup\" placeholder=\"Search\">\u003C/nord-combobox>\n      \u003Cnord-field-description>Choose your country of residence\u003C/nord-field-description>\n    \u003C/nord-field>","const combobox = document.getElementById(\"cb-popup\")\ncombobox.options = [\n  { value: \"argentina\", label: \"Argentina\" },\n  { value: \"australia\", label: \"Australia\" },\n  { value: \"brazil\", label: \"Brazil\" },\n  { value: \"canada\", label: \"Canada\" },\n  { value: \"china\", label: \"China\" },\n  { value: \"france\", label: \"France\" },\n  { value: \"germany\", label: \"Germany\" },\n  { value: \"italy\", label: \"Italy\" },\n  { value: \"japan\", label: \"Japan\" },\n  { value: \"mexico\", label: \"Mexico\" },\n  { value: \"south-korea\", label: \"South Korea\" },\n  { value: \"united-kingdom\", label: \"United Kingdom\" },\n  { value: \"united-states\", label: \"United States\" },\n]\ncombobox.value = \"united-states\"",{"id":1483,"name":1484,"exportName":1484,"html":1485},"components-combobox--standalone","Standalone","\u003Cnord-combobox label=\"Framework\" hint=\"Pick your stack.\" hint-below placeholder=\"Select a framework\">\n      \u003Cnord-combobox-option value=\"next\">Next.js\u003C/nord-combobox-option>\n      \u003Cnord-combobox-option value=\"nuxt\">Nuxt\u003C/nord-combobox-option>\n      \u003Cnord-combobox-option value=\"astro\">Astro\u003C/nord-combobox-option>\n    \u003C/nord-combobox>",{"id":1487,"name":217,"exportName":217,"html":1488},"components-combobox--field","\u003Cnord-field>\n      \u003Cnord-field-label for=\"framework\">Framework\u003C/nord-field-label>\n      \u003Cnord-combobox id=\"framework\" placeholder=\"Select a framework\">\n        \u003Cnord-combobox-option value=\"next\">Next.js\u003C/nord-combobox-option>\n        \u003Cnord-combobox-option value=\"nuxt\">Nuxt\u003C/nord-combobox-option>\n        \u003Cnord-combobox-option value=\"astro\">Astro\u003C/nord-combobox-option>\n      \u003C/nord-combobox>\n      \u003Cnord-field-description>Pick your stack.\u003C/nord-field-description>\n    \u003C/nord-field>",[1490,1512,1525,1528,1533,1538,1542,1547,1551,1556,1560,1564,1577,1586,1595,1599,1603,1607,1611,1629,1633,1670,1674,1703,1707,1711,1715,1718,1759,1768,1772,1776,1780,1783,1801,1810,1814,1818,1847,1851,1855,1859,1863,1867,1871,1875,1884,1887,1891,1895,1899,1912,1916,1925,1929,1933,1942,1946,1950,1954,1958],{"name":1491,"tagName":1492,"description":1493,"category":1494,"status":7,"isNew":8,"lightDom":22,"parts":1495},"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",[1496,1500,1504,1508],{"name":1497,"tagName":1498,"description":1499},"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":1501,"tagName":1502,"description":1503},"AccordionItem","nord-accordion-item","Accordion Item groups an Accordion Header and\nits Accordion Panel within an\nAccordion.",{"name":1505,"tagName":1506,"description":1507},"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":1509,"tagName":1510,"description":1511},"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":1513,"tagName":1514,"description":1515,"category":1494,"status":7,"isNew":8,"lightDom":8,"parts":1516},"Aside","nord-aside","Container for the right-side rail + drawer pattern in the app shell.",[1517,1521],{"name":1518,"tagName":1519,"description":1520},"AsideDrawer","nord-aside-drawer","A drawer panel inside \u003Cnord-aside>.",{"name":1522,"tagName":1523,"description":1524},"AsideTrigger","nord-aside-trigger","Rail button that toggles a \u003Cnord-aside-drawer> inside \u003Cnord-aside>.",{"name":513,"tagName":1526,"description":1527,"category":9,"status":7,"isNew":8,"lightDom":22},"nord-autocomplete","Autocomplete is a free-text input with suggestions: the text the user types\nis itself the committed value (a string), and the options are completion\naids. Picking a suggestion fills the input with the option's label and commits\nthat label. Use it when the answer is open-ended text but you can offer\nhelpful completions (a city, a tag, a username); reach for\nCombobox instead when the value must be one of a\nfixed set of options.\n\nAutocomplete is a control only — it has no built-in label, hint or error.\nCompose it inside a Field to give it a label, hint and\nerror message, the same way you would a native input.\n\nBase UI parity: Autocomplete is the Combobox primitive with\nselectionMode=\"none\" + fillInputOnItemPress.",{"name":1529,"tagName":1530,"description":1531,"category":1532,"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":1534,"tagName":1535,"description":1536,"category":1537,"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":1539,"tagName":1540,"description":1541,"category":1537,"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":1543,"tagName":1544,"description":1545,"category":1546,"status":7,"isNew":8,"lightDom":8},"Button","nord-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":1548,"tagName":1549,"description":1550,"category":1546,"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":1552,"tagName":1553,"description":1554,"category":1555,"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":1557,"tagName":1558,"description":1559,"category":1494,"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":1561,"tagName":1562,"description":1563,"category":9,"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":1565,"tagName":1566,"description":1567,"category":1494,"status":7,"isNew":8,"lightDom":22,"parts":1568},"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.",[1569,1573],{"name":1570,"tagName":1571,"description":1572},"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":1574,"tagName":1575,"description":1576},"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":4,"tagName":5,"description":1578,"category":9,"status":7,"isNew":8,"lightDom":22,"parts":1579},"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.",[1580,1583],{"name":1581,"tagName":859,"description":1582},"ComboboxGroup","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":1584,"tagName":837,"description":1585},"ComboboxOption","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":1587,"tagName":1588,"description":1589,"category":1546,"status":7,"isNew":8,"lightDom":8,"parts":1590},"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.",[1591],{"name":1592,"tagName":1593,"description":1594},"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":1596,"tagName":1597,"description":1598,"category":9,"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":1600,"tagName":1601,"description":1602,"category":9,"status":7,"isNew":8,"lightDom":22},"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":1604,"tagName":1605,"description":1606,"category":1494,"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":1608,"tagName":1609,"description":1610,"category":1494,"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":1612,"tagName":1613,"description":1614,"category":1615,"status":7,"isNew":8,"lightDom":8,"parts":1616},"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",[1617,1621,1625],{"name":1618,"tagName":1619,"description":1620},"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":1622,"tagName":1623,"description":1624},"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":1626,"tagName":1627,"description":1628},"DropdownSubmenu","nord-dropdown-submenu","Dropdown submenu nests a secondary menu within a parent dropdown.",{"name":1630,"tagName":1631,"description":1632,"category":1537,"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":217,"tagName":305,"description":1634,"category":9,"status":7,"isNew":8,"lightDom":22,"parts":1635},"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.",[1636,1640,1643,1647,1651,1654,1658,1662,1666],{"name":1637,"tagName":1638,"description":1639},"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":1641,"tagName":368,"description":1642},"FieldDescription","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":1644,"tagName":1645,"description":1646},"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":1648,"tagName":1649,"description":1650},"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":1652,"tagName":316,"description":1653},"FieldLabel","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":1655,"tagName":1656,"description":1657},"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":1659,"tagName":1660,"description":1661},"FieldSeparator","nord-field-separator","Field Separator draws a thin divider between sections inside a\nField Group.",{"name":1663,"tagName":1664,"description":1665},"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":1667,"tagName":1668,"description":1669},"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":1671,"tagName":1672,"description":1673,"category":9,"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":1675,"tagName":1676,"description":1677,"category":9,"status":7,"isNew":8,"lightDom":22,"parts":1678},"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.",[1679,1683,1687,1691,1695,1699],{"name":1680,"tagName":1681,"description":1682},"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":1684,"tagName":1685,"description":1686},"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":1688,"tagName":1689,"description":1690},"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":1692,"tagName":1693,"description":1694},"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":1696,"tagName":1697,"description":1698},"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":1700,"tagName":1701,"description":1702},"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":1704,"tagName":1705,"description":1706,"category":1494,"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":1708,"tagName":1709,"description":1710,"category":1494,"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":1712,"tagName":1713,"description":1714,"category":1532,"status":7,"isNew":8,"lightDom":8},"Icon","nord-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":671,"tagName":1716,"description":1717,"category":9,"status":7,"isNew":8,"lightDom":8},"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":1719,"tagName":1720,"description":1721,"category":1555,"status":7,"isNew":8,"lightDom":22,"parts":1722},"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.",[1723,1727,1731,1735,1739,1743,1747,1751,1755],{"name":1724,"tagName":1725,"description":1726},"ItemActions","nord-item-actions","Item Actions holds the trailing controls of an Item,\nsuch as buttons or a chevron.",{"name":1728,"tagName":1729,"description":1730},"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":1732,"tagName":1733,"description":1734},"ItemDescription","nord-item-description","Item Description is the secondary, muted line of text in an\nItem. It is clamped to two lines.",{"name":1736,"tagName":1737,"description":1738},"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":1740,"tagName":1741,"description":1742},"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":1744,"tagName":1745,"description":1746},"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":1748,"tagName":1749,"description":1750},"ItemMedia","nord-item-media","Item Media holds the leading visual of an Item, such as\nan icon, an avatar or an image.",{"name":1752,"tagName":1753,"description":1754},"ItemSeparator","nord-item-separator","Item Separator draws a horizontal divider between Item\nrows inside an Item Group.",{"name":1756,"tagName":1757,"description":1758},"ItemTitle","nord-item-title","Item Title is the primary line of text in an Item.",{"name":1760,"tagName":1761,"description":1762,"category":815,"status":7,"isNew":8,"lightDom":22,"parts":1763},"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.",[1764],{"name":1765,"tagName":1766,"description":1767},"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":1769,"tagName":1770,"description":1771,"category":1494,"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":1773,"tagName":1774,"description":1775,"category":1546,"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":1777,"tagName":1778,"description":1779,"category":1537,"status":7,"isNew":8,"lightDom":22},"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":1291,"tagName":1781,"description":1782,"category":1615,"status":7,"isNew":8,"lightDom":8},"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":1784,"tagName":1785,"description":1786,"category":1787,"status":7,"isNew":8,"lightDom":8,"parts":1788},"Navigation","nord-navigation","Navigation is used to display the primary navigation in the sidebar\nof an application. Navigation includes a list of links that users\nuse to move between sections of the application.","navigation",[1789,1793,1797],{"name":1790,"tagName":1791,"description":1792},"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":1794,"tagName":1795,"description":1796},"NavItem","nord-nav-item","Navigation item populates sidebar navigation with links.\nEvery item should be placed inside a navigation group.",{"name":1798,"tagName":1799,"description":1800},"NavToggle","nord-nav-toggle","Nav toggle hides and shows the primary navigation inside \u003Cnord-layout>.",{"name":1802,"tagName":1803,"description":1804,"category":1537,"status":7,"isNew":8,"lightDom":8,"parts":1805},"Notification","nord-notification","Notifications provide important information that requires action or acknowledgement.\nA notification is displayed until the user dismisses it.",[1806],{"name":1807,"tagName":1808,"description":1809},"NotificationGroup","nord-notification-group","Notification group is used to position and style a group of notifications.",{"name":1811,"tagName":1812,"description":1813,"category":9,"status":7,"isNew":8,"lightDom":22},"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":1815,"tagName":1816,"description":1817,"category":9,"status":7,"isNew":8,"lightDom":22},"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":1819,"tagName":1820,"description":1821,"category":1787,"status":7,"isNew":8,"lightDom":22,"parts":1822},"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\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.",[1823,1827,1831,1835,1839,1843],{"name":1824,"tagName":1825,"description":1826},"PaginationContent","nord-pagination-content","The list container for composed Pagination controls.\nLays its Pagination Item children out in a row.\n\nPlace it inside Pagination, which is already the\nnavigation landmark (it sets role=\"navigation\" and an accessible label).\nDo not add your own \u003Cnav> wrapper — a second landmark around the same\ncontrols would be a duplicate that screen-reader users have to wade through.",{"name":1828,"tagName":1829,"description":1830},"PaginationEllipsis","nord-pagination-ellipsis","The collapsed-pages marker (…) in a composed Pagination.\nThe glyph is decorative; a visually-hidden label gives it meaning for\nassistive tech. Set label to localise it.",{"name":1832,"tagName":1833,"description":1834},"PaginationItem","nord-pagination-item","A single slot in a composed Pagination Content\nrow. Wrap each control — a Pagination Link,\nPagination Previous, Pagination Next\nor Pagination Ellipsis — in its own item.",{"name":1836,"tagName":1837,"description":1838},"PaginationLink","nord-pagination-link","A page link in a composed Pagination. A layout\nwrapper around your own interactive element — provide an \u003Ca> (e.g. a\nframework \u003CLink> for crawlable, SSR-friendly links) or a nord-button. Set\ncurrent on the link for the active page; it mirrors aria-current=\"page\"\nonto the interactive child so assistive tech announces it.",{"name":1840,"tagName":1841,"description":1842},"PaginationNext","nord-pagination-next","The \"next page\" control in a composed Pagination. A\nlayout wrapper around your own interactive element — provide an \u003Ca> (e.g. a\nframework \u003CLink>) or a nord-button with its own icon, label and\nnavigation, and disable it when there is no next page.",{"name":1844,"tagName":1845,"description":1846},"PaginationPrevious","nord-pagination-previous","The \"previous page\" control in a composed Pagination.\nA layout wrapper around your own interactive element — provide an \u003Ca>\n(e.g. a framework \u003CLink>) or a nord-button with its own icon, label and\nnavigation, and disable it when there is no previous page.",{"name":1848,"tagName":1849,"description":1850,"category":1615,"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":1852,"tagName":1853,"description":1854,"category":1537,"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":1856,"tagName":1857,"description":1858,"category":1537,"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":1860,"tagName":1861,"description":1862,"category":1532,"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":1864,"tagName":1865,"description":1866,"category":9,"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":1868,"tagName":1869,"description":1870,"category":9,"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":1872,"tagName":1873,"description":1874,"category":1494,"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":1876,"tagName":1877,"description":1878,"category":1546,"status":7,"isNew":8,"lightDom":8,"parts":1879},"SegmentedControl","nord-segmented-control","Segmented control is used to pick one choice from a set of\nclosely related choices, and immediately apply that selection.",[1880],{"name":1881,"tagName":1882,"description":1883},"SegmentedControlItem","nord-segmented-control-item","Segmented control items populate a segmented control with options.\nEvery item should be placed inside a segmented control.",{"name":653,"tagName":1885,"description":1886,"category":9,"status":7,"isNew":8,"lightDom":8},"nord-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":1888,"tagName":1889,"description":1890,"category":1537,"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":1892,"tagName":1893,"description":1894,"category":1537,"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":1896,"tagName":1897,"description":1898,"category":1494,"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":1900,"tagName":1901,"description":1902,"category":1787,"status":7,"isNew":8,"lightDom":8,"parts":1903},"Tab","nord-tab","The interactive tab button for use within the tab group component.",[1904,1908],{"name":1905,"tagName":1906,"description":1907},"TabGroup","nord-tab-group","Tab Group allows multiple panels to be contained within a single window,\nusing tabs as a navigational element.",{"name":1909,"tagName":1910,"description":1911},"TabPanel","nord-tab-panel","The panel which contains content that can be revealed using a tab\nin the tab group component.",{"name":1913,"tagName":1914,"description":1915,"category":1555,"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":1917,"tagName":1918,"description":1919,"category":815,"status":7,"isNew":8,"lightDom":8,"parts":1920},"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.",[1921],{"name":1922,"tagName":1923,"description":1924},"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":1926,"tagName":1927,"description":1928,"category":9,"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":1930,"tagName":1931,"description":1932,"category":9,"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":1934,"tagName":1935,"description":1936,"category":1537,"status":7,"isNew":8,"lightDom":8,"parts":1937},"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.",[1938],{"name":1939,"tagName":1940,"description":1941},"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":1943,"tagName":1944,"description":1945,"category":9,"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":1947,"tagName":1948,"description":1949,"category":1615,"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":1951,"tagName":1952,"description":1953,"category":1494,"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":1955,"tagName":1956,"description":1957,"category":815,"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":1959,"tagName":1960,"description":1961,"category":815,"status":7,"isNew":8,"lightDom":8},"VisuallyHidden","nord-visually-hidden","Visually hidden is used when an element needs to be available\nto assistive technologies like screen readers, but be otherwise\nhidden.",[1963,1989,2027,2044,2068,2075,2105,2132,2190,2219,2261,2303,2345,2362,2374,2386,2393,2447,2499,2511,2524,2536,2559,2579,2595,2626,2633,2684,2703,2725,2754,2774,2782],{"name":1964,"displayName":1491,"description":1965,"usageContent":1966,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":1971},"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",[1972,1976,1981,1984],{"name":1973,"displayName":1010,"url":1974,"code":1975},"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":1977,"displayName":1978,"url":1979,"code":1980},"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":65,"displayName":1447,"url":1982,"code":1983},"/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":1985,"displayName":1986,"url":1987,"code":1988},"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":1990,"displayName":1991,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":1992},"pcnf-address","Address",[1993,1996,2001,2004,2009,2014,2019,2024],{"name":1973,"displayName":1010,"url":1994,"code":1995},"/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":1997,"displayName":1998,"url":1999,"code":2000},"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":65,"displayName":1447,"url":2002,"code":2003},"/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":2005,"displayName":2006,"url":2007,"code":2008},"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":2010,"displayName":2011,"url":2012,"code":2013},"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":2015,"displayName":2016,"url":2017,"code":2018},"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":2020,"displayName":2021,"url":2022,"code":2023},"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":1985,"displayName":1986,"url":2025,"code":2026},"/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":2028,"displayName":2029,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":2030},"pcnf-billing-summary","Billing Summary",[2031,2034,2039],{"name":1973,"displayName":1010,"url":2032,"code":2033},"/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":2035,"displayName":2036,"url":2037,"code":2038},"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":2040,"displayName":2041,"url":2042,"code":2043},"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":2045,"displayName":2046,"description":2047,"usageContent":2048,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":2049},"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>",[2050,2053,2058,2063],{"name":1973,"displayName":1010,"url":2051,"code":2052},"/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":2054,"displayName":2055,"url":2056,"code":2057},"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":2059,"displayName":2060,"url":2061,"code":2062},"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":2064,"displayName":2065,"url":2066,"code":2067},"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":2069,"displayName":2070,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":2071},"pcnf-bulk-actions-header","Bulk Actions Header",[2072],{"name":1973,"displayName":1010,"url":2073,"code":2074},"/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":2076,"displayName":2077,"description":2078,"usageContent":2079,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":2080},"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>",[2081,2084,2087,2092,2095,2100],{"name":1973,"displayName":1010,"url":2082,"code":2083},"/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":65,"displayName":1447,"url":2085,"code":2086},"/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":2088,"displayName":2089,"url":2090,"code":2091},"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":1985,"displayName":1986,"url":2093,"code":2094},"/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":2096,"displayName":2097,"url":2098,"code":2099},"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":2101,"displayName":2102,"url":2103,"code":2104},"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":2106,"displayName":2107,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":2108},"pcnf-card-data","Card Data",[2109,2112,2117,2122,2127],{"name":1973,"displayName":1010,"url":2110,"code":2111},"/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":2113,"displayName":2114,"url":2115,"code":2116},"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":2118,"displayName":2119,"url":2120,"code":2121},"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":2123,"displayName":2124,"url":2125,"code":2126},"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":2128,"displayName":2129,"url":2130,"code":2131},"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":2133,"displayName":4,"description":2134,"usageContent":2135,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":2136},"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>",[2137,2140,2145,2150,2153,2158,2163,2166,2170,2175,2180,2185],{"name":1973,"displayName":1010,"url":2138,"code":2139},"/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":2141,"displayName":2142,"url":2143,"code":2144},"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":2146,"displayName":2147,"url":2148,"code":2149},"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":65,"displayName":1447,"url":2151,"code":2152},"/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":2154,"displayName":2155,"url":2156,"code":2157},"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":2159,"displayName":2160,"url":2161,"code":2162},"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":119,"displayName":1237,"url":2164,"code":2165},"/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":58,"displayName":2167,"url":2168,"code":2169},"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":2171,"displayName":2172,"url":2173,"code":2174},"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":2176,"displayName":2177,"url":2178,"code":2179},"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":2181,"displayName":2182,"url":2183,"code":2184},"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":2186,"displayName":2187,"url":2188,"code":2189},"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":2191,"displayName":2192,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":2193},"pcnf-communication-preferences","Communication Preferences",[2194,2199,2204,2209,2214],{"name":2195,"displayName":2196,"url":2197,"code":2198},"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":2200,"displayName":2201,"url":2202,"code":2203},"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":2205,"displayName":2206,"url":2207,"code":2208},"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":2210,"displayName":2211,"url":2212,"code":2213},"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":2215,"displayName":2216,"url":2217,"code":2218},"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":2220,"displayName":2221,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":2222},"pcnf-container","Container",[2223,2226,2231,2236,2241,2246,2251,2256],{"name":1973,"displayName":1010,"url":2224,"code":2225},"/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":2227,"displayName":2228,"url":2229,"code":2230},"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":2232,"displayName":2233,"url":2234,"code":2235},"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":2237,"displayName":2238,"url":2239,"code":2240},"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":2242,"displayName":2243,"url":2244,"code":2245},"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":2247,"displayName":2248,"url":2249,"code":2250},"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":2252,"displayName":2253,"url":2254,"code":2255},"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":2257,"displayName":2258,"url":2259,"code":2260},"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":2262,"displayName":2263,"description":2264,"usageContent":2265,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":2266},"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>",[2267,2270,2275,2280,2285,2288,2293,2298],{"name":1973,"displayName":1010,"url":2268,"code":2269},"/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":2271,"displayName":2272,"url":2273,"code":2274},"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":2276,"displayName":2277,"url":2278,"code":2279},"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":2281,"displayName":2282,"url":2283,"code":2284},"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":65,"displayName":1447,"url":2286,"code":2287},"/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":2289,"displayName":2290,"url":2291,"code":2292},"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":2294,"displayName":2295,"url":2296,"code":2297},"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":2299,"displayName":2300,"url":2301,"code":2302},"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":2304,"displayName":2305,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":2306},"pcnf-date-range-picker","Date Range Picker",[2307,2310,2315,2320,2325,2330,2335,2340],{"name":1973,"displayName":1010,"url":2308,"code":2309},"/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":2311,"displayName":2312,"url":2313,"code":2314},"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":2316,"displayName":2317,"url":2318,"code":2319},"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":2321,"displayName":2322,"url":2323,"code":2324},"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":2326,"displayName":2327,"url":2328,"code":2329},"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":2331,"displayName":2332,"url":2333,"code":2334},"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":2336,"displayName":2337,"url":2338,"code":2339},"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":2341,"displayName":2342,"url":2343,"code":2344},"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":2346,"displayName":2347,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":2348},"pcnf-divided-stack","Divided Stack",[2349,2352,2357],{"name":1973,"displayName":1010,"url":2350,"code":2351},"/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":2353,"displayName":2354,"url":2355,"code":2356},"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":2358,"displayName":2359,"url":2360,"code":2361},"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":2363,"displayName":2364,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":2365},"pcnf-export-popout","Export Popout",[2366,2369],{"name":1973,"displayName":1010,"url":2367,"code":2368},"/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":2370,"displayName":2371,"url":2372,"code":2373},"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":2375,"displayName":2376,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":2377},"pcnf-filter-add-button","Filter Add Button",[2378,2381],{"name":1973,"displayName":1010,"url":2379,"code":2380},"/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":2382,"displayName":2383,"url":2384,"code":2385},"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":2387,"displayName":2388,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":2389},"pcnf-filter-bar","Filter Bar",[2390],{"name":1973,"displayName":1010,"url":2391,"code":2392},"/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":2394,"displayName":2395,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":2396},"pcnf-filter-dropdown","Filter Dropdown",[2397,2400,2405,2408,2413,2418,2423,2428,2433,2438,2443],{"name":1973,"displayName":1010,"url":2398,"code":2399},"/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":2401,"displayName":2402,"url":2403,"code":2404},"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":2159,"displayName":2160,"url":2406,"code":2407},"/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":2409,"displayName":2410,"url":2411,"code":2412},"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":2414,"displayName":2415,"url":2416,"code":2417},"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":2419,"displayName":2420,"url":2421,"code":2422},"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":2424,"displayName":2425,"url":2426,"code":2427},"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":2429,"displayName":2430,"url":2431,"code":2432},"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":2434,"displayName":2435,"url":2436,"code":2437},"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":2439,"displayName":2440,"url":2441,"code":2442},"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":30,"displayName":2444,"url":2445,"code":2446},"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":2448,"displayName":2449,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":2450},"pcnf-input-number","Input Number",[2451,2454,2459,2464,2469,2474,2479,2484,2489,2494],{"name":1973,"displayName":1010,"url":2452,"code":2453},"/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":2455,"displayName":2456,"url":2457,"code":2458},"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":2460,"displayName":2461,"url":2462,"code":2463},"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":2465,"displayName":2466,"url":2467,"code":2468},"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":2470,"displayName":2471,"url":2472,"code":2473},"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":2475,"displayName":2476,"url":2477,"code":2478},"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":2480,"displayName":2481,"url":2482,"code":2483},"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":2485,"displayName":2486,"url":2487,"code":2488},"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":2490,"displayName":2491,"url":2492,"code":2493},"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":2495,"displayName":2496,"url":2497,"code":2498},"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":2500,"displayName":2501,"description":2502,"usageContent":2503,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":2504},"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>",[2505,2508],{"name":1973,"displayName":1010,"url":2506,"code":2507},"/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":30,"displayName":2444,"url":2509,"code":2510},"/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":2512,"displayName":2471,"description":2513,"usageContent":2514,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":2515},"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>",[2516,2519],{"name":1973,"displayName":1010,"url":2517,"code":2518},"/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":2520,"displayName":2521,"url":2522,"code":2523},"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":2525,"displayName":2526,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":2527},"pcnf-number-stepper","Number Stepper",[2528,2531],{"name":1973,"displayName":1010,"url":2529,"code":2530},"/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":2532,"displayName":2533,"url":2534,"code":2535},"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":2537,"displayName":2538,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":2539},"pcnf-overflow-inline-list","Overflow Inline List",[2540,2543,2546,2549,2554],{"name":1973,"displayName":1010,"url":2541,"code":2542},"/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":2370,"displayName":2371,"url":2544,"code":2545},"/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":2353,"displayName":2354,"url":2547,"code":2548},"/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":2550,"displayName":2551,"url":2552,"code":2553},"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":2555,"displayName":2556,"url":2557,"code":2558},"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":2560,"displayName":2561,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":2562},"pcnf-overflow-list","Overflow List",[2563,2566,2569,2574],{"name":1973,"displayName":1010,"url":2564,"code":2565},"/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":2550,"displayName":2551,"url":2567,"code":2568},"/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":2570,"displayName":2571,"url":2572,"code":2573},"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":2575,"displayName":2576,"url":2577,"code":2578},"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":2580,"displayName":1819,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":2581},"pcnf-pagination",[2582,2585,2590],{"name":1973,"displayName":1010,"url":2583,"code":2584},"/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":2586,"displayName":2587,"url":2588,"code":2589},"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":2591,"displayName":2592,"url":2593,"code":2594},"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":2596,"displayName":1280,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":2597},"pcnf-popup",[2598,2601,2606,2611,2616,2621],{"name":1973,"displayName":1010,"url":2599,"code":2600},"/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":2602,"displayName":2603,"url":2604,"code":2605},"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":2607,"displayName":2608,"url":2609,"code":2610},"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":2612,"displayName":2613,"url":2614,"code":2615},"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":2617,"displayName":2618,"url":2619,"code":2620},"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":2622,"displayName":2623,"url":2624,"code":2625},"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":2627,"displayName":2628,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":2629},"pcnf-result-range-visualizer","Result Range Visualizer",[2630],{"name":1973,"displayName":1010,"url":2631,"code":2632},"/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":2634,"displayName":2635,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":2636},"pcnf-rich-text-editor","Rich Text Editor",[2637,2640,2645,2650,2655,2660,2663,2668,2671,2674,2679],{"name":1973,"displayName":1010,"url":2638,"code":2639},"/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":2641,"displayName":2642,"url":2643,"code":2644},"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":2646,"displayName":2647,"url":2648,"code":2649},"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":2651,"displayName":2652,"url":2653,"code":2654},"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":2656,"displayName":2657,"url":2658,"code":2659},"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":2171,"displayName":2172,"url":2661,"code":2662},"/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":2664,"displayName":2665,"url":2666,"code":2667},"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":2186,"displayName":2187,"url":2669,"code":2670},"/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":2622,"displayName":2623,"url":2672,"code":2673},"/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":2675,"displayName":2676,"url":2677,"code":2678},"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":2680,"displayName":2681,"url":2682,"code":2683},"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":2685,"displayName":2686,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":2687},"pcnf-selection-popout","Selection Popout",[2688,2693,2698],{"name":2689,"displayName":2690,"url":2691,"code":2692},"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":2694,"displayName":2695,"url":2696,"code":2697},"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":2699,"displayName":2700,"url":2701,"code":2702},"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":2704,"displayName":2705,"description":2706,"usageContent":2707,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":2708},"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>",[2709,2712,2717,2720],{"name":1973,"displayName":1010,"url":2710,"code":2711},"/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":2713,"displayName":2714,"url":2715,"code":2716},"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":2054,"displayName":2055,"url":2718,"code":2719},"/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":2721,"displayName":2722,"url":2723,"code":2724},"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":2726,"displayName":2727,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":2728},"pcnf-tags","Tags",[2729,2732,2736,2741,2746,2751],{"name":1973,"displayName":1010,"url":2730,"code":2731},"/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":2733,"displayName":1079,"url":2734,"code":2735},"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":2737,"displayName":2738,"url":2739,"code":2740},"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":2742,"displayName":2743,"url":2744,"code":2745},"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":2747,"displayName":2748,"url":2749,"code":2750},"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":1985,"displayName":1986,"url":2752,"code":2753},"/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":2755,"displayName":2756,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":2757},"pcnf-time-duration","Time Duration",[2758,2761,2766,2771],{"name":1973,"displayName":1010,"url":2759,"code":2760},"/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":2762,"displayName":2763,"url":2764,"code":2765},"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":2767,"displayName":2768,"url":2769,"code":2770},"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":2186,"displayName":2187,"url":2772,"code":2773},"/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":2775,"displayName":2776,"description":2777,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":2778},"pcnf-time-picker","Time Picker","Time picker is designed to allow the user to type time or select it from a predefined dropdown menu.",[2779],{"name":1973,"displayName":1010,"url":2780,"code":2781},"/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":2783,"displayName":1934,"product":1967,"availability":1968,"productColor":1969,"examplesBaseURL":1970,"examples":2784},"pcnf-toast",[2785,2788,2793,2798],{"name":1973,"displayName":1010,"url":2786,"code":2787},"/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":2789,"displayName":2790,"url":2791,"code":2792},"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":2794,"displayName":2795,"url":2796,"code":2797},"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":55,"displayName":2799,"url":2800,"code":2801},"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",[2803,2806,2808,2810,2812,2814,2817,2819,2821,2823,2825,2827,2829,2830,2832,2834,2836,2838,2840,2842,2844,2846,2849,2851,2853,2855,2857,2859,2861,2863,2865,2867,2869,2871,2873,2875,2877,2879,2881,2883,2885,2887,2889,2891,2893,2895,2897,2899,2901,2903,2905,2907,2909,2911,2913,2915,2917,2919,2921,2923,2925,2927,2929],{"path":2804,"isNew":22,"updated":2805,"status":1380},"/component-docs/accordion",null,{"path":2807,"isNew":22,"updated":2805,"status":2805},"/component-docs/aside",{"path":2809,"isNew":22,"updated":1382,"status":1380},"/component-docs/autocomplete",{"path":2811,"isNew":8,"updated":2805,"status":2805},"/component-docs/avatar",{"path":2813,"isNew":8,"updated":2805,"status":2805},"/component-docs/badge",{"path":2815,"isNew":8,"updated":2816,"status":2805},"/component-docs/banner","2026-06-24",{"path":2818,"isNew":8,"updated":2805,"status":2805},"/component-docs/button",{"path":2820,"isNew":8,"updated":2805,"status":2805},"/component-docs/button-group",{"path":2822,"isNew":8,"updated":2816,"status":2805},"/component-docs/calendar",{"path":2824,"isNew":8,"updated":2805,"status":2805},"/component-docs/card",{"path":2826,"isNew":8,"updated":1382,"status":2805},"/component-docs/checkbox",{"path":2828,"isNew":22,"updated":2805,"status":1380},"/component-docs/collapsible",{"path":1378,"isNew":22,"updated":1382,"status":1380},{"path":2831,"isNew":8,"updated":2805,"status":2805},"/component-docs/command-menu",{"path":2833,"isNew":8,"updated":1382,"status":2805},"/component-docs/date-picker",{"path":2835,"isNew":22,"updated":1382,"status":1380},"/component-docs/date-range-picker",{"path":2837,"isNew":8,"updated":2805,"status":2805},"/component-docs/divider",{"path":2839,"isNew":8,"updated":2805,"status":2805},"/component-docs/drawer",{"path":2841,"isNew":8,"updated":2805,"status":2805},"/component-docs/dropdown",{"path":2843,"isNew":8,"updated":2805,"status":2805},"/component-docs/empty-state",{"path":2845,"isNew":22,"updated":2805,"status":1380},"/component-docs/field",{"path":2847,"isNew":8,"updated":2805,"status":2848},"/component-docs/fieldset","deprecated",{"path":2850,"isNew":22,"updated":2805,"status":1380},"/component-docs/filter-bar",{"path":2852,"isNew":8,"updated":2805,"status":2805},"/component-docs/filter-date-range",{"path":2854,"isNew":8,"updated":2805,"status":2805},"/component-docs/filter-dropdown",{"path":2856,"isNew":8,"updated":2805,"status":2805},"/component-docs/footer",{"path":2858,"isNew":8,"updated":2805,"status":2805},"/component-docs/header",{"path":2860,"isNew":8,"updated":2805,"status":2805},"/component-docs/icon",{"path":2862,"isNew":8,"updated":1382,"status":2805},"/component-docs/input",{"path":2864,"isNew":22,"updated":2805,"status":1380},"/component-docs/item",{"path":2866,"isNew":22,"updated":2805,"status":1380},"/component-docs/kbd",{"path":2868,"isNew":8,"updated":2805,"status":2805},"/component-docs/layout",{"path":2870,"isNew":8,"updated":2805,"status":2805},"/component-docs/message",{"path":2872,"isNew":22,"updated":2805,"status":1380},"/component-docs/meter",{"path":2874,"isNew":8,"updated":2805,"status":2805},"/component-docs/modal",{"path":2876,"isNew":8,"updated":2805,"status":2805},"/component-docs/navigation",{"path":2878,"isNew":8,"updated":2805,"status":2805},"/component-docs/notification",{"path":2880,"isNew":22,"updated":1382,"status":1380},"/component-docs/number-field",{"path":2882,"isNew":22,"updated":1382,"status":1380},"/component-docs/otp-field",{"path":2884,"isNew":22,"updated":2805,"status":1380},"/component-docs/pagination",{"path":2886,"isNew":8,"updated":2816,"status":2805},"/component-docs/popout",{"path":2888,"isNew":8,"updated":2805,"status":2805},"/component-docs/progress",{"path":2890,"isNew":8,"updated":2805,"status":2805},"/component-docs/progress-bar",{"path":2892,"isNew":8,"updated":2805,"status":2805},"/component-docs/qrcode",{"path":2894,"isNew":8,"updated":1382,"status":2805},"/component-docs/radio",{"path":2896,"isNew":8,"updated":1382,"status":2805},"/component-docs/range",{"path":2898,"isNew":22,"updated":2805,"status":1380},"/component-docs/scroll-area",{"path":2900,"isNew":8,"updated":2805,"status":2805},"/component-docs/segmented-control",{"path":2902,"isNew":8,"updated":1382,"status":2805},"/component-docs/select",{"path":2904,"isNew":8,"updated":2805,"status":2805},"/component-docs/skeleton",{"path":2906,"isNew":8,"updated":2805,"status":2805},"/component-docs/spinner",{"path":2908,"isNew":8,"updated":2805,"status":2805},"/component-docs/stack",{"path":2910,"isNew":8,"updated":2805,"status":2805},"/component-docs/tab",{"path":2912,"isNew":8,"updated":2805,"status":2805},"/component-docs/table",{"path":2914,"isNew":8,"updated":2805,"status":2805},"/component-docs/tag",{"path":2916,"isNew":8,"updated":1382,"status":2805},"/component-docs/textarea",{"path":2918,"isNew":22,"updated":1382,"status":1380},"/component-docs/time-picker",{"path":2920,"isNew":8,"updated":2805,"status":2805},"/component-docs/toast",{"path":2922,"isNew":8,"updated":1382,"status":2805},"/component-docs/toggle",{"path":2924,"isNew":8,"updated":2805,"status":2805},"/component-docs/tooltip",{"path":2926,"isNew":8,"updated":2805,"status":2805},"/component-docs/top-bar",{"path":2928,"isNew":22,"updated":2805,"status":2805},"/component-docs/truncate",{"path":2930,"isNew":8,"updated":2805,"status":2805},"/component-docs/visually-hidden",[2932,2942,2957,2993,3039,3044,3049,3056,3165,3172,3208,3223,3227,3231,3234,3236,3240,3244,3248,3252,3255],{"title":2933,"path":2934,"stem":2935,"children":2936},"Getting Started","/start","02.start/01.index",[2937,2938],{"title":2933,"path":2934,"stem":2935},{"title":2939,"path":2940,"stem":2941},"About Nord","/start/about","02.start/02.about",{"title":2943,"path":2944,"stem":2945,"children":2946,"icon":2956},"What's New","/new","03.new/00.index",[2947,2950,2953],{"path":2948,"title":2949},"/changelogs/web-components","Changelog",{"path":2951,"title":2952},"/updates","Latest Updates",{"path":2954,"title":2955},"/migrations","Migrations","i-lucide-sparkles",{"title":2958,"path":2959,"stem":2960,"children":2961},"Design Tokens","/tokens","04.tokens/index",[2962,2965,2968,2971,2974,2977,2980,2982,2985,2988,2991],{"path":2963,"title":2964},"#color","Color",{"path":2966,"title":2967},"#border-radius","Border Radius",{"path":2969,"title":2970},"#box-shadow","Box Shadow",{"path":2972,"title":2973},"#font-size","Font Size",{"path":2975,"title":2976},"#font","Font",{"path":2978,"title":2979},"#line-height","Line Height",{"path":2981,"title":2444},"#size",{"path":2983,"title":2984},"#space","Space",{"path":2986,"title":2987},"#transition","Transition",{"path":2989,"title":2990},"#z-index","Z-index",{"path":2992,"title":203},"#usage",{"title":2994,"path":2995,"stem":2996,"children":2997,"order":272},"Guidelines","/guidelines","05.guidelines/0.index",[2998,3000,3003,3006,3009,3012,3015,3018,3021,3024,3027,3030,3033,3036],{"path":2999,"title":1310},"/accessibility-checklist",{"path":3001,"title":3002},"/colors","Color System",{"path":3004,"title":3005},"/color-utilities","Color Utilities",{"path":3007,"title":3008},"/cdn","Content Delivery Network",{"path":3010,"title":3011},"/principles","Principles",{"path":3013,"title":3014},"/figma","Figma Toolkit",{"path":3016,"title":3017},"/grid","Grid",{"path":3019,"title":3020},"/iconography","Iconography",{"path":3022,"title":3023},"/localization","Localization",{"path":3025,"title":3026},"/naming","Naming",{"path":3028,"title":3029},"/brand","Nordhealth Brand",{"path":3031,"title":3032},"/typography","Typography",{"path":3034,"title":3035},"/web-components","Web Components",{"path":3037,"title":3038},"/webfonts","Webfonts",{"title":3035,"path":3040,"stem":3041,"children":3042,"order":384},"/components","06.components/index",[3043],{"title":3035,"path":3040,"stem":3041,"order":384},{"title":3045,"path":3046,"stem":3047,"order":3048},"Community Assets","/community-assets","07.community-assets",7,{"title":3050,"path":3051,"stem":3052,"children":3053,"order":3055},"Templates","/templates","08.templates/index",[3054],{"title":3050,"path":3051,"stem":3052,"order":3055},8,{"title":3057,"path":3058,"stem":3059,"children":3060},"CSS","/css","09.css/00.index",[3061,3108,3145],{"path":3062,"title":3063,"children":3064},"/css/tailwind/","Tailwind CSS",[3065,3068,3070,3073,3076,3079,3082,3085,3088,3091,3094,3097,3100,3102,3105],{"path":3066,"title":3067},"/css/tailwind/#installation","Installation",{"path":3069,"title":203},"/css/tailwind/#usage",{"path":3071,"title":3072},"/css/tailwind/#peer-dependencies","Peer Dependencies",{"path":3074,"title":3075},"/css/tailwind/#theme-variables","Theme Variables",{"path":3077,"title":3078},"/css/tailwind/#logical-properties","Logical Properties",{"path":3080,"title":3081},"/css/tailwind/#typography-examples","Typography Examples",{"path":3083,"title":3084},"/css/tailwind/#color-examples","Color Examples",{"path":3086,"title":3087},"/css/tailwind/#border-examples","Border Examples",{"path":3089,"title":3090},"/css/tailwind/#shadow-examples","Shadow Examples",{"path":3092,"title":3093},"/css/tailwind/#miscellaneous-utilities","Miscellaneous Utilities",{"path":3095,"title":3096},"/css/tailwind/#nord-components","Nord Components",{"path":3098,"title":3099},"/css/tailwind/#form-utilities","Form Utilities",{"path":3101,"title":3017},"/css/tailwind/#grid",{"path":3103,"title":3104},"/css/tailwind/#states-hover-focus-etc","States (Hover, Focus, etc.)",{"path":3106,"title":3107},"/css/tailwind/#extending-the-theme","Extending the Theme",{"path":3109,"title":3110,"children":3111},"/css/css-framework/","Legacy CSS Framework",[3112,3114,3116,3119,3122,3125,3128,3130,3133,3136,3139,3142],{"path":3113,"title":3067},"/css/css-framework/#installation",{"path":3115,"title":203},"/css/css-framework/#usage",{"path":3117,"title":3118},"/css/css-framework/#utilities","Utilities",{"path":3120,"title":3121},"/css/css-framework/#reset-utility","Reset Utility",{"path":3123,"title":3124},"/css/css-framework/#typographic-utilities","Typographic Utilities",{"path":3126,"title":3127},"/css/css-framework/#font-size-utilities","Font Size Utilities",{"path":3129,"title":3005},"/css/css-framework/#color-utilities",{"path":3131,"title":3132},"/css/css-framework/#border-utilities","Border Utilities",{"path":3134,"title":3135},"/css/css-framework/#box-shadow-utilities","Box Shadow Utilities",{"path":3137,"title":3138},"/css/css-framework/#grid-and-container-utilities","Grid & Container Utilities",{"path":3140,"title":3141},"/css/css-framework/#spacing-utilities","Spacing Utilities",{"path":3143,"title":3144},"/css/css-framework/#css-custom-properties","CSS Custom Properties",{"path":3146,"title":3147,"children":3148},"/css/eslint/","ESLint Plugin",[3149,3151,3153,3156,3159,3162],{"path":3150,"title":3067},"/css/eslint/#installation",{"path":3152,"title":203},"/css/eslint/#usage",{"path":3154,"title":3155},"/css/eslint/#nord-rules","Nord Rules",{"path":3157,"title":3158},"/css/eslint/#tailwind-rules","Tailwind Rules",{"path":3160,"title":3161},"/css/eslint/#custom-configuration","Custom Configuration",{"path":3163,"title":3164},"/css/eslint/#class-detection","Class Detection",{"title":3166,"path":3167,"stem":3168,"children":3169,"order":3171},"Nordicons","/nordicons","10.nordicons/index",[3170],{"title":3166,"path":3167,"stem":3168,"order":3171},10,{"title":3173,"path":3174,"stem":3175,"children":3176},"Themes","/themes","11.themes/index",[3177,3180,3182,3185,3187,3190,3193,3196,3199,3202,3205],{"path":3178,"title":3179},"#top","Overview",{"path":3181,"title":3067},"#installation",{"path":3183,"title":3184},"#available-themes","Available Themes",{"path":3186,"title":1014},"#examples",{"path":3188,"title":3189},"#dark-mode","Dark Mode",{"path":3191,"title":3192},"#creating-themes","Creating Themes",{"path":3194,"title":3195},"#accent-color","Accent Color",{"path":3197,"title":3198},"#top-bar-theming","Top Bar theming",{"path":3200,"title":3201},"#logo-usage","Logo Usage",{"path":3203,"title":3204},"#theming-in-figma","Theming in Figma",{"path":3206,"title":3207},"#theme-builder","Theme Builder",{"title":3209,"path":3210,"stem":3211,"children":3212},"AI","/ai","12.ai/0.index",[3213,3215,3219],{"title":3214,"path":3210,"stem":3211},"AI Integration",{"title":3216,"path":3217,"stem":3218},"LLMs.txt","/ai/llms-txt","12.ai/02.llms-txt",{"title":3220,"path":3221,"stem":3222},"Agent Skills","/ai/skills","12.ai/03.skills",{"title":3224,"path":3225,"stem":3226},"Downloads","/downloads","13.downloads",{"title":3228,"path":3229,"stem":3230},"FAQ","/faq","14.faq",{"title":2939,"path":3232,"stem":3233},"/about","about",{"title":1310,"path":3235,"stem":1309},"/accessibility",{"title":3237,"path":3238,"stem":3239},"Backlog Prioritization Model","/backlog-prioritization-model","backlog-prioritization-model",{"title":3241,"path":3242,"stem":3243},"Careers","/careers","careers",{"title":3245,"path":3246,"stem":3247},"Contributing","/contributing","contributing",{"title":3249,"path":3250,"stem":3251},"Help & Feedback","/help","help",{"title":238,"path":3253,"stem":3254},"/","index",{"title":3256,"path":3257,"stem":3258},"Terms of Use","/terms","terms",{"hasPlayground":22,"stories":3260},[3261,3262,3263,3264,3265,3266,3267,3268,3269,3270,3271,3272,3273,3274,3275,3276,3277,3278,3279,3280,3281,3282,3283,3284],{"id":1387,"name":1010,"exportName":1010,"html":1388,"js":1389},{"id":1391,"name":1392,"exportName":1393,"html":1394,"js":1395},{"id":1397,"name":1017,"exportName":1017,"html":1398,"js":1399},{"id":1401,"name":1154,"exportName":1154,"html":1402,"js":1403},{"id":1405,"name":1036,"exportName":1036,"html":1406},{"id":1408,"name":912,"exportName":912,"html":1409},{"id":1411,"name":1412,"exportName":954,"html":1413},{"id":1415,"name":1079,"exportName":1079,"html":1416,"js":1417},{"id":1419,"name":1420,"exportName":1096,"html":1421,"js":1422},{"id":1424,"name":1099,"exportName":1099,"html":1425,"js":1426},{"id":1428,"name":1429,"exportName":1135,"html":1430,"js":1431},{"id":1433,"name":1434,"exportName":1166,"html":1435,"js":1436},{"id":1438,"name":1169,"exportName":1169,"html":1439,"js":1440},{"id":1442,"name":1225,"exportName":1225,"html":1443,"js":1444},{"id":1446,"name":1447,"exportName":1447,"html":1448,"js":1449},{"id":1451,"name":1300,"exportName":1300,"html":1452,"js":1453},{"id":1455,"name":1456,"exportName":1208,"html":1457,"js":1458},{"id":1460,"name":1461,"exportName":1222,"html":1462,"js":1463},{"id":1465,"name":1466,"exportName":1250,"html":1467,"js":1468},{"id":1470,"name":1471,"exportName":1296,"html":1472,"js":1473},{"id":1475,"name":1261,"exportName":1266,"html":1476,"js":1477},{"id":1479,"name":1280,"exportName":1280,"html":1480,"js":1481},{"id":1483,"name":1484,"exportName":1484,"html":1485},{"id":1487,"name":217,"exportName":217,"html":1488},[3286,3301],{"slug":957,"title":958,"meta":3287},{"name":1581,"tagName":859,"description":3288,"status":7,"isNew":8,"category":9,"lightDom":10,"properties":3289,"slots":3292,"events":3296,"cssProperties":3297,"stateAttributes":3298,"methods":3299,"dependencies":3300},"Groups declarative \u003Ccode><nord-combobox-option>\u003C/code> children under a heading inside a\n\u003Ca href=\"/components/combobox/\">Combobox\u003C/a>:\n\n``\u003Ccode>html\n<nord-combobox>\n  <nord-combobox-group label=\"Frameworks\">\n    <nord-combobox-option value=\"next\">Next.js</nord-combobox-option>\n  </nord-combobox-group>\n</nord-combobox>\n\u003C/code>`\u003Ccode>\n\nContained options inherit this \u003C/code>label\u003Ccode> as their group. The element renders\nnothing itself and is hidden with \u003C/code>display: none`.",[3290],{"name":40,"attribute":40,"type":14,"default":15,"description":3291,"reflects":22,"fieldRelated":8},"The group heading shown above its options.",[3293],{"name":3294,"description":3295},"(default)","The group's \u003Ccode><nord-combobox-option>\u003C/code> children.",[],[],[],[],[],{"slug":915,"title":916,"meta":3302},{"name":1584,"tagName":837,"description":3303,"status":7,"isNew":8,"category":9,"lightDom":10,"properties":3304,"slots":3311,"events":3314,"cssProperties":3315,"stateAttributes":3316,"methods":3317,"dependencies":3318},"A declarative option for a \u003Ca href=\"/components/combobox/\">Combobox\u003C/a>. Place these as\nchildren of \u003Ccode><nord-combobox>\u003C/code> instead of (or as an alternative to) setting the\n\u003Ccode>.options\u003C/code> property:\n\n``\u003Ccode>html\n<nord-combobox>\n  <nord-combobox-option value=\"bug\">Bug</nord-combobox-option>\n  <nord-combobox-option value=\"feature\">Feature</nord-combobox-option>\n</nord-combobox>\n\u003C/code>`\u003Ccode>\n\nThe option's child markup becomes the rendered row, so you can author custom\nitems (e.g. an avatar + text) without an \u003C/code>html\u003Ccode> string or a render function.\nSet the \u003C/code>label\u003Ccode> 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 \u003C/code>display: none`.",[3305,3307,3309],{"name":13,"attribute":13,"type":14,"default":15,"description":3306,"reflects":22,"fieldRelated":8},"The value submitted with the form and tracked in the combobox's \u003Ccode>value\u003C/code>.",{"name":65,"attribute":65,"type":19,"default":20,"description":3308,"reflects":22,"fieldRelated":8},"Whether the option is selectable.",{"name":40,"attribute":40,"type":44,"description":3310,"reflects":22,"fieldRelated":8},"Text used for filtering and the accessible name. Defaults to the text content.",[3312],{"name":3294,"description":3313},"The option's label / custom content.",[],[],[],[],[],[3320,3326,3330,3331,3332,3333,3334,3335,3336,3337,3338,3339,3343,3347,3350,3351,3352,3353,3354,3359,3360,3371,3372,3380,3381,3382,3383,3384,3395,3398,3399,3400,3401,3402,3407,3410,3411,3412,3420,3421,3422,3423,3424,3425,3426,3427,3430,3431,3432,3433,3434,3438,3439,3442,3443,3444,3447,3448,3449,3450,3451],{"name":1491,"tagName":1492,"description":1493,"category":1494,"status":7,"isNew":8,"lightDom":22,"parts":3321},[3322,3323,3324,3325],{"name":1497,"tagName":1498,"description":1499},{"name":1501,"tagName":1502,"description":1503},{"name":1505,"tagName":1506,"description":1507},{"name":1509,"tagName":1510,"description":1511},{"name":1513,"tagName":1514,"description":1515,"category":1494,"status":7,"isNew":8,"lightDom":8,"parts":3327},[3328,3329],{"name":1518,"tagName":1519,"description":1520},{"name":1522,"tagName":1523,"description":1524},{"name":513,"tagName":1526,"description":1527,"category":9,"status":7,"isNew":8,"lightDom":22},{"name":1529,"tagName":1530,"description":1531,"category":1532,"status":7,"isNew":8,"lightDom":8},{"name":1534,"tagName":1535,"description":1536,"category":1537,"status":7,"isNew":8,"lightDom":8},{"name":1539,"tagName":1540,"description":1541,"category":1537,"status":7,"isNew":8,"lightDom":8},{"name":1543,"tagName":1544,"description":1545,"category":1546,"status":7,"isNew":8,"lightDom":8},{"name":1548,"tagName":1549,"description":1550,"category":1546,"status":7,"isNew":8,"lightDom":8},{"name":1552,"tagName":1553,"description":1554,"category":1555,"status":7,"isNew":8,"lightDom":8},{"name":1557,"tagName":1558,"description":1559,"category":1494,"status":7,"isNew":8,"lightDom":8},{"name":1561,"tagName":1562,"description":1563,"category":9,"status":7,"isNew":8,"lightDom":8},{"name":1565,"tagName":1566,"description":1567,"category":1494,"status":7,"isNew":8,"lightDom":22,"parts":3340},[3341,3342],{"name":1570,"tagName":1571,"description":1572},{"name":1574,"tagName":1575,"description":1576},{"name":4,"tagName":5,"description":1578,"category":9,"status":7,"isNew":8,"lightDom":22,"parts":3344},[3345,3346],{"name":1581,"tagName":859,"description":1582},{"name":1584,"tagName":837,"description":1585},{"name":1587,"tagName":1588,"description":1589,"category":1546,"status":7,"isNew":8,"lightDom":8,"parts":3348},[3349],{"name":1592,"tagName":1593,"description":1594},{"name":1596,"tagName":1597,"description":1598,"category":9,"status":7,"isNew":8,"lightDom":8},{"name":1600,"tagName":1601,"description":1602,"category":9,"status":7,"isNew":8,"lightDom":22},{"name":1604,"tagName":1605,"description":1606,"category":1494,"status":7,"isNew":8,"lightDom":8},{"name":1608,"tagName":1609,"description":1610,"category":1494,"status":7,"isNew":8,"lightDom":8},{"name":1612,"tagName":1613,"description":1614,"category":1615,"status":7,"isNew":8,"lightDom":8,"parts":3355},[3356,3357,3358],{"name":1618,"tagName":1619,"description":1620},{"name":1622,"tagName":1623,"description":1624},{"name":1626,"tagName":1627,"description":1628},{"name":1630,"tagName":1631,"description":1632,"category":1537,"status":7,"isNew":8,"lightDom":8},{"name":217,"tagName":305,"description":1634,"category":9,"status":7,"isNew":8,"lightDom":22,"parts":3361},[3362,3363,3364,3365,3366,3367,3368,3369,3370],{"name":1637,"tagName":1638,"description":1639},{"name":1641,"tagName":368,"description":1642},{"name":1644,"tagName":1645,"description":1646},{"name":1648,"tagName":1649,"description":1650},{"name":1652,"tagName":316,"description":1653},{"name":1655,"tagName":1656,"description":1657},{"name":1659,"tagName":1660,"description":1661},{"name":1663,"tagName":1664,"description":1665},{"name":1667,"tagName":1668,"description":1669},{"name":1671,"tagName":1672,"description":1673,"category":9,"status":7,"isNew":8,"lightDom":8},{"name":1675,"tagName":1676,"description":1677,"category":9,"status":7,"isNew":8,"lightDom":22,"parts":3373},[3374,3375,3376,3377,3378,3379],{"name":1680,"tagName":1681,"description":1682},{"name":1684,"tagName":1685,"description":1686},{"name":1688,"tagName":1689,"description":1690},{"name":1692,"tagName":1693,"description":1694},{"name":1696,"tagName":1697,"description":1698},{"name":1700,"tagName":1701,"description":1702},{"name":1704,"tagName":1705,"description":1706,"category":1494,"status":7,"isNew":8,"lightDom":8},{"name":1708,"tagName":1709,"description":1710,"category":1494,"status":7,"isNew":8,"lightDom":8},{"name":1712,"tagName":1713,"description":1714,"category":1532,"status":7,"isNew":8,"lightDom":8},{"name":671,"tagName":1716,"description":1717,"category":9,"status":7,"isNew":8,"lightDom":8},{"name":1719,"tagName":1720,"description":1721,"category":1555,"status":7,"isNew":8,"lightDom":22,"parts":3385},[3386,3387,3388,3389,3390,3391,3392,3393,3394],{"name":1724,"tagName":1725,"description":1726},{"name":1728,"tagName":1729,"description":1730},{"name":1732,"tagName":1733,"description":1734},{"name":1736,"tagName":1737,"description":1738},{"name":1740,"tagName":1741,"description":1742},{"name":1744,"tagName":1745,"description":1746},{"name":1748,"tagName":1749,"description":1750},{"name":1752,"tagName":1753,"description":1754},{"name":1756,"tagName":1757,"description":1758},{"name":1760,"tagName":1761,"description":1762,"category":815,"status":7,"isNew":8,"lightDom":22,"parts":3396},[3397],{"name":1765,"tagName":1766,"description":1767},{"name":1769,"tagName":1770,"description":1771,"category":1494,"status":7,"isNew":8,"lightDom":8},{"name":1773,"tagName":1774,"description":1775,"category":1546,"status":7,"isNew":8,"lightDom":8},{"name":1777,"tagName":1778,"description":1779,"category":1537,"status":7,"isNew":8,"lightDom":22},{"name":1291,"tagName":1781,"description":1782,"category":1615,"status":7,"isNew":8,"lightDom":8},{"name":1784,"tagName":1785,"description":1786,"category":1787,"status":7,"isNew":8,"lightDom":8,"parts":3403},[3404,3405,3406],{"name":1790,"tagName":1791,"description":1792},{"name":1794,"tagName":1795,"description":1796},{"name":1798,"tagName":1799,"description":1800},{"name":1802,"tagName":1803,"description":1804,"category":1537,"status":7,"isNew":8,"lightDom":8,"parts":3408},[3409],{"name":1807,"tagName":1808,"description":1809},{"name":1811,"tagName":1812,"description":1813,"category":9,"status":7,"isNew":8,"lightDom":22},{"name":1815,"tagName":1816,"description":1817,"category":9,"status":7,"isNew":8,"lightDom":22},{"name":1819,"tagName":1820,"description":1821,"category":1787,"status":7,"isNew":8,"lightDom":22,"parts":3413},[3414,3415,3416,3417,3418,3419],{"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,"category":1615,"status":7,"isNew":8,"lightDom":8},{"name":1852,"tagName":1853,"description":1854,"category":1537,"status":7,"isNew":8,"lightDom":8},{"name":1856,"tagName":1857,"description":1858,"category":1537,"status":7,"isNew":8,"lightDom":8},{"name":1860,"tagName":1861,"description":1862,"category":1532,"status":7,"isNew":8,"lightDom":8},{"name":1864,"tagName":1865,"description":1866,"category":9,"status":7,"isNew":8,"lightDom":8},{"name":1868,"tagName":1869,"description":1870,"category":9,"status":7,"isNew":8,"lightDom":8},{"name":1872,"tagName":1873,"description":1874,"category":1494,"status":7,"isNew":8,"lightDom":8},{"name":1876,"tagName":1877,"description":1878,"category":1546,"status":7,"isNew":8,"lightDom":8,"parts":3428},[3429],{"name":1881,"tagName":1882,"description":1883},{"name":653,"tagName":1885,"description":1886,"category":9,"status":7,"isNew":8,"lightDom":8},{"name":1888,"tagName":1889,"description":1890,"category":1537,"status":7,"isNew":8,"lightDom":8},{"name":1892,"tagName":1893,"description":1894,"category":1537,"status":7,"isNew":8,"lightDom":8},{"name":1896,"tagName":1897,"description":1898,"category":1494,"status":7,"isNew":8,"lightDom":8},{"name":1900,"tagName":1901,"description":1902,"category":1787,"status":7,"isNew":8,"lightDom":8,"parts":3435},[3436,3437],{"name":1905,"tagName":1906,"description":1907},{"name":1909,"tagName":1910,"description":1911},{"name":1913,"tagName":1914,"description":1915,"category":1555,"status":7,"isNew":8,"lightDom":8},{"name":1917,"tagName":1918,"description":1919,"category":815,"status":7,"isNew":8,"lightDom":8,"parts":3440},[3441],{"name":1922,"tagName":1923,"description":1924},{"name":1926,"tagName":1927,"description":1928,"category":9,"status":7,"isNew":8,"lightDom":8},{"name":1930,"tagName":1931,"description":1932,"category":9,"status":7,"isNew":8,"lightDom":8},{"name":1934,"tagName":1935,"description":1936,"category":1537,"status":7,"isNew":8,"lightDom":8,"parts":3445},[3446],{"name":1939,"tagName":1940,"description":1941},{"name":1943,"tagName":1944,"description":1945,"category":9,"status":7,"isNew":8,"lightDom":8},{"name":1947,"tagName":1948,"description":1949,"category":1615,"status":7,"isNew":8,"lightDom":8},{"name":1951,"tagName":1952,"description":1953,"category":1494,"status":7,"isNew":8,"lightDom":8},{"name":1955,"tagName":1956,"description":1957,"category":815,"status":7,"isNew":8,"lightDom":8},{"name":1959,"tagName":1960,"description":1961,"category":815,"status":7,"isNew":8,"lightDom":8},{"hasPlayground":22,"stories":3453},[3454,3455,3456,3457,3458,3459,3460,3461,3462,3463,3464,3465,3466,3467,3468,3469,3470,3471,3472,3473,3474,3475,3476,3477],{"id":1387,"name":1010,"exportName":1010,"html":1388,"js":1389},{"id":1391,"name":1392,"exportName":1393,"html":1394,"js":1395},{"id":1397,"name":1017,"exportName":1017,"html":1398,"js":1399},{"id":1401,"name":1154,"exportName":1154,"html":1402,"js":1403},{"id":1405,"name":1036,"exportName":1036,"html":1406},{"id":1408,"name":912,"exportName":912,"html":1409},{"id":1411,"name":1412,"exportName":954,"html":1413},{"id":1415,"name":1079,"exportName":1079,"html":1416,"js":1417},{"id":1419,"name":1420,"exportName":1096,"html":1421,"js":1422},{"id":1424,"name":1099,"exportName":1099,"html":1425,"js":1426},{"id":1428,"name":1429,"exportName":1135,"html":1430,"js":1431},{"id":1433,"name":1434,"exportName":1166,"html":1435,"js":1436},{"id":1438,"name":1169,"exportName":1169,"html":1439,"js":1440},{"id":1442,"name":1225,"exportName":1225,"html":1443,"js":1444},{"id":1446,"name":1447,"exportName":1447,"html":1448,"js":1449},{"id":1451,"name":1300,"exportName":1300,"html":1452,"js":1453},{"id":1455,"name":1456,"exportName":1208,"html":1457,"js":1458},{"id":1460,"name":1461,"exportName":1222,"html":1462,"js":1463},{"id":1465,"name":1466,"exportName":1250,"html":1467,"js":1468},{"id":1470,"name":1471,"exportName":1296,"html":1472,"js":1473},{"id":1475,"name":1261,"exportName":1266,"html":1476,"js":1477},{"id":1479,"name":1280,"exportName":1280,"html":1480,"js":1481},{"id":1483,"name":1484,"exportName":1484,"html":1485},{"id":1487,"name":217,"exportName":217,"html":1488},{"components":3479,"css":3482,"themes":3485},{"url":3480,"version":3481},"https://nordcdn.net/ds/components/4.26.2/index.js","4.26.2",{"url":3483,"version":3484},"https://nordcdn.net/ds/css/5.1.0/nord.min.css","5.1.0",{"nord":3486,"nordDark":3488,"vet":3490,"vetDark":3492},{"url":3487},"https://nordcdn.net/ds/themes/9.0.9/nord.css",{"url":3489},"https://nordcdn.net/ds/themes/9.0.9/nord-dark.css",{"url":3491},"https://nordcdn.net/ds/themes/9.0.9/vet.css",{"url":3493},"https://nordcdn.net/ds/themes/9.0.9/vet-dark.css",1782988330696]