[{"data":1,"prerenderedAt":2665},["ShallowReactive",2],{"updates-july-2026-component-updates":3,"$fEjZpFH0sX5lf9r5DqHjpE5W7CJ1Rj0Oiu25ygAOvmSk":846,"$f8f5lnJ37FCtouC_Q-20Y_lk47T8QT59vG2H3NVA0ikU":1206,"$fH8KF6TaNm7Prkw5PjE_U_K0_jhwqU4rL9IgcxTR8qEY":1321,"example-stories-date-range-picker":1791,"example-stories-filter-dropdown":1864,"example-stories-outline":1920,"example-stories-pagination":1947,"example-stories-accordion":1976,"$fsnSGTjxJbwbyeIKGKRLM1aZyvHCO750tb-yYxbPAr8k":2004,"block-usage-blocks":2020,"sidebar-component-doc-meta":2536},{"id":4,"title":5,"author":6,"body":7,"date":831,"description":832,"extension":833,"external":834,"icon":835,"keywords":835,"meta":836,"native":834,"navTitle":835,"navigation":837,"path":841,"railLabel":835,"seo":842,"sidebar":834,"sitemap":843,"stem":844,"url":835,"__hash__":845},"updates\u002Fupdates\u002Fjuly-2026-component-updates.md","18 New Components, 56 Component Parts, and a Redesigned Docs Website","Joseph Anson and João Gonçalves",{"type":8,"value":9,"toc":807},"minimark",[10,17,24,27,36,39,84,89,92,95,98,130,133,137,143,148,177,180,183,187,193,196,199,202,234,240,243,247,250,279,282,286,289,295,299,302,305,308,311,404,411,416,419,426,429,432,439,442,449,452,459,462,482,485,488,491,517,522,526,529,532,548,551,554,557,585,588,591,594,610,614,617,621,627,632,635,640,644,647,653,658,661,665,668,714,718,721,782,792,796,799,802],[11,12,13],"nord-intro",{},[14,15,16],"p",{},"The July 2026 Nord release pairs a redesigned documentation website with Nord 5 component releases. The new docs make the system easier to browse, preview, test and copy from, while the component library adds new patterns across forms, filters, data display, navigation, containers and layout.",[14,18,19],{},[20,21],"img",{"alt":22,"src":23},"New Nord Design System homepage showing the redesigned docs shell, release banner and live component preview","\u002Fimg\u002Fupdates\u002Fjuly-2026-component-updates\u002Fnew-website-home.png",[14,25,26],{},"This release brings together two related pieces of work. The first is a redesigned documentation website that feels closer to the products built with Nord: persistent navigation, clear category browsing, full-site light and dark mode, a command-style search entry point, live component previews and quick template previews. The second is the component release itself, with new Light DOM components, refreshed guidance and Storybook-backed examples across the library.",[14,28,29,30,35],{},"For package-level release notes and exact version history, see the ",[31,32,34],"a",{"href":33},"\u002Fchangelogs\u002F","Web Components changelog",". This article focuses on what changed from a product and documentation point of view.",[14,37,38],{},"At a glance:",[40,41,42,46,54,57,65,72],"ul",{},[43,44,45],"li",{},"The docs website has a new application-style shell with persistent navigation, search, page outlines and light\u002Fdark mode throughout.",[43,47,48,49,53],{},"The ",[31,50,52],{"href":51},"\u002Fcomponents\u002F","Components overview"," is now grouped by purpose, matching the way teams look for UI building blocks.",[43,55,56],{},"Component pages combine guidance, Storybook-backed examples, accessibility notes and generated API reference.",[43,58,59,60,64],{},"The new ",[31,61,63],{"href":62},"\u002Fblocks\u002F","Blocks"," gallery provides copy-paste product patterns built from Nord components.",[43,66,59,67,71],{},[31,68,70],{"href":69},"\u002Ftemplates\u002F","Templates"," gallery lets teams quickly preview full-page layouts, copy their markup, or open them full screen.",[43,73,74,75,79,80,83],{},"Nord 5 adds ",[76,77,78],"strong",{},"18 new components"," made up of ",[76,81,82],{},"56 individual component parts",", plus updates to existing components, across the same groups used on the Components overview.",[85,86,88],"h2",{"id":87},"new-website-design","New website design",[14,90,91],{},"The new website is built around the way teams actually use a design system. Instead of treating the docs as a set of isolated reference pages, the redesigned site brings navigation, examples, status, search and release context into the same workspace.",[14,93,94],{},"The homepage now opens with a live product surface built from Nord components. It shows the design language in context before asking people to choose a package or read an API table. The release banner at the top points directly to the latest component work, so teams can discover what changed without digging through changelogs first.",[14,96,97],{},"The site shell also gives the docs more room to grow:",[40,99,100,106,112,118,124],{},[43,101,102,105],{},[76,103,104],{},"Persistent sidebar navigation"," keeps components, design tokens, Tailwind CSS, blocks, templates, icons and updates close at hand.",[43,107,108,111],{},[76,109,110],{},"Light and dark mode throughout"," lets teams review documentation, components, blocks and templates in the same appearance modes their products support.",[43,113,114,117],{},[76,115,116],{},"Search entry points"," are always visible, with keyboard hints for people who move quickly through the docs.",[43,119,120,123],{},[76,121,122],{},"Right-side outlines"," make long component pages easier to scan, especially pages with examples, accessibility notes and generated API sections.",[43,125,126,129],{},[76,127,128],{},"Status badges"," show when a component is new, alpha, beta, deprecated, Light DOM based, or updated.",[14,131,132],{},"The goal is not only to make the website look newer. It is to make the documentation behave more like a working tool for product teams.",[85,134,136],{"id":135},"browsing-components-by-purpose","Browsing components by purpose",[14,138,139],{},[20,140],{"alt":141,"src":142},"Components overview showing grouped component cards and the page outline","\u002Fimg\u002Fupdates\u002Fjuly-2026-component-updates\u002Fcomponents-overview.png",[14,144,48,145,147],{},[31,146,52],{"href":51}," now groups the library by the same categories used across the site:",[40,149,150,153,156,159,162,165,168,171,174],{},[43,151,152],{},"Action",[43,154,155],{},"Data input",[43,157,158],{},"List & table",[43,160,161],{},"Content & media",[43,163,164],{},"Feedback & status",[43,166,167],{},"Navigation",[43,169,170],{},"Overlay",[43,172,173],{},"Layout",[43,175,176],{},"Container",[14,178,179],{},"This makes the overview easier to scan than one long alphabetical list. You can still filter by name from the header, but the default view answers a more useful question: \"What kind of UI am I trying to build?\"",[14,181,182],{},"Each card pairs a component illustration with a short description and release status. New components are visible at a glance, deprecated components stay discoverable without being promoted, and Light DOM components are clearly marked. The sidebar also mirrors the component list, so people can jump directly into a component page without losing the larger category context.",[85,184,186],{"id":185},"richer-component-pages","Richer component pages",[14,188,189],{},[20,190],{"alt":191,"src":192},"Date Range Picker component page showing status badges, Storybook controls and generated page outline","\u002Fimg\u002Fupdates\u002Fjuly-2026-component-updates\u002Fdate-range-picker-docs.png",[14,194,195],{},"Component pages are now designed to teach usage before exposing the complete API reference. The top of a page gives the component description, status badges and a Storybook-backed example. From there, the page moves through usage guidance, composition notes, examples, accessibility guidance and generated API sections.",[14,197,198],{},"The embedded example viewer is the biggest shift. Instead of static screenshots or isolated snippets, examples now run as live stories with controls, code and accessibility tabs. This lets people test the component state before copying an implementation detail.",[14,200,201],{},"The page structure is consistent across new and existing components:",[40,203,204,210,216,222,228],{},[43,205,206,209],{},[76,207,208],{},"Usage guidance"," explains when to reach for the component and how it fits with nearby patterns.",[43,211,212,215],{},[76,213,214],{},"Composition sections"," show how compound components and parts work together.",[43,217,218,221],{},[76,219,220],{},"Examples"," use Storybook stories, so the same source supports docs, testing and the standalone Storybook.",[43,223,224,227],{},[76,225,226],{},"Accessibility notes"," call out labeling, keyboard behavior and screen reader expectations.",[43,229,230,233],{},[76,231,232],{},"Generated API reference"," documents props, slots, methods, events, CSS custom properties, state attributes and dependencies from source metadata.",[14,235,236],{},[20,237],{"alt":238,"src":239},"Accordion component page showing a composed component example and controls panel","\u002Fimg\u002Fupdates\u002Fjuly-2026-component-updates\u002Faccordion-docs.png",[14,241,242],{},"Compound components benefit the most from this format. Accordion, Field, Combobox, Filter Bar and Pagination all rely on composition. The docs can now explain the model in prose, show a working example, and keep the generated API for the parent and parts on the same page.",[85,244,246],{"id":245},"component-model","Component model",[14,248,249],{},"The new components also establish the direction for future Nord APIs. They are designed to be easier to compose in product code and easier to document from source.",[40,251,252,267,273],{},[43,253,254,257,258,262,263,266],{},[76,255,256],{},"Light DOM rendering for new components"," lets application CSS, ",[259,260,261],"code",{},"@nordhealth\u002Fcss"," utilities and global styles reach component internals without ",[259,264,265],{},"::part",". Existing Shadow DOM components are unchanged.",[43,268,269,272],{},[76,270,271],{},"Composition-first APIs"," split larger patterns into small parts that can be assembled to match the interface anatomy. Field, Item, Pagination, Accordion and Combobox are all examples of this approach.",[43,274,275,278],{},[76,276,277],{},"Shared behavior controllers"," keep focus management, open state, disabled state, transitions, roving focus and active descendant behavior consistent across component families.",[14,280,281],{},"This is why the release is bigger than a set of isolated tags. It gives product teams a more consistent way to build forms, filters, disclosure patterns, lists and navigation while keeping each part inspectable in the docs.",[85,283,285],{"id":284},"component-releases","Component releases",[14,287,288],{},"Nord 5 is a broad component release, but the changes are not all the same kind of change. Some are brand new components, some are new component families, and others are updates to existing components so they work better with the new model.",[14,290,291,292,294],{},"The release follows the same grouping as the ",[31,293,52],{"href":51},".",[296,297,152],"h3",{"id":298},"action",[14,300,301],{},"Action components do not get a new standalone primitive in this release, but the redesigned docs make action patterns easier to evaluate. Button, Button Group, Command Menu, Message and Segmented Control now appear in the grouped overview with clearer illustrations and status context.",[14,303,304],{},"This also matters for blocks and templates, where action components usually appear as part of a larger workflow rather than as isolated examples.",[296,306,155],{"id":307},"data-input",[14,309,310],{},"Data input is the largest part of this release. It includes new form structure, richer picker controls and a complete filter family.",[40,312,313,320,323,335,342,349,356,363,370,377,384,397],{},[43,314,315,319],{},[31,316,318],{"href":317},"\u002Fcomponents\u002Ffield\u002F","Field",", Field Group and Field Set provide composable form layout and labeling primitives.",[43,321,322],{},"Existing form controls still work standalone, but can now be wrapped in Field when you need shared label, hint, error and required behavior.",[43,324,325,329,330,334],{},[31,326,328],{"href":327},"\u002Fcomponents\u002Fcombobox\u002F","Combobox"," and ",[31,331,333],{"href":332},"\u002Fcomponents\u002Fautocomplete\u002F","Autocomplete"," add virtualized option lists, declarative options and groups, async patterns, clear buttons, slots, auto-highlight behavior, disabled items and creatable entries.",[43,336,337,341],{},[31,338,340],{"href":339},"\u002Fcomponents\u002Fnumber-field\u002F","Number Field"," adds formatted numeric input with parsing and formatting callbacks, currency and unit slots, and wheel and scrub interactions.",[43,343,344,348],{},[31,345,347],{"href":346},"\u002Fcomponents\u002Fotp-field\u002F","OTP Field"," adds grouped one-time-code input with normalization, masking, form integration and right-to-left support.",[43,350,351,355],{},[31,352,354],{"href":353},"\u002Fcomponents\u002Fdate-range-picker\u002F","Date Range Picker"," adds a two-month range calendar, presets, inline mode, custom triggers, responsive single-month collapse, read-only styling and disabled\u002Fhighlighted date callbacks.",[43,357,358,362],{},[31,359,361],{"href":360},"\u002Fcomponents\u002Ffilter-bar\u002F","Filter Bar"," adds composition-first filter controls for table headers and toolbars.",[43,364,365,369],{},[31,366,368],{"href":367},"\u002Fcomponents\u002Ffilter-dropdown\u002F","Filter Dropdown"," adds a chip trigger with selectable options, search, groups, tree selection, select-all, clearable and loading states.",[43,371,372,376],{},[31,373,375],{"href":374},"\u002Fcomponents\u002Ffilter-date-range\u002F","Filter Date Range"," brings the date-range picker pattern into the filter family.",[43,378,379,383],{},[31,380,382],{"href":381},"\u002Fcomponents\u002Fcalendar\u002F","Calendar"," now supports native range selection, hover previews, multi-month display and date disabling\u002Fhighlighting callbacks.",[43,385,386,390,391,329,394,294],{},[31,387,389],{"href":388},"\u002Fcomponents\u002Ftime-picker\u002F","Time Picker"," is a new native time field paired with a dropdown of selectable times at a configurable interval, with ",[259,392,393],{},"round-to-interval",[259,395,396],{},"hour-format",[43,398,399,403],{},[31,400,402],{"href":401},"\u002Fcomponents\u002Ffieldset\u002F","Fieldset"," is deprecated in favor of the new Field family.",[405,406],"example-usage",{":full-width":407,"component":408,"name":409,"story":410},"true","date-range-picker","Date range picker","Basic",[405,412],{":full-width":407,"component":413,"name":414,"story":415},"filter-dropdown","Filter dropdown","Single",[296,417,158],{"id":418},"list-table",[14,420,421,425],{},[31,422,424],{"href":423},"\u002Fcomponents\u002Fitem\u002F","Item"," adds a composable row primitive for people, files, settings and other single pieces of content. It is useful anywhere a product surface needs a repeated row with leading media, primary content, metadata and trailing actions.",[14,427,428],{},"Item is intentionally small. It gives teams a consistent row anatomy without forcing every list or table-like surface into the same full table component.",[296,430,161],{"id":431},"content-media",[14,433,434,438],{},[31,435,437],{"href":436},"\u002Fcomponents\u002Fkbd\u002F","Kbd"," and Kbd Group add styled keyboard key and shortcut display. They are useful in docs, command menus, keyboard shortcut references and power-user workflows.",[14,440,441],{},"The new docs use keyboard hints in navigation and search, so these components also help document Nord itself with Nord components.",[14,443,444,448],{},[31,445,447],{"href":446},"\u002Fcomponents\u002Ftruncate\u002F","Truncate"," adds a primitive for shortening overflowing text with an accessible full-text fallback, useful in tables, cards and dense list rows where space is limited.",[296,450,164],{"id":451},"feedback-status",[14,453,454,458],{},[31,455,457],{"href":456},"\u002Fcomponents\u002Fmeter\u002F","Meter"," adds a static measurement display for values such as usage, battery, capacity or score. It gives teams a lighter-weight choice when they need to communicate a bounded value without implying task progress.",[14,460,461],{},"Existing feedback components also received updates:",[40,463,464,475],{},[43,465,466,470,471,474],{},[31,467,469],{"href":468},"\u002Fcomponents\u002Fbanner\u002F","Banner"," adds an ",[259,472,473],{},"actions"," slot for trailing calls to action or dismiss buttons.",[43,476,477,481],{},[31,478,480],{"href":479},"\u002Fcomponents\u002Ftoast\u002F","Toast"," groups render in the browser top layer above modals.",[14,483,484],{},"These changes make feedback patterns work better in complex application shells, where overlays, navigation and messages often appear at the same time.",[296,486,167],{"id":487},"navigation",[14,489,490],{},"Navigation gains both new components and visual refinements.",[40,492,493,500,507,514],{},[43,494,495,499],{},[31,496,498],{"href":497},"\u002Fcomponents\u002Foutline\u002F","Outline"," adds an in-page table of contents with controlled and scroll-spy modes.",[43,501,502,506],{},[31,503,505],{"href":504},"\u002Fcomponents\u002Fpagination\u002F","Pagination"," adds a composed pagination model with loading, numbered, simple, icon-only, cursor and right-to-left examples.",[43,508,509,513],{},[31,510,512],{"href":511},"\u002Fcomponents\u002Ftab-group\u002F","Tab Group"," now pre-selects the first asynchronously slotted tab in framework rendering.",[43,515,516],{},"Navigation receives refreshed selected, active and hover treatments.",[405,518],{":full-width":407,"component":519,"name":520,"story":521},"outline","Outline overview","Overview",[405,523],{":full-width":407,"component":524,"name":525,"story":521},"pagination","Pagination overview",[296,527,170],{"id":528},"overlay",[14,530,531],{},"Overlay components received updates that make them more predictable in composed product surfaces.",[40,533,534,541],{},[43,535,536,540],{},[31,537,539],{"href":538},"\u002Fcomponents\u002Fpopout\u002F","Popout"," adds opt-in controlled mode.",[43,542,543,547],{},[31,544,546],{"href":545},"\u002Fcomponents\u002Ftooltip\u002F","Tooltip"," stays in the top layer until its fade-out transition ends, preventing flashes behind layout navigation.",[14,549,550],{},"These changes are small from an API point of view, but important for reliability. Popouts and tooltips often sit inside dense tables, filters, modals and navigation shells, where layering bugs are especially visible.",[296,552,173],{"id":553},"layout",[14,555,556],{},"Layout updates focus on application shell behavior and scrollable surfaces.",[40,558,559,569,576,582],{},[43,560,561,565,566,294],{},[31,562,564],{"href":563},"\u002Fcomponents\u002Fscroll-area\u002F","Scroll Area"," is a new scroll container with custom, consistently-styled scrollbars, optional edge fades and ",[259,567,568],{},"always-show-scrollbar",[43,570,571,575],{},[31,572,574],{"href":573},"\u002Fcomponents\u002Faside\u002F","Aside"," and Aside Trigger add a new right-side rail and drawer layout for surfacing secondary content alongside the main view.",[43,577,578,581],{},[31,579,173],{"href":580},"\u002Fcomponents\u002Flayout\u002F"," aligns sticky footers to the live navigation width instead of a hardcoded size.",[43,583,584],{},"Layout, Aside and Aside Trigger receive refreshed selected, active, hover and surface treatments.",[14,586,587],{},"The visual updates are most noticeable in larger screens where side navigation, content, headers and sticky footers need to feel like one coherent application frame.",[296,589,176],{"id":590},"container",[14,592,593],{},"Container components add new ways to group and reveal content.",[40,595,596,603],{},[43,597,598,602],{},[31,599,601],{"href":600},"\u002Fcomponents\u002Faccordion\u002F","Accordion"," adds stacked sections with single- or multi-open behavior.",[43,604,605,609],{},[31,606,608],{"href":607},"\u002Fcomponents\u002Fcollapsible\u002F","Collapsible"," adds a focused show\u002Fhide primitive for a single region.",[405,611],{":full-width":407,"component":612,"name":613,"story":521},"accordion","Accordion overview",[14,615,616],{},"Accordion is for related sets of sections. Collapsible is for one disclosure region. Having both keeps common disclosure patterns consistent without forcing teams to use a larger component than the interface needs.",[85,618,620],{"id":619},"blocks-and-templates","Blocks and templates",[14,622,623],{},[20,624],{"alt":625,"src":626},"Blocks gallery showing copy-paste dashboard patterns built from Nord components","\u002Fimg\u002Fupdates\u002Fjuly-2026-component-updates\u002Fblocks-gallery.png",[14,628,59,629,631],{},[31,630,63],{"href":62}," page shows copy-paste UI sections built from Nord components. Blocks sit between a single component and a full application template: they are small enough to reuse directly, but large enough to show how components work together in real product surfaces.",[14,633,634],{},"The first batch includes dashboard, scheduling, consultation, communication, patient and client, billing, form, onboarding, authentication and layout patterns. They are especially useful when you know the product pattern you need but do not want to start from a blank page.",[636,637],"block-usage",{"slug":638,"title":639},"dashboard\u002Fstat-cards","Dashboard KPI cards",[636,641],{"slug":642,"title":643},"layout\u002Ffilter-toolbar","Filter toolbar",[14,645,646],{},"Blocks are also a practical way to test component combinations. A component can look correct in isolation but still need adjustments once it appears beside filters, cards, tabs, actions, tables and empty states. The blocks gallery gives us a shared place to document those product-level combinations.",[14,648,649],{},[20,650],{"alt":651,"src":652},"Templates gallery showing full-page layouts that can be previewed, copied or opened full screen","\u002Fimg\u002Fupdates\u002Fjuly-2026-component-updates\u002Ftemplates-gallery.png",[14,654,48,655,657],{},[31,656,70],{"href":69}," gallery takes the next step up from blocks. Templates are complete page layouts built from Nord components, grouped by use case such as application, dashboard, layout, login, navigation, settings and theming.",[14,659,660],{},"The important improvement is speed: you can browse the gallery, open a template in place, preview the live page, copy its markup, or view it full screen without leaving the flow. That makes templates useful both for starting a new screen and for quickly checking how components behave together in a realistic page shell.",[85,662,664],{"id":663},"what-to-try-first","What to try first",[14,666,667],{},"If you are reviewing the release, start with these areas:",[669,670,671,677,690,693,699,705,708],"ol",{},[43,672,673,674,676],{},"Open the ",[31,675,52],{"href":51}," and scan the new category groups.",[43,678,679,680,682,683,682,685,329,687,689],{},"Try the ",[31,681,354],{"href":353},", ",[31,684,328],{"href":327},[31,686,361],{"href":360},[31,688,601],{"href":600}," pages to see the new docs format.",[43,691,692],{},"Toggle between light and dark mode while reviewing components, blocks and templates.",[43,694,673,695,698],{},[31,696,697],{"href":62},"Blocks gallery"," and copy one pattern into a local prototype.",[43,700,673,701,704],{},[31,702,703],{"href":69},"Templates gallery"," to quickly preview full-page layouts and view one full screen.",[43,706,707],{},"Check your visual-regression baselines around navigation, layout, overlays, feedback and form controls.",[43,709,710,711,713],{},"Read the ",[31,712,34],{"href":33}," for exact package versions and release details.",[85,715,717],{"id":716},"whats-next","What's next",[14,719,720],{},"This release is a foundation, not a finish line. A few areas we are actively working on:",[40,722,723,729,735,751,776],{},[43,724,725,728],{},[76,726,727],{},"Graduating the alpha components."," Several of the new components — Combobox, Autocomplete, Date Range Picker, Meter, Number Field, OTP Field, Time Picker and others — ship as alpha while we finalise their APIs. Expect those interfaces to settle and the alpha labels to drop as we gather feedback from real product use. If you are adopting them now, tell us where the API feels awkward.",[43,730,731,734],{},[76,732,733],{},"More blocks and templates."," The first batch covers common product surfaces, but it is deliberately a starting point. We will keep adding patterns — and refining existing ones — as we see which combinations teams reach for most.",[43,736,737,740,741,682,744,329,747,750],{},[76,738,739],{},"Deeper composition."," The composition-first direction behind Field, Filter Bar, Accordion and Item continues. Next up, we plan to move ",[76,742,743],{},"Card",[76,745,746],{},"Modal",[76,748,749],{},"Dialog"," to the same small, slot-driven parts that compose cleanly rather than one-off wrappers, so there is less repeated product code to maintain.",[43,752,753,756,757,682,760,682,763,766,767,682,770,329,773,294],{},[76,754,755],{},"More components."," We are exploring several new components, including ",[76,758,759],{},"Chat",[76,761,762],{},"Overflow List",[76,764,765],{},"Data Table"," (built on TanStack Table for Lit), ",[76,768,769],{},"Input Group",[76,771,772],{},"Timestamp",[76,774,775],{},"Resizable",[43,777,778,781],{},[76,779,780],{},"Framework-agnostic foundations."," We are exploring headless primitives so the same accessible behaviour can be shared beyond web components, making Nord easier to adopt across React, Vue and other stacks.",[14,783,784,785,329,787,791],{},"We will share specifics as they land — follow the ",[31,786,34],{"href":33},[31,788,790],{"href":789},"\u002Fupdates\u002F","Latest Updates"," for the next steps.",[85,793,795],{"id":794},"upgrade-notes","Upgrade notes",[14,797,798],{},"Existing component APIs are intended to remain compatible, so most applications do not need a code migration just to install Nord 5. The visual system has changed in places, especially around navigation, surfaces and newly documented component states, so visual-regression baselines should be regenerated after upgrading.",[14,800,801],{},"The most important adoption work is deciding where the new composition-first components should replace local patterns. Field, Combobox, Date Range Picker, Filter Bar, Accordion, Pagination and Item are all designed to reduce repeated product code, but they are best introduced deliberately where they simplify real screens.",[14,803,804,805,294],{},"For exhaustive package notes and release dates, read the ",[31,806,34],{"href":33},{"title":808,"searchDepth":809,"depth":809,"links":810},"",2,[811,812,813,814,815,827,828,829,830],{"id":87,"depth":809,"text":88},{"id":135,"depth":809,"text":136},{"id":185,"depth":809,"text":186},{"id":245,"depth":809,"text":246},{"id":284,"depth":809,"text":285,"children":816},[817,819,820,821,822,823,824,825,826],{"id":298,"depth":818,"text":152},3,{"id":307,"depth":818,"text":155},{"id":418,"depth":818,"text":158},{"id":431,"depth":818,"text":161},{"id":451,"depth":818,"text":164},{"id":487,"depth":818,"text":167},{"id":528,"depth":818,"text":170},{"id":553,"depth":818,"text":173},{"id":590,"depth":818,"text":176},{"id":619,"depth":809,"text":620},{"id":663,"depth":809,"text":664},{"id":716,"depth":809,"text":717},{"id":794,"depth":809,"text":795},"2026-07-06","Explore Nord Design System's July 2026 release: a redesigned documentation website with light and dark mode, richer component pages, copy-paste blocks, quick template previews, and Nord 5 component releases grouped by purpose.","md",false,null,{"editable":837,"tags":838},true,[839,840],"post","docs-updates","\u002Fupdates\u002Fjuly-2026-component-updates",{"title":5,"description":832},{"loc":841},"updates\u002Fjuly-2026-component-updates","jUxKh8OX72aujfKZIkmMncvPtmJ6By-6NtcdysgxC4c",[847,1041,1155,1172],{"title":848,"children":849,"path":1039,"stem":1040,"page":834},"Docs",[850,952],{"path":851,"title":852,"icon":853,"keywords":854,"children":855},"\u002Fdocs\u002Fdeveloper","Developer","file-code","docs developer start install setup web components ai faq",[856,860,865,870,874,878,920,942,947],{"path":851,"title":857,"icon":858,"keywords":859},"Getting started","navigation-dashboard","docs start install setup npm",{"path":861,"title":862,"icon":863,"keywords":864},"\u002Fdocs\u002Fdeveloper\u002Fweb-components","Using Web Components","generic-module","web components setup install usage custom elements",{"path":866,"title":867,"icon":868,"keywords":869},"\u002Fdocs\u002Fdeveloper\u002Fwebfonts","Webfonts","interface-content-book","fonts typography webfonts",{"path":871,"title":872,"icon":863,"keywords":873},"\u002Fdocs\u002Fdeveloper\u002Fcdn","CDN","cdn package delivery script link",{"path":875,"title":876,"icon":868,"keywords":877},"\u002Fdocs\u002Fdeveloper\u002Flocalization","Localization","localization translation rtl ltr",{"path":879,"title":880,"icon":853,"keywords":881,"badge":882,"children":883},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework","CSS Framework","css framework legacy utilities","legacy",[884,887,890,893,896,899,902,905,908,911,914,917],{"path":885,"title":886},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#installation","Installation",{"path":888,"title":889},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#usage","Usage",{"path":891,"title":892},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#utilities","Utilities",{"path":894,"title":895},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#reset-utility","Reset Utility",{"path":897,"title":898},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#typographic-utilities","Typographic Utilities",{"path":900,"title":901},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#font-size-utilities","Font Size Utilities",{"path":903,"title":904},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#color-utilities","Color Utilities",{"path":906,"title":907},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#border-utilities","Border Utilities",{"path":909,"title":910},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#box-shadow-utilities","Box Shadow Utilities",{"path":912,"title":913},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#grid-and-container-utilities","Grid & Container Utilities",{"path":915,"title":916},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#spacing-utilities","Spacing Utilities",{"path":918,"title":919},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#css-custom-properties","CSS Custom Properties",{"path":921,"title":922,"icon":923,"keywords":924,"children":925},"\u002Fdocs\u002Fdeveloper\u002Feslint","ESLint Plugin","interface-checked","eslint lint rules css tailwind",[926,928,930,933,936,939],{"path":927,"title":886},"\u002Fdocs\u002Fdeveloper\u002Feslint\u002F#installation",{"path":929,"title":889},"\u002Fdocs\u002Fdeveloper\u002Feslint\u002F#usage",{"path":931,"title":932},"\u002Fdocs\u002Fdeveloper\u002Feslint\u002F#nord-rules","Nord Rules",{"path":934,"title":935},"\u002Fdocs\u002Fdeveloper\u002Feslint\u002F#tailwind-rules","Tailwind Rules",{"path":937,"title":938},"\u002Fdocs\u002Fdeveloper\u002Feslint\u002F#custom-configuration","Custom Configuration",{"path":940,"title":941},"\u002Fdocs\u002Fdeveloper\u002Feslint\u002F#class-detection","Class Detection",{"path":943,"title":944,"icon":945,"keywords":946},"\u002Fdocs\u002Fdeveloper\u002Fworking-with-ai","Working with AI","interface-ai","ai llms skills agents",{"path":948,"title":949,"icon":950,"keywords":951},"\u002Fdocs\u002Fdeveloper\u002Ffaq","FAQ","interface-help","questions answers support",{"path":953,"title":954,"icon":868,"keywords":955,"children":956},"\u002Fdesign","Design","design foundations themes brand tools figma",[957,959,993,1029,1034],{"path":953,"title":857,"icon":858,"keywords":958},"design start foundations figma",{"path":960,"title":961,"icon":868,"keywords":962,"children":963},"\u002Fdesign\u002Ffoundations","Foundations","principles accessibility colors typography grid naming",[964,967,970,972,975,978,981,984,987,990],{"path":965,"title":966},"\u002Fdesign\u002Ffoundations\u002Faccessibility-checklist","Accessibility",{"path":968,"title":969},"\u002Fdesign\u002Ffoundations\u002Fcolors","Color System",{"path":971,"title":904},"\u002Fdesign\u002Ffoundations\u002Fcolor-utilities",{"path":973,"title":974},"\u002Fdesign\u002Ffoundations\u002Fprinciples","Principles",{"path":976,"title":977},"\u002Fdesign\u002Ffoundations\u002Ffigma","Figma Toolkit",{"path":979,"title":980},"\u002Fdesign\u002Ffoundations\u002Fgrid","Grid",{"path":982,"title":983},"\u002Fdesign\u002Ffoundations\u002Ficonography","Iconography",{"path":985,"title":986},"\u002Fdesign\u002Ffoundations\u002Fnaming","Naming",{"path":988,"title":989},"\u002Fdesign\u002Ffoundations\u002Fbrand","Nordhealth Brand",{"path":991,"title":992},"\u002Fdesign\u002Ffoundations\u002Ftypography","Typography",{"path":994,"title":995,"icon":996,"keywords":997,"children":998},"\u002Fdesign\u002Fthemes","Themes","interface-mode-light","themes brand dark light contrast",[999,1001,1003,1006,1008,1011,1014,1017,1020,1023,1026],{"path":1000,"title":521},"#top",{"path":1002,"title":886},"#installation",{"path":1004,"title":1005},"#available-themes","Available Themes",{"path":1007,"title":220},"#examples",{"path":1009,"title":1010},"#dark-mode","Dark Mode",{"path":1012,"title":1013},"#creating-themes","Creating Themes",{"path":1015,"title":1016},"#accent-color","Accent Color",{"path":1018,"title":1019},"#top-bar-theming","Top Bar theming",{"path":1021,"title":1022},"#logo-usage","Logo Usage",{"path":1024,"title":1025},"#theming-in-figma","Theming in Figma",{"path":1027,"title":1028},"#theme-builder","Theme Builder",{"path":1030,"title":1031,"icon":1032,"keywords":1033},"\u002Fdesign\u002Fassets","Brand assets","interface-attachment","assets downloads logo brand figma",{"path":1035,"title":1036,"icon":1037,"keywords":1038},"\u002Fdesign\u002Ftools","Tools","navigation-settings","tools color generator theme builder accessibility checklist","\u002Fdocs","docs",{"title":1042,"children":1043,"path":1153,"stem":1154},"Core",[1044,1049,1087,1135,1139,1143,1148],{"path":1045,"title":1046,"icon":1047,"keywords":1048},"\u002Fcomponents","Components","interface-grid","components web components reference api examples",{"path":1050,"title":1051,"icon":1052,"keywords":1053,"children":1054},"\u002Fcore\u002Ftokens","Design Tokens","interface-tag","tokens variables color space typography",[1055,1058,1061,1064,1067,1070,1073,1076,1079,1082,1085],{"path":1056,"title":1057},"#color","Color",{"path":1059,"title":1060},"#border-radius","Border Radius",{"path":1062,"title":1063},"#box-shadow","Box Shadow",{"path":1065,"title":1066},"#font-size","Font Size",{"path":1068,"title":1069},"#font","Font",{"path":1071,"title":1072},"#line-height","Line Height",{"path":1074,"title":1075},"#size","Size",{"path":1077,"title":1078},"#space","Space",{"path":1080,"title":1081},"#transition","Transition",{"path":1083,"title":1084},"#z-index","Z-index",{"path":1086,"title":889},"#usage",{"path":1088,"title":1089,"icon":1090,"keywords":1091,"children":1092},"\u002Fcore\u002Fcss\u002Ftailwind","Tailwind CSS","interface-edit","tailwind utilities css tokens",[1093,1095,1097,1100,1103,1106,1109,1112,1115,1118,1121,1124,1127,1129,1132],{"path":1094,"title":886},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#installation",{"path":1096,"title":889},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#usage",{"path":1098,"title":1099},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#peer-dependencies","Peer Dependencies",{"path":1101,"title":1102},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#theme-variables","Theme Variables",{"path":1104,"title":1105},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#logical-properties","Logical Properties",{"path":1107,"title":1108},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#typography-examples","Typography Examples",{"path":1110,"title":1111},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#color-examples","Color Examples",{"path":1113,"title":1114},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#border-examples","Border Examples",{"path":1116,"title":1117},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#shadow-examples","Shadow Examples",{"path":1119,"title":1120},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#miscellaneous-utilities","Miscellaneous Utilities",{"path":1122,"title":1123},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#nord-components","Nord Components",{"path":1125,"title":1126},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#form-utilities","Form Utilities",{"path":1128,"title":980},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#grid",{"path":1130,"title":1131},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#states-hover-focus-etc","States (Hover, Focus, etc.)",{"path":1133,"title":1134},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#extending-the-theme","Extending the Theme",{"path":1136,"title":63,"icon":1137,"keywords":1138},"\u002Fblocks","interface-table","blocks patterns sections examples",{"path":1140,"title":70,"icon":1141,"keywords":1142},"\u002Ftemplates","navigation-catalog","templates pages layouts examples",{"path":1144,"title":1145,"icon":1146,"keywords":1147},"\u002Ficons","Icons","interface-bookmark","icons nordicons symbols",{"path":1149,"title":1150,"icon":1151,"native":837,"keywords":1152},"\u002Fstorybook","Playground","interface-play","playground storybook examples","\u002Fcore","core",{"title":1156,"path":1157,"stem":1158,"children":1159},"Updates","\u002Fupdates","updates\u002Findex",[1160,1163,1168],{"path":1157,"title":790,"icon":1161,"keywords":1162},"file-notes","latest updates blog announcements news",{"path":1164,"title":1165,"icon":1166,"keywords":1167},"\u002Fchangelogs","Changelog","text-list","changelog releases packages versions",{"path":1169,"title":1170,"icon":853,"keywords":1171},"\u002Fmigrations","Migration guides","migrations upgrade guides breaking changes",{"title":1173,"children":1174,"path":1204,"stem":1205},"Resources",[1175,1180,1184,1188,1192,1196,1200],{"path":1176,"title":1177,"icon":1178,"keywords":1179},"\u002Fresources\u002Fabout","About the design system","interface-info","about nord design system team goals",{"path":1181,"title":1182,"icon":950,"keywords":1183},"\u002Fresources\u002Fsupport","Support","help feedback support slack office hours status",{"path":1185,"title":1186,"icon":1090,"keywords":1187},"\u002Fresources\u002Fcontributing","Contributing","contributing contribution proposal process",{"path":1189,"title":1190,"icon":1166,"keywords":1191},"\u002Fresources\u002Fbacklog-prioritization","Backlog prioritization","backlog prioritization roadmap requests",{"path":1193,"title":1194,"icon":950,"keywords":1195},"\u002Fresources\u002Faccessibility-statement","Accessibility statement","accessibility statement wcag website",{"path":1197,"title":1198,"icon":1178,"keywords":1199},"\u002Fresources\u002Fcareers","Careers","careers jobs team",{"path":1201,"title":1202,"icon":1161,"keywords":1203},"\u002Fresources\u002Fterms","Terms of use","terms legal license usage","\u002Fresources","resources",[1207,1270,1307,1312],{"title":848,"children":1208,"path":1039,"stem":1040,"page":834},[1209,1240],{"path":851,"title":852,"icon":853,"keywords":854,"children":1210},[1211,1212,1213,1214,1215,1216,1230,1238,1239],{"path":851,"title":857,"icon":858,"keywords":859},{"path":861,"title":862,"icon":863,"keywords":864},{"path":866,"title":867,"icon":868,"keywords":869},{"path":871,"title":872,"icon":863,"keywords":873},{"path":875,"title":876,"icon":868,"keywords":877},{"path":879,"title":880,"icon":853,"keywords":881,"badge":882,"children":1217},[1218,1219,1220,1221,1222,1223,1224,1225,1226,1227,1228,1229],{"path":885,"title":886},{"path":888,"title":889},{"path":891,"title":892},{"path":894,"title":895},{"path":897,"title":898},{"path":900,"title":901},{"path":903,"title":904},{"path":906,"title":907},{"path":909,"title":910},{"path":912,"title":913},{"path":915,"title":916},{"path":918,"title":919},{"path":921,"title":922,"icon":923,"keywords":924,"children":1231},[1232,1233,1234,1235,1236,1237],{"path":927,"title":886},{"path":929,"title":889},{"path":931,"title":932},{"path":934,"title":935},{"path":937,"title":938},{"path":940,"title":941},{"path":943,"title":944,"icon":945,"keywords":946},{"path":948,"title":949,"icon":950,"keywords":951},{"path":953,"title":954,"icon":868,"keywords":955,"children":1241},[1242,1243,1255,1268,1269],{"path":953,"title":857,"icon":858,"keywords":958},{"path":960,"title":961,"icon":868,"keywords":962,"children":1244},[1245,1246,1247,1248,1249,1250,1251,1252,1253,1254],{"path":965,"title":966},{"path":968,"title":969},{"path":971,"title":904},{"path":973,"title":974},{"path":976,"title":977},{"path":979,"title":980},{"path":982,"title":983},{"path":985,"title":986},{"path":988,"title":989},{"path":991,"title":992},{"path":994,"title":995,"icon":996,"keywords":997,"children":1256},[1257,1258,1259,1260,1261,1262,1263,1264,1265,1266,1267],{"path":1000,"title":521},{"path":1002,"title":886},{"path":1004,"title":1005},{"path":1007,"title":220},{"path":1009,"title":1010},{"path":1012,"title":1013},{"path":1015,"title":1016},{"path":1018,"title":1019},{"path":1021,"title":1022},{"path":1024,"title":1025},{"path":1027,"title":1028},{"path":1030,"title":1031,"icon":1032,"keywords":1033},{"path":1035,"title":1036,"icon":1037,"keywords":1038},{"title":1042,"children":1271,"path":1153,"stem":1154},[1272,1273,1286,1303,1304,1305,1306],{"path":1045,"title":1046,"icon":1047,"keywords":1048},{"path":1050,"title":1051,"icon":1052,"keywords":1053,"children":1274},[1275,1276,1277,1278,1279,1280,1281,1282,1283,1284,1285],{"path":1056,"title":1057},{"path":1059,"title":1060},{"path":1062,"title":1063},{"path":1065,"title":1066},{"path":1068,"title":1069},{"path":1071,"title":1072},{"path":1074,"title":1075},{"path":1077,"title":1078},{"path":1080,"title":1081},{"path":1083,"title":1084},{"path":1086,"title":889},{"path":1088,"title":1089,"icon":1090,"keywords":1091,"children":1287},[1288,1289,1290,1291,1292,1293,1294,1295,1296,1297,1298,1299,1300,1301,1302],{"path":1094,"title":886},{"path":1096,"title":889},{"path":1098,"title":1099},{"path":1101,"title":1102},{"path":1104,"title":1105},{"path":1107,"title":1108},{"path":1110,"title":1111},{"path":1113,"title":1114},{"path":1116,"title":1117},{"path":1119,"title":1120},{"path":1122,"title":1123},{"path":1125,"title":1126},{"path":1128,"title":980},{"path":1130,"title":1131},{"path":1133,"title":1134},{"path":1136,"title":63,"icon":1137,"keywords":1138},{"path":1140,"title":70,"icon":1141,"keywords":1142},{"path":1144,"title":1145,"icon":1146,"keywords":1147},{"path":1149,"title":1150,"icon":1151,"native":837,"keywords":1152},{"title":1156,"path":1157,"stem":1158,"children":1308},[1309,1310,1311],{"path":1157,"title":790,"icon":1161,"keywords":1162},{"path":1164,"title":1165,"icon":1166,"keywords":1167},{"path":1169,"title":1170,"icon":853,"keywords":1171},{"title":1173,"children":1313,"path":1204,"stem":1205},[1314,1315,1316,1317,1318,1319,1320],{"path":1176,"title":1177,"icon":1178,"keywords":1179},{"path":1181,"title":1182,"icon":950,"keywords":1183},{"path":1185,"title":1186,"icon":1090,"keywords":1187},{"path":1189,"title":1190,"icon":1166,"keywords":1191},{"path":1193,"title":1194,"icon":950,"keywords":1195},{"path":1197,"title":1198,"icon":1178,"keywords":1199},{"path":1201,"title":1202,"icon":1161,"keywords":1203},[1322,1343,1355,1359,1364,1369,1372,1376,1380,1383,1386,1390,1402,1414,1423,1427,1431,1435,1439,1456,1460,1500,1503,1532,1536,1540,1544,1548,1589,1597,1600,1604,1607,1610,1626,1635,1639,1643,1651,1679,1682,1686,1690,1694,1698,1702,1706,1715,1719,1723,1727,1731,1744,1748,1757,1761,1765,1773,1777,1780,1784,1787],{"name":601,"tagName":1323,"description":1324,"category":590,"status":1325,"isNew":834,"lightDom":837,"parts":1326},"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.","ready",[1327,1331,1335,1339],{"name":1328,"tagName":1329,"description":1330},"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":1332,"tagName":1333,"description":1334},"AccordionItem","nord-accordion-item","Accordion Item groups an Accordion Header and\nits Accordion Panel within an\nAccordion.",{"name":1336,"tagName":1337,"description":1338},"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":1340,"tagName":1341,"description":1342},"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":574,"tagName":1344,"description":1345,"category":553,"status":1325,"isNew":834,"lightDom":834,"parts":1346},"nord-aside","Container for the right-side rail + drawer pattern in the app shell.",[1347,1351],{"name":1348,"tagName":1349,"description":1350},"AsideDrawer","nord-aside-drawer","A drawer panel inside \u003Cnord-aside>.",{"name":1352,"tagName":1353,"description":1354},"AsideTrigger","nord-aside-trigger","Rail button that toggles a \u003Cnord-aside-drawer> inside \u003Cnord-aside>.",{"name":333,"tagName":1356,"description":1357,"category":1358,"status":1325,"isNew":834,"lightDom":837},"nord-autocomplete","Autocomplete is a free-text input with suggestions: the text the user types\nis itself the committed value (a string), and the options are completion\naids. Picking a suggestion fills the input with the option's label and commits\nthat label. Use it when the answer is open-ended text but you can offer\nhelpful completions (a city, a tag, a username); reach for\nCombobox instead when the value must be one of a\nfixed set of options.\n\nAutocomplete is a control only — it has no built-in label, hint or error.\nCompose it inside a Field to give it a label, hint and\nerror message, the same way you would a native input.\n\nBase UI parity: Autocomplete is the Combobox primitive with\nselectionMode=\"none\" + fillInputOnItemPress.","form",{"name":1360,"tagName":1361,"description":1362,"category":1363,"status":1325,"isNew":834,"lightDom":834},"Avatar","nord-avatar","Avatar is used for showing a thumbnail representation of a single user or entity.\nDefault avatar illustration is displayed when no src is specified.","content",{"name":1365,"tagName":1366,"description":1367,"category":1368,"status":1325,"isNew":834,"lightDom":834},"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":469,"tagName":1370,"description":1371,"category":1368,"status":1325,"isNew":834,"lightDom":834},"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":1373,"tagName":1374,"description":1375,"category":298,"status":1325,"isNew":834,"lightDom":834},"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.",{"name":1377,"tagName":1378,"description":1379,"category":298,"status":1325,"isNew":834,"lightDom":834},"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":382,"tagName":1381,"description":1382,"category":1358,"status":1325,"isNew":834,"lightDom":834},"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.",{"name":743,"tagName":1384,"description":1385,"category":590,"status":1325,"isNew":834,"lightDom":834},"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":1387,"tagName":1388,"description":1389,"category":1358,"status":1325,"isNew":834,"lightDom":834},"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":608,"tagName":1391,"description":1392,"category":590,"status":1325,"isNew":834,"lightDom":837,"parts":1393},"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.",[1394,1398],{"name":1395,"tagName":1396,"description":1397},"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":1399,"tagName":1400,"description":1401},"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":328,"tagName":1403,"description":1404,"category":1358,"status":1325,"isNew":834,"lightDom":837,"parts":1405},"nord-combobox","Combobox lets users choose one option (or several) from a list by typing to\nfilter, then picking with the keyboard or pointer. Use it when a Select\nwould be unwieldy because there are many options to scan.\n\nCombobox is a control only — it has no built-in label, hint or error. Compose\nit inside a Field to give it a label, hint and error\nmessage, the same way you would a native input.\n\nThe committed value is an option's value (or an array of them with\nmultiple); the input is a filter\u002Fsearch field whose text is discarded on\ncommit. For a free-text input with suggestions where the typed text is the\nvalue, use Autocomplete instead.",[1406,1410],{"name":1407,"tagName":1408,"description":1409},"ComboboxGroup","nord-combobox-group","Groups declarative \u003Cnord-combobox-option> children under a heading inside a\nCombobox:\n\n``html\n\u003Cnord-combobox>\n  \u003Cnord-combobox-group label=\"Frameworks\">\n    \u003Cnord-combobox-option value=\"next\">Next.js\u003C\u002Fnord-combobox-option>\n  \u003C\u002Fnord-combobox-group>\n\u003C\u002Fnord-combobox>\n`\n\nContained options inherit this label as their group. The element renders\nnothing itself and is hidden with display: none`.",{"name":1411,"tagName":1412,"description":1413},"ComboboxOption","nord-combobox-option","A declarative option for a Combobox. Place these as\nchildren of \u003Cnord-combobox> instead of (or as an alternative to) setting the\n.options property:\n\n``html\n\u003Cnord-combobox>\n  \u003Cnord-combobox-option value=\"bug\">Bug\u003C\u002Fnord-combobox-option>\n  \u003Cnord-combobox-option value=\"feature\">Feature\u003C\u002Fnord-combobox-option>\n\u003C\u002Fnord-combobox>\n`\n\nThe option's child markup becomes the rendered row, so you can author custom\nitems (e.g. an avatar + text) without an html string or a render function.\nSet the label attribute when the visible markup isn't plain text, so\nfiltering and the accessible name have something to match on.\n\nThe element renders nothing itself — it is a data source the combobox reads via\ncontext and is hidden with display: none`.",{"name":1415,"tagName":1416,"description":1417,"category":298,"status":1325,"isNew":834,"lightDom":834,"parts":1418},"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.",[1419],{"name":1420,"tagName":1421,"description":1422},"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":1424,"tagName":1425,"description":1426,"category":1358,"status":1325,"isNew":834,"lightDom":834},"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":1428,"tagName":1429,"description":1430,"category":1358,"status":1325,"isNew":834,"lightDom":837},"DateRangePicker","nord-date-range-picker","Date Range Picker lets people choose a start and end date as a single range,\neither from a built-in list of presets (Today, Last 7 days, This month, …) or\nfrom a range calendar. It is a control only — compose it inside a\nField for a label, hint or error, like a native input.\n\nThe committed value is an ISO-8601 interval string YYYY-MM-DD\u002FYYYY-MM-DD;\nthe convenience start-date \u002F end-date props and the valueAsDateRange\ngetter\u002Fsetter stay in sync with it. Selecting in the popout builds a *pending*\nrange; **Apply** commits it (firing change), **Cancel** reverts to the last\ncommitted value, and **Clear** empties it.",{"name":1432,"tagName":1433,"description":1434,"category":553,"status":1325,"isNew":834,"lightDom":834},"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":1436,"tagName":1437,"description":1438,"category":553,"status":1325,"isNew":834,"lightDom":834},"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":1440,"tagName":1441,"description":1442,"category":528,"status":1325,"isNew":834,"lightDom":834,"parts":1443},"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.",[1444,1448,1452],{"name":1445,"tagName":1446,"description":1447},"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":1449,"tagName":1450,"description":1451},"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":1453,"tagName":1454,"description":1455},"DropdownSubmenu","nord-dropdown-submenu","Dropdown submenu nests a secondary menu within a parent dropdown.",{"name":1457,"tagName":1458,"description":1459,"category":1368,"status":1325,"isNew":834,"lightDom":834},"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":318,"tagName":1461,"description":1462,"category":1358,"status":1325,"isNew":834,"lightDom":837,"parts":1463},"nord-field","Field is the wrapper for a single form control. It lays out a\nField Label, a control (such as an\nInput), an optional\nField Description and a\nField Error with consistent spacing.\n\nCombine several together in a Field Group and\ngroup related groups with a Field Set.\n\nThe Field shares its state with the control through context: a Nord control\nplaced inside a Field suppresses its own built-in label\u002Fhint\u002Ferror and takes\nits accessible name, description and invalid\u002Fdisabled state from the Field.",[1464,1468,1472,1476,1480,1484,1488,1492,1496],{"name":1465,"tagName":1466,"description":1467},"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":1469,"tagName":1470,"description":1471},"FieldDescription","nord-field-description","Field Description is the helper or hint text for a Field.\nIt is styled to match the hint text used by Nord form controls such as\nInput.",{"name":1473,"tagName":1474,"description":1475},"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":1477,"tagName":1478,"description":1479},"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":1481,"tagName":1482,"description":1483},"FieldLabel","nord-field-label","Field Label is the label for a control inside a Field.\nIt is styled to match the labels used by Nord form controls such as\nInput.\n\nThe enclosing Field shares this label's id and text with the control through\ncontext, so the control names itself (aria-labelledby for light-DOM controls,\naria-label for shadow-DOM ones) — no wiring needed. Set the for attribute to\na control's id to additionally get native-style click-to-focus.\n\nThe required indicator is driven by the control: mark the control required\nand the Field toggles this label's required attribute automatically.",{"name":1485,"tagName":1486,"description":1487},"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":1489,"tagName":1490,"description":1491},"FieldSeparator","nord-field-separator","Field Separator draws a thin divider between sections inside a\nField Group.",{"name":1493,"tagName":1494,"description":1495},"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":1497,"tagName":1498,"description":1499},"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":402,"tagName":1501,"description":1502,"category":1358,"status":1325,"isNew":834,"lightDom":834},"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":1504,"tagName":1505,"description":1506,"category":1358,"status":1325,"isNew":834,"lightDom":837,"parts":1507},"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.",[1508,1512,1516,1520,1524,1528],{"name":1509,"tagName":1510,"description":1511},"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":1513,"tagName":1514,"description":1515},"FilterDateRange","nord-filter-date-range","Filter Date Range is a self-contained date-range **filter**: a chip that opens\na popout containing an inline Date Range Picker\n(presets + two-month calendar + Apply). It is the date-range counterpart to\nFilter Dropdown and renders the shared filter\nchip via Filter Field.\n\nComposition-first: it emits change\u002Fclear\u002Fremove and leaves the active\nfilters and any URL\u002Fquery state to your app.",{"name":1517,"tagName":1518,"description":1519},"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":1521,"tagName":1522,"description":1523},"FilterField","nord-filter-field","Filter Field is the presentation-only filter **chip**: a joined pill showing a\nleading icon, the filter's label, the active selection summary (value) and\na clear or remove affordance, dashed while inactive. It is the shared chip used\nacross the filter family and the building block for custom filters.\n\nIt owns no popout and tracks no value — drop it into a popout-owning control as\nits slot=\"trigger\" (the host opens\u002Fpositions the popout and sets\naria-controls\u002Faria-haspopup\u002Faria-expanded on this element). Show the\nactive selection with value, reset it in response to clear, and remove the\nwhole field in response to remove. Your app owns the active filters and any\nURL\u002Fquery state.",{"name":1525,"tagName":1526,"description":1527},"FilterInput","nord-filter-input","Filter Input is a compact search\u002Ftext field for filtering a collection. It\nreplaces the small ad-hoc search inputs that sit in toolbars and table\nheaders. By default it renders inline as a small search field with a leading\nsearch icon; set mode=\"chip\" to collapse it behind a chip button that opens\nthe input in a popout, which is handy in a crowded Filter Bar.\n\nIt emits intent only: input as the user types and change when the value is\ncommitted. Your app owns the active filters and any URL\u002Fquery state — read the\nvalue from the event target (or bind value) and filter accordingly.\n\nIt is a control only, like Combobox: compose it inside\na Field for a visible label, or set label for an\naccessible name when used standalone.",{"name":1529,"tagName":1530,"description":1531},"FilterResetButton","nord-filter-reset-button","Filter Reset Button clears every active filter at once. It is a thin,\nintent-only control: it renders a plain button and dispatches a reset event\nwhen pressed. Your app owns the active filters and is responsible for clearing\nthem (and any URL\u002Fquery state) in the handler — the button holds no state of\nits own.\n\nDisable it while there is nothing to reset by binding disabled to whether any\nfilter is active (e.g. ?disabled=${!hasFilters}). Mirrors the Provet Cloud\nfilter reset button.",{"name":1533,"tagName":1534,"description":1535,"category":553,"status":1325,"isNew":834,"lightDom":834},"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":1537,"tagName":1538,"description":1539,"category":553,"status":1325,"isNew":834,"lightDom":834},"Header","nord-header","The header is a block of designated space for labelling the currently\nviewed context as well as providing primary actions.",{"name":1541,"tagName":1542,"description":1543,"category":1363,"status":1325,"isNew":834,"lightDom":834},"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":1545,"tagName":1546,"description":1547,"category":1358,"status":1325,"isNew":834,"lightDom":834},"Input","nord-input","Inputs are used to allow users to provide text input when the expected input is short.\nAs well as plain text, Input supports various types of text, including passwords and numbers.",{"name":424,"tagName":1549,"description":1550,"category":1551,"status":1325,"isNew":834,"lightDom":837,"parts":1552},"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.","list",[1553,1557,1561,1565,1569,1573,1577,1581,1585],{"name":1554,"tagName":1555,"description":1556},"ItemActions","nord-item-actions","Item Actions holds the trailing controls of an Item,\nsuch as buttons or a chevron.",{"name":1558,"tagName":1559,"description":1560},"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":1562,"tagName":1563,"description":1564},"ItemDescription","nord-item-description","Item Description is the secondary, muted line of text in an\nItem. It is clamped to two lines.",{"name":1566,"tagName":1567,"description":1568},"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":1570,"tagName":1571,"description":1572},"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":1574,"tagName":1575,"description":1576},"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":1578,"tagName":1579,"description":1580},"ItemMedia","nord-item-media","Item Media holds the leading visual of an Item, such as\nan icon, an avatar or an image.",{"name":1582,"tagName":1583,"description":1584},"ItemSeparator","nord-item-separator","Item Separator draws a horizontal divider between Item\nrows inside an Item Group.",{"name":1586,"tagName":1587,"description":1588},"ItemTitle","nord-item-title","Item Title is the primary line of text in an Item.",{"name":437,"tagName":1590,"description":1591,"category":1363,"status":1325,"isNew":834,"lightDom":837,"parts":1592},"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.",[1593],{"name":1594,"tagName":1595,"description":1596},"KbdGroup","nord-kbd-group","Kbd Group lays out a set of Kbd keys together, for example\nto represent a multi-key shortcut such as \u003Ckbd>Ctrl\u003C\u002Fkbd> \u003Ckbd>K\u003C\u002Fkbd>.",{"name":173,"tagName":1598,"description":1599,"category":553,"status":1325,"isNew":834,"lightDom":834},"nord-layout","Layout component is used to create the main layout of an app. Layout\ncurrently comes with one main configuration: two-column.",{"name":1601,"tagName":1602,"description":1603,"category":298,"status":1325,"isNew":834,"lightDom":834},"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":457,"tagName":1605,"description":1606,"category":1368,"status":1325,"isNew":834,"lightDom":837},"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":746,"tagName":1608,"description":1609,"category":528,"status":1325,"isNew":834,"lightDom":834},"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":167,"tagName":1611,"description":1612,"category":487,"status":1325,"isNew":834,"lightDom":834,"parts":1613},"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.",[1614,1618,1622],{"name":1615,"tagName":1616,"description":1617},"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":1619,"tagName":1620,"description":1621},"NavItem","nord-nav-item","Navigation item populates sidebar navigation with links.\nEvery item should be placed inside a navigation group.",{"name":1623,"tagName":1624,"description":1625},"NavToggle","nord-nav-toggle","Nav toggle hides and shows the primary navigation inside \u003Cnord-layout>.",{"name":1627,"tagName":1628,"description":1629,"category":1368,"status":1325,"isNew":834,"lightDom":834,"parts":1630},"Notification","nord-notification","Notifications provide important information that requires action or acknowledgement.\nA notification is displayed until the user dismisses it.",[1631],{"name":1632,"tagName":1633,"description":1634},"NotificationGroup","nord-notification-group","Notification group is used to position and style a group of notifications.",{"name":1636,"tagName":1637,"description":1638,"category":1358,"status":1325,"isNew":834,"lightDom":837},"NumberField","nord-number-field","Number Field is a control for entering a numeric value, with decrement and\nincrement stepper buttons, optional drag-to-scrub, and locale-aware\nformatting. It ports the behaviour of Base UI's Number Field: arrow\u002FPage\nstepping, Home\u002FEnd to the bounds, press-and-hold auto-repeat, optional\nwheel\u002Fscrub, clamping, and Intl.NumberFormat formatting.\n\nNumber Field is a control only — it has no built-in label, hint or error.\nCompose it inside a Field with a\nField Label to give it a label, hint and error,\nthe same way you would a native input.\n\nFORM PARTICIPATION: the value is submitted as the raw numeric string under the\nhost name via FormDataController (the inner input has no name, avoiding a\ndouble submit). Unlike Base UI there is no hidden native number input, and —\nlike the other new Nord controls — Number Field does NOT use\nElementInternals, so it performs no native constraint validation: required,\nmin, max and step are NOT enforced as form-blocking validity. min\u002Fmax\ngovern interactive stepping and (unless allow-out-of-range is set) clamp the\nvalue; required only surfaces as required\u002Faria-required on the inner input\nfor assistive technology. Authors must validate constraints themselves and\nreflect failures via invalid and a nord-field-error.\n\nACCESSIBILITY NOTE: the inner control is a text input (with inputmode) and\naria-roledescription=\"Number field\", NOT role=\"spinbutton\" and NOT a\nnative type=\"number\". A text input lets us show locale-formatted text\n(currency, percent, grouping) while keeping full text editing — assistive tech\nreads the formatted value from the input's text. We do NOT add\naria-valuenow\u002Fvaluemin\u002Fvaluemax\u002Fvaluetext: those are only valid on a\nrange role (e.g. spinbutton\u002Fslider) and would fail aria-allowed-attr\nvalidation on a text input. This mirrors what Base UI's NumberFieldInput\nactually ships (only aria-roledescription).",{"name":1640,"tagName":1641,"description":1642,"category":1358,"status":1325,"isNew":834,"lightDom":837},"OtpField","nord-otp-field","OTP Field is a segmented one-time-code input: it renders length individual\ncharacter cells plus a visually-hidden input that holds the full value, enabling\nSMS \u002F keychain autofill and native pattern\u002Frequired validation. Typing fills\nand auto-advances, Backspace clears and moves back, the arrow keys navigate, and\npasting a code distributes its characters across the cells.\n\nOTP Field is a control only — it has no built-in label, hint or error. Compose\nit inside a Field with a Field Label\n(connected with for) to give it an accessible name, helper text and an error\nmessage, exactly like a native input.",{"name":498,"tagName":1644,"description":1645,"category":487,"status":1325,"isNew":834,"lightDom":834,"parts":1646},"nord-outline","Outline is an in-page table of contents that lists a page's headings and\nhighlights the section currently in view as you scroll.\n\nProvide Outline Item children, or point for at\na container to build the list from its headings.",[1647],{"name":1648,"tagName":1649,"description":1650},"OutlineItem","nord-outline-item","Outline Item is a single link within an Outline. It\npoints at an in-page heading via its href and indents according to its\nlevel. Its active state is managed by the parent Outline — you normally\ndon't set it yourself.",{"name":505,"tagName":1652,"description":1653,"category":487,"status":1325,"isNew":834,"lightDom":837,"parts":1654},"nord-pagination","Pagination is the navigation root for a paginated collection. It is\ncomposition-first: it owns no page state, renders no controls, and emits no\nevents. Your app owns the page state, URL\u002Fquery syncing, cursors and any data\nfetching; Nord supplies the semantic\u002Flayout primitives, the styling and the\npaginate() math utility for building the page window.\n\nAs a root it is a navigation landmark — it sets role=\"navigation\" and a\ndefault accessible label so screen-reader users can jump to it. Compose the\nlower-level primitives inside it:\n\n- Pagination Content — the list row.\n- Pagination Item — a slot in the row.\n- Pagination Link — a page link (set current).\n- Pagination Previous — the previous control.\n- Pagination Next — the next control.\n- Pagination Ellipsis — the collapsed-pages marker.\n\nBring your own interactive element — an \u003Ca> (e.g. a framework \u003CLink> \u002F\n\u003CNuxtLink>) or a nord-button — and own its href, navigation and\ndisabled state. See the framework adapters in the docs.",[1655,1659,1663,1667,1671,1675],{"name":1656,"tagName":1657,"description":1658},"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":1660,"tagName":1661,"description":1662},"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":1664,"tagName":1665,"description":1666},"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":1668,"tagName":1669,"description":1670},"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":1672,"tagName":1673,"description":1674},"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":1676,"tagName":1677,"description":1678},"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":539,"tagName":1680,"description":1681,"category":528,"status":1325,"isNew":834,"lightDom":834},"nord-popout","Popouts are small overlays that open on demand. They let users access additional content and actions without cluttering the page.",{"name":1683,"tagName":1684,"description":1685,"category":1368,"status":1325,"isNew":834,"lightDom":834},"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":1687,"tagName":1688,"description":1689,"category":1368,"status":1325,"isNew":834,"lightDom":834},"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":1691,"tagName":1692,"description":1693,"category":1363,"status":1325,"isNew":834,"lightDom":834},"Qrcode","nord-qrcode","QR Code component is used for providing information or links\nto users which they can quickly scan with their smartphone.",{"name":1695,"tagName":1696,"description":1697,"category":1358,"status":1325,"isNew":834,"lightDom":834},"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":1699,"tagName":1700,"description":1701,"category":1358,"status":1325,"isNew":834,"lightDom":834},"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":1703,"tagName":1704,"description":1705,"category":553,"status":1325,"isNew":834,"lightDom":834},"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":1707,"tagName":1708,"description":1709,"category":298,"status":1325,"isNew":834,"lightDom":834,"parts":1710},"SegmentedControl","nord-segmented-control","Segmented control is used to pick one choice from a set of\nclosely related choices, and immediately apply that selection.",[1711],{"name":1712,"tagName":1713,"description":1714},"SegmentedControlItem","nord-segmented-control-item","Segmented control items populate a segmented control with options.\nEvery item should be placed inside a segmented control.",{"name":1716,"tagName":1717,"description":1718,"category":1358,"status":1325,"isNew":834,"lightDom":834},"Select","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":1720,"tagName":1721,"description":1722,"category":1368,"status":1325,"isNew":834,"lightDom":834},"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":1724,"tagName":1725,"description":1726,"category":1368,"status":1325,"isNew":834,"lightDom":834},"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":1728,"tagName":1729,"description":1730,"category":553,"status":1325,"isNew":834,"lightDom":834},"Stack","nord-stack","Stack component manages layout of immediate children along the\nvertical or horizontal axis with optional spacing between each child.",{"name":1732,"tagName":1733,"description":1734,"category":487,"status":1325,"isNew":834,"lightDom":834,"parts":1735},"Tab","nord-tab","The interactive tab button for use within the tab group component.",[1736,1740],{"name":1737,"tagName":1738,"description":1739},"TabGroup","nord-tab-group","Tab Group allows multiple panels to be contained within a single window,\nusing tabs as a navigational element.",{"name":1741,"tagName":1742,"description":1743},"TabPanel","nord-tab-panel","The panel which contains content that can be revealed using a tab\nin the tab group component.",{"name":1745,"tagName":1746,"description":1747,"category":1551,"status":1325,"isNew":834,"lightDom":834},"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":1749,"tagName":1750,"description":1751,"category":1363,"status":1325,"isNew":834,"lightDom":834,"parts":1752},"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.",[1753],{"name":1754,"tagName":1755,"description":1756},"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":1758,"tagName":1759,"description":1760,"category":1358,"status":1325,"isNew":834,"lightDom":834},"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":1762,"tagName":1763,"description":1764,"category":1358,"status":1325,"isNew":834,"lightDom":834},"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":480,"tagName":1766,"description":1767,"category":1368,"status":1325,"isNew":834,"lightDom":834,"parts":1768},"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.",[1769],{"name":1770,"tagName":1771,"description":1772},"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":1774,"tagName":1775,"description":1776,"category":1358,"status":1325,"isNew":834,"lightDom":834},"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":546,"tagName":1778,"description":1779,"category":528,"status":1325,"isNew":834,"lightDom":834},"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":1781,"tagName":1782,"description":1783,"category":553,"status":1325,"isNew":834,"lightDom":834},"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":447,"tagName":1785,"description":1786,"category":1363,"status":1325,"isNew":834,"lightDom":834},"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":1788,"tagName":1789,"description":1790,"category":1363,"status":1325,"isNew":834,"lightDom":834},"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.",{"hasPlayground":837,"stories":1792},[1793,1796,1800,1806,1811,1816,1822,1828,1832,1837,1841,1845,1849,1853,1857,1861],{"id":1794,"name":410,"exportName":410,"html":1795},"components-date-range-picker--basic","\u003Cnord-field class=\"n:container-xxs\">\n      \u003Cnord-field-label for=\"drp-basic\">Reporting period\u003C\u002Fnord-field-label>\n      \u003Cnord-date-range-picker id=\"drp-basic\" value=\"2024-01-01\u002F2024-01-31\">\u003C\u002Fnord-date-range-picker>\n    \u003C\u002Fnord-field>",{"id":1797,"name":1798,"exportName":1798,"html":1799},"components-date-range-picker--presets","Presets","\u003Cnord-stack direction=\"horizontal\" gap=\"l\" wrap class=\"n:max-inline-full\">\n      \u003Cnord-date-range-picker label=\"With presets\" id=\"drp-with-presets\">\u003C\u002Fnord-date-range-picker>\n      \u003Cnord-date-range-picker label=\"Calendar only\" id=\"drp-no-presets\" hide-presets>\u003C\u002Fnord-date-range-picker>\n    \u003C\u002Fnord-stack>",{"id":1801,"name":1802,"exportName":1803,"html":1804,"js":1805},"components-date-range-picker--two-name-submit","Two Name Submit","TwoNameSubmit","\u003Cform id=\"drp-form\">\n      \u003Cnord-stack gap=\"m\">\n        \u003Cnord-field class=\"n:container-xxs\">\n          \u003Cnord-field-label for=\"drp-two-name\">Reporting period\u003C\u002Fnord-field-label>\n          \u003Cnord-date-range-picker id=\"drp-two-name\" start-name=\"from\" end-name=\"to\" value=\"2024-03-01\u002F2024-03-31\">\u003C\u002Fnord-date-range-picker>\n          \u003Cnord-field-description>Submits two fields: \u003Ccode>from\u003C\u002Fcode> and \u003Ccode>to\u003C\u002Fcode>.\u003C\u002Fnord-field-description>\n        \u003C\u002Fnord-field>\n        \u003Cnord-button type=\"submit\" variant=\"primary\" class=\"n:self-start\">Submit\u003C\u002Fnord-button>\n        \u003Coutput id=\"drp-output\" class=\"n:text-s n:text-weaker\">\u003C\u002Foutput>\n      \u003C\u002Fnord-stack>\n    \u003C\u002Fform>","document.getElementById(\"drp-form\").addEventListener(\"submit\", (event) => {\n  event.preventDefault()\n  const form = event.currentTarget\n  const data = new FormData(form)\n  const output = form.querySelector(\"#drp-output\")\n  if (output) {\n    output.textContent = `from=${data.get(\"from\")}, to=${data.get(\"to\")}`\n  }\n})",{"id":1807,"name":1808,"exportName":1809,"html":1810},"components-date-range-picker--min-max","Min Max","MinMax","\u003Cnord-date-range-picker\n      label=\"Reporting period\"\n      hint=\"Only dates in 2024 can be selected.\"\n      hint-below\n      id=\"drp-minmax\"\n      min=\"2024-01-01\"\n      max=\"2024-12-31\"\n      value=\"2024-06-01\u002F2024-06-30\"\n    >\u003C\u002Fnord-date-range-picker>",{"id":1812,"name":1813,"exportName":1814,"html":1815},"components-date-range-picker--first-day-of-week","First Day Of Week","FirstDayOfWeek","\u003Cnord-date-range-picker\n      label=\"Reporting period\"\n      id=\"drp-fdow\"\n      first-day-of-week=\"0\"\n      value=\"2024-01-07\u002F2024-01-20\"\n    >\u003C\u002Fnord-date-range-picker>",{"id":1817,"name":1818,"exportName":1819,"html":1820,"js":1821},"components-date-range-picker--disabled-dates","Disabled Dates","DisabledDates","\u003Cnord-date-range-picker\n      label=\"Reporting period\"\n      hint=\"Weekends can't be selected.\"\n      hint-below\n      id=\"drp-disabled-dates\"\n    >\u003C\u002Fnord-date-range-picker>","document.getElementById(\"drp-disabled-dates\").isDateDisabled = (date) => {\n  const day = date.getDay()\n  return day === 0 || day === 6\n}",{"id":1823,"name":1824,"exportName":1825,"html":1826,"js":1827},"components-date-range-picker--highlighted-dates","Highlighted Dates","HighlightedDates","\u003Cnord-date-range-picker\n      label=\"Reporting period\"\n      hint=\"The 1st and 15th are paydays.\"\n      hint-below\n      id=\"drp-highlighted\"\n    >\u003C\u002Fnord-date-range-picker>","document.getElementById(\"drp-highlighted\").isDateHighlighted = (date) => {\n  const dayOfMonth = date.getDate()\n  return dayOfMonth === 1 || dayOfMonth === 15 ? \"Payday\" : false\n}",{"id":1829,"name":1830,"exportName":1830,"html":1831},"components-date-range-picker--rtl","RTL","\u003Cnord-field class=\"n:container-xxs\">\n      \u003Cnord-field-label for=\"drp-rtl\">الفترة المشمولة بالتقرير\u003C\u002Fnord-field-label>\n      \u003Cnord-date-range-picker id=\"drp-rtl\" value=\"2024-02-01\u002F2024-02-29\">\u003C\u002Fnord-date-range-picker>\n    \u003C\u002Fnord-field>",{"id":1833,"name":1834,"exportName":1835,"html":1836},"components-date-range-picker--custom-trigger","Custom Trigger","CustomTrigger","\u003Cnord-date-range-picker id=\"drp-trigger\" aria-label=\"Date of birth\" value=\"2024-05-06\u002F2024-05-20\">\n      \u003Cnord-button slot=\"trigger\" variant=\"dashed\">\n        \u003Cnord-icon slot=\"start\" name=\"interface-filter\">\u003C\u002Fnord-icon>\n        Date of birth\n      \u003C\u002Fnord-button>\n    \u003C\u002Fnord-date-range-picker>",{"id":1838,"name":1839,"exportName":1839,"html":1840},"components-date-range-picker--inline","Inline","\u003Cnord-date-range-picker id=\"drp-inline\" inline aria-label=\"Reporting period\" value=\"2024-01-08\u002F2024-01-22\">\u003C\u002Fnord-date-range-picker>",{"id":1842,"name":1843,"exportName":1843,"html":1844},"components-date-range-picker--disabled","Disabled","\u003Cnord-date-range-picker label=\"Reporting period\" id=\"drp-disabled\" disabled value=\"2024-01-01\u002F2024-01-31\">\u003C\u002Fnord-date-range-picker>",{"id":1846,"name":1847,"exportName":1847,"html":1848},"components-date-range-picker--readonly","Readonly","\u003Cnord-date-range-picker label=\"Reporting period\" id=\"drp-readonly\" readonly value=\"2024-01-01\u002F2024-01-31\">\u003C\u002Fnord-date-range-picker>",{"id":1850,"name":1851,"exportName":1851,"html":1852},"components-date-range-picker--invalid","Invalid","\u003Cnord-date-range-picker label=\"Reporting period\" error=\"Please choose a date range.\" id=\"drp-invalid\">\u003C\u002Fnord-date-range-picker>",{"id":1854,"name":1855,"exportName":1855,"html":1856},"components-date-range-picker--sizes","Sizes","\u003Cnord-stack gap=\"m\" class=\"n:container-xxs\">\n      \u003Cnord-date-range-picker size=\"s\" aria-label=\"Small\" value=\"2024-01-01\u002F2024-01-31\">\u003C\u002Fnord-date-range-picker>\n      \u003Cnord-date-range-picker size=\"m\" aria-label=\"Medium\" value=\"2024-01-01\u002F2024-01-31\">\u003C\u002Fnord-date-range-picker>\n      \u003Cnord-date-range-picker size=\"l\" aria-label=\"Large\" value=\"2024-01-01\u002F2024-01-31\">\u003C\u002Fnord-date-range-picker>\n    \u003C\u002Fnord-stack>",{"id":1858,"name":1859,"exportName":1859,"html":1860},"components-date-range-picker--standalone","Standalone","\u003Cnord-date-range-picker label=\"Reporting period\" hint=\"Start and end dates.\" hint-below>\u003C\u002Fnord-date-range-picker>",{"id":1862,"name":318,"exportName":318,"html":1863},"components-date-range-picker--field","\u003Cnord-field>\n      \u003Cnord-field-label for=\"period\">Reporting period\u003C\u002Fnord-field-label>\n      \u003Cnord-date-range-picker id=\"period\">\u003C\u002Fnord-date-range-picker>\n      \u003Cnord-field-description>Start and end dates.\u003C\u002Fnord-field-description>\n    \u003C\u002Fnord-field>",{"hasPlayground":837,"stories":1865},[1866,1870,1875,1880,1885,1890,1896,1901,1906,1911,1916],{"id":1867,"name":415,"exportName":415,"html":1868,"js":1869},"components-filter-dropdown--single","\u003Cnord-filter-dropdown id=\"fd-single\" label=\"Status\" name=\"status\" value=\"open\">\u003C\u002Fnord-filter-dropdown>","const el = document.getElementById(\"fd-single\")\nel.options = [\n  { value: \"open\", label: \"Open\" },\n  { value: \"in-progress\", label: \"In progress\" },\n  { value: \"on-hold\", label: \"On hold\" },\n  { value: \"closed\", label: \"Closed\" },\n]\nel.value = \"open\"",{"id":1871,"name":1872,"exportName":1872,"html":1873,"js":1874},"components-filter-dropdown--multiple","Multiple","\u003Cnord-filter-dropdown id=\"fd-multiple\" label=\"Status\" name=\"status\" multiple>\u003C\u002Fnord-filter-dropdown>","const el = document.getElementById(\"fd-multiple\")\nel.options = [\n  { value: \"open\", label: \"Open\" },\n  { value: \"in-progress\", label: \"In progress\" },\n  { value: \"on-hold\", label: \"On hold\" },\n  { value: \"closed\", label: \"Closed\" },\n]\nel.value = [\"open\", \"in-progress\"]",{"id":1876,"name":1877,"exportName":1877,"html":1878,"js":1879},"components-filter-dropdown--searchable","Searchable","\u003Cnord-filter-dropdown id=\"fd-searchable\" label=\"Country\" name=\"country\" searchable>\u003C\u002Fnord-filter-dropdown>","document.getElementById(\"fd-searchable\").options = [\n  { value: \"au\", label: \"Australia\" },\n  { value: \"br\", label: \"Brazil\" },\n  { value: \"ca\", label: \"Canada\" },\n  { value: \"fr\", label: \"France\" },\n  { value: \"de\", label: \"Germany\" },\n  { value: \"jp\", label: \"Japan\" },\n  { value: \"uk\", label: \"United Kingdom\" },\n  { value: \"us\", label: \"United States\" },\n]",{"id":1881,"name":1882,"exportName":1882,"html":1883,"js":1884},"components-filter-dropdown--grouped","Grouped","\u003Cnord-filter-dropdown id=\"fd-grouped\" label=\"Assignee\" name=\"assignee\" multiple>\u003C\u002Fnord-filter-dropdown>","document.getElementById(\"fd-grouped\").options = [\n  {\n    heading: \"Engineering\",\n    children: [\n      { value: \"ada\", label: \"Ada Lovelace\" },\n      { value: \"grace\", label: \"Grace Hopper\" },\n    ],\n  },\n  {\n    heading: \"Research\",\n    children: [\n      { value: \"alan\", label: \"Alan Turing\" },\n      { value: \"katherine\", label: \"Katherine Johnson\" },\n    ],\n  },\n]",{"id":1886,"name":1887,"exportName":1887,"html":1888,"js":1889},"components-filter-dropdown--tree","Tree","\u003Cnord-filter-dropdown id=\"fd-tree\" label=\"Species\" name=\"species\" multiple>\u003C\u002Fnord-filter-dropdown>","document.getElementById(\"fd-tree\").options = [\n  {\n    value: \"canine\",\n    label: \"Canine\",\n    children: [\n      { value: \"german-shepherd\", label: \"German Shepherd\" },\n      { value: \"siberian-husky\", label: \"Siberian Husky\" },\n    ],\n  },\n  {\n    value: \"feline\",\n    label: \"Feline\",\n    children: [\n      { value: \"persian\", label: \"Persian\" },\n      { value: \"siamese\", label: \"Siamese\" },\n    ],\n  },\n]",{"id":1891,"name":1892,"exportName":1893,"html":1894,"js":1895},"components-filter-dropdown--select-all","Select All","SelectAll","\u003Cnord-filter-dropdown id=\"fd-select-all\" label=\"Status\" name=\"status\" multiple select-all>\u003C\u002Fnord-filter-dropdown>","document.getElementById(\"fd-select-all\").options = [\n  { value: \"open\", label: \"Open\" },\n  { value: \"in-progress\", label: \"In progress\" },\n  { value: \"on-hold\", label: \"On hold\" },\n  { value: \"closed\", label: \"Closed\" },\n]",{"id":1897,"name":1898,"exportName":1898,"html":1899,"js":1900},"components-filter-dropdown--clearable","Clearable","\u003Cnord-filter-dropdown id=\"fd-clearable\" label=\"Status\" name=\"status\" clearable value=\"open\">\u003C\u002Fnord-filter-dropdown>","const el = document.getElementById(\"fd-clearable\")\nel.options = [\n  { value: \"open\", label: \"Open\" },\n  { value: \"closed\", label: \"Closed\" },\n]\nel.value = \"open\"",{"id":1902,"name":1903,"exportName":1903,"html":1904,"js":1905},"components-filter-dropdown--removable","Removable","\u003Cnord-filter-dropdown\n      id=\"fd-removable\"\n      label=\"Status\"\n      name=\"status\"\n      removable\n      value=\"open\"\n    >\u003C\u002Fnord-filter-dropdown>","const el = document.getElementById(\"fd-removable\")\nel.options = [\n  { value: \"open\", label: \"Open\" },\n  { value: \"closed\", label: \"Closed\" },\n]\nel.value = \"open\"\n\n\u002F\u002F The trailing button fires \"remove\" so you can remove the dropdown from the DOM.\nel.addEventListener(\"remove\", () => el.remove())",{"id":1907,"name":1908,"exportName":1908,"html":1909,"js":1910},"components-filter-dropdown--loading","Loading","\u003Cnord-filter-dropdown id=\"fd-loading\" label=\"Status\" name=\"status\" searchable loading>\u003C\u002Fnord-filter-dropdown>","document.getElementById(\"fd-loading\").options = []",{"id":1912,"name":1913,"exportName":1913,"html":1914,"js":1915},"components-filter-dropdown--async","Async","\u003Cnord-filter-dropdown\n      id=\"fd-async\"\n      label=\"User\"\n      name=\"user\"\n      searchable\n      internal-search=\"false\"\n    >\u003C\u002Fnord-filter-dropdown>","const el = document.getElementById(\"fd-async\")\n\nconst users = [\n  { value: \"ada\", label: \"Ada Lovelace\" },\n  { value: \"grace\", label: \"Grace Hopper\" },\n  { value: \"alan\", label: \"Alan Turing\" },\n  { value: \"katherine\", label: \"Katherine Johnson\" },\n]\n\nel.options = users\n\n\u002F\u002F internal-search is off, so update the options in response to search-change.\nel.addEventListener(\"search-change\", (event) => {\n  const query = String(event.detail).toLowerCase()\n  el.loading = true\n  setTimeout(() => {\n    el.options = query ? users.filter((option) => option.label.toLowerCase().includes(query)) : users\n    el.loading = false\n  }, 300)\n})",{"id":1917,"name":1843,"exportName":1843,"html":1918,"js":1919},"components-filter-dropdown--disabled","\u003Cnord-filter-dropdown id=\"fd-disabled\" label=\"Status\" name=\"status\" disabled>\u003C\u002Fnord-filter-dropdown>","document.getElementById(\"fd-disabled\").options = [\n  { value: \"open\", label: \"Open\" },\n  { value: \"closed\", label: \"Closed\" },\n]",{"hasPlayground":837,"stories":1921},[1922,1925,1929,1933,1937,1942],{"id":1923,"name":521,"exportName":521,"html":1924},"components-outline--overview","\u003Cnord-outline active=\"installation\">\n      \u003Cnord-outline-item href=\"#introduction\" level=\"1\">Introduction\u003C\u002Fnord-outline-item>\n      \u003Cnord-outline-item href=\"#installation\" level=\"1\">Installation\u003C\u002Fnord-outline-item>\n      \u003Cnord-outline-item href=\"#usage\" level=\"1\">Usage\u003C\u002Fnord-outline-item>\n      \u003Cnord-outline-item href=\"#accessibility\" level=\"1\">Accessibility\u003C\u002Fnord-outline-item>\n    \u003C\u002Fnord-outline>",{"id":1926,"name":1927,"exportName":1927,"html":1928},"components-outline--levels","Levels","\u003Cnord-outline active=\"design-tokens\">\n      \u003Cnord-outline-item href=\"#overview\" level=\"1\">Overview\u003C\u002Fnord-outline-item>\n      \u003Cnord-outline-item href=\"#core-concepts\" level=\"2\">Core concepts\u003C\u002Fnord-outline-item>\n      \u003Cnord-outline-item href=\"#design-tokens\" level=\"3\">Design tokens\u003C\u002Fnord-outline-item>\n      \u003Cnord-outline-item href=\"#naming-scheme\" level=\"4\">Naming scheme\u003C\u002Fnord-outline-item>\n      \u003Cnord-outline-item href=\"#components\" level=\"2\">Components\u003C\u002Fnord-outline-item>\n      \u003Cnord-outline-item href=\"#reference\" level=\"1\">Reference\u003C\u002Fnord-outline-item>\n    \u003C\u002Fnord-outline>",{"id":1930,"name":1931,"exportName":1931,"html":1932},"components-outline--compact","Compact","\u003Cnord-outline density=\"compact\" active=\"usage\">\n      \u003Cnord-outline-item href=\"#introduction\" level=\"1\">Introduction\u003C\u002Fnord-outline-item>\n      \u003Cnord-outline-item href=\"#installation\" level=\"1\">Installation\u003C\u002Fnord-outline-item>\n      \u003Cnord-outline-item href=\"#usage\" level=\"1\">Usage\u003C\u002Fnord-outline-item>\n      \u003Cnord-outline-item href=\"#api\" level=\"2\">API\u003C\u002Fnord-outline-item>\n      \u003Cnord-outline-item href=\"#accessibility\" level=\"1\">Accessibility\u003C\u002Fnord-outline-item>\n    \u003C\u002Fnord-outline>",{"id":1934,"name":1935,"exportName":1935,"html":1936},"components-outline--controlled","Controlled","\u003Cnord-outline active=\"usage\">\n      \u003Cnord-outline-item href=\"#introduction\" level=\"1\">Introduction\u003C\u002Fnord-outline-item>\n      \u003Cnord-outline-item href=\"#installation\" level=\"1\">Installation\u003C\u002Fnord-outline-item>\n      \u003Cnord-outline-item href=\"#usage\" level=\"1\">Usage\u003C\u002Fnord-outline-item>\n      \u003Cnord-outline-item href=\"#accessibility\" level=\"1\">Accessibility\u003C\u002Fnord-outline-item>\n    \u003C\u002Fnord-outline>",{"id":1938,"name":1939,"exportName":1940,"html":1941},"components-outline--scroll-spy","Scroll Spy","ScrollSpy","\u003Cdiv class=\"n:flex n:gap-xl n:items-start\">\n      \n      \u003Cnord-outline class=\"n:sticky n:inset-bs-m\">\u003C\u002Fnord-outline>\n    \u003C\u002Fdiv>",{"id":1943,"name":1944,"exportName":1945,"html":1946},"components-outline--from-content","From Content","FromContent","\u003Cdiv class=\"n:flex n:gap-xl n:items-start\">\n      \u003Cdiv id=\"from-content\" class=\"n:flex-1 n:min-inline-0\">\n        \u003Ch2 id=\"getting-started\" class=\"n:mbe-s\">Getting started\u003C\u002Fh2>\n        \u003Cp class=\"n:text-weaker\">\u003C\u002Fp>\n        \u003Ch3 id=\"prerequisites\" class=\"n:mbe-s\">Prerequisites\u003C\u002Fh3>\n        \u003Cp class=\"n:text-weaker\">\u003C\u002Fp>\n        \u003Ch3 id=\"first-steps\" class=\"n:mbe-s\">First steps\u003C\u002Fh3>\n        \u003Cp class=\"n:text-weaker\">\u003C\u002Fp>\n        \u003Ch2 id=\"going-further\" class=\"n:mbe-s\">Going further\u003C\u002Fh2>\n        \u003Cp class=\"n:text-weaker\">\u003C\u002Fp>\n      \u003C\u002Fdiv>\n      \u003Cnord-outline for=\"from-content\" class=\"n:sticky n:inset-bs-m\">\u003C\u002Fnord-outline>\n    \u003C\u002Fdiv>",{"hasPlayground":837,"stories":1948},[1949,1952,1955,1959,1963,1968,1972],{"id":1950,"name":521,"exportName":521,"html":1951},"components-pagination--overview","\u003Cnord-stack direction=\"horizontal\" align-items=\"center\" wrap>\n        \u003Cnord-pagination style=\"inline-size: auto; margin: 0;\">\n          \u003Cnord-pagination-content>\n            \u003Cnord-pagination-item>\n              \u003Cnord-pagination-previous>\n                \u003Cnord-button square href=\"#\" disabled>\n                  \u003Cnord-icon name=\"arrow-left-small\">\u003C\u002Fnord-icon>\n                  \u003Cnord-visually-hidden>Previous\u003C\u002Fnord-visually-hidden>\n                \u003C\u002Fnord-button>\n              \u003C\u002Fnord-pagination-previous>\n            \u003C\u002Fnord-pagination-item>\n            \u003Cnord-pagination-item>\n              \u003Cnord-pagination-link current>\n                \u003Cnord-button variant=\"primary\" href=\"#\">1\u003C\u002Fnord-button>\n              \u003C\u002Fnord-pagination-link>\n            \u003C\u002Fnord-pagination-item>\n            \u003Cnord-pagination-item>\n              \u003Cnord-pagination-link>\n                \u003Cnord-button variant=\"plain\" href=\"#\">2\u003C\u002Fnord-button>\n              \u003C\u002Fnord-pagination-link>\n            \u003C\u002Fnord-pagination-item>\n            \u003Cnord-pagination-item>\n              \u003Cnord-pagination-link>\n                \u003Cnord-button variant=\"plain\" href=\"#\">3\u003C\u002Fnord-button>\n              \u003C\u002Fnord-pagination-link>\n            \u003C\u002Fnord-pagination-item>\n            \u003Cnord-pagination-item>\n              \u003Cnord-pagination-ellipsis>\u003C\u002Fnord-pagination-ellipsis>\n            \u003C\u002Fnord-pagination-item>\n            \u003Cnord-pagination-item>\n              \u003Cnord-pagination-link>\n                \u003Cnord-button variant=\"plain\" href=\"#\">25\u003C\u002Fnord-button>\n              \u003C\u002Fnord-pagination-link>\n            \u003C\u002Fnord-pagination-item>\n            \u003Cnord-pagination-item>\n              \u003Cnord-pagination-next>\n                \u003Cnord-button square href=\"#\">\n                  \u003Cnord-icon name=\"arrow-right-small\">\u003C\u002Fnord-icon>\n                  \u003Cnord-visually-hidden>Next\u003C\u002Fnord-visually-hidden>\n                \u003C\u002Fnord-button>\n              \u003C\u002Fnord-pagination-next>\n            \u003C\u002Fnord-pagination-item>\n          \u003C\u002Fnord-pagination-content>\n        \u003C\u002Fnord-pagination>\n\n        \u003Cp aria-live=\"polite\" style=\"flex: 1; margin: 0; color: var(--n-color-text-weaker); font-size: var(--n-font-size-s);\">\n          Showing 1–10 of 248\n        \u003C\u002Fp>\n\n        \u003Cnord-select label=\"Items per page\" hide-label size=\"m\">\n          \u003Coption value=\"10\" selected>10 per page\u003C\u002Foption>\n          \u003Coption value=\"25\">25 per page\u003C\u002Foption>\n          \u003Coption value=\"50\">50 per page\u003C\u002Foption>\n        \u003C\u002Fnord-select>\n      \u003C\u002Fnord-stack>",{"id":1953,"name":1908,"exportName":1908,"html":1954},"components-pagination--loading","\u003Cnord-pagination loading>\n        \u003Cnord-pagination-content>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-previous>\n              \u003Cnord-button square href=\"#\">\n                \u003Cnord-icon name=\"arrow-left-small\">\u003C\u002Fnord-icon>\n                \u003Cnord-visually-hidden>Previous\u003C\u002Fnord-visually-hidden>\n              \u003C\u002Fnord-button>\n            \u003C\u002Fnord-pagination-previous>\n          \u003C\u002Fnord-pagination-item>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-link>\n              \u003Cnord-button variant=\"plain\" href=\"#\">1\u003C\u002Fnord-button>\n            \u003C\u002Fnord-pagination-link>\n          \u003C\u002Fnord-pagination-item>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-link current>\n              \u003Cnord-button variant=\"primary\" href=\"#\">2\u003C\u002Fnord-button>\n            \u003C\u002Fnord-pagination-link>\n          \u003C\u002Fnord-pagination-item>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-link>\n              \u003Cnord-button variant=\"plain\" href=\"#\">3\u003C\u002Fnord-button>\n            \u003C\u002Fnord-pagination-link>\n          \u003C\u002Fnord-pagination-item>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-next>\n              \u003Cnord-button square href=\"#\">\n                \u003Cnord-icon name=\"arrow-right-small\">\u003C\u002Fnord-icon>\n                \u003Cnord-visually-hidden>Next\u003C\u002Fnord-visually-hidden>\n              \u003C\u002Fnord-button>\n            \u003C\u002Fnord-pagination-next>\n          \u003C\u002Fnord-pagination-item>\n        \u003C\u002Fnord-pagination-content>\n      \u003C\u002Fnord-pagination>",{"id":1956,"name":1957,"exportName":1957,"html":1958},"components-pagination--numbered","Numbered","\u003Cnord-pagination>\n        \u003Cnord-pagination-content>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-previous>\n              \u003Cnord-button square href=\"#\">\n                \u003Cnord-icon name=\"arrow-left-small\">\u003C\u002Fnord-icon>\n                \u003Cnord-visually-hidden>Previous\u003C\u002Fnord-visually-hidden>\n              \u003C\u002Fnord-button>\n            \u003C\u002Fnord-pagination-previous>\n          \u003C\u002Fnord-pagination-item>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-link>\n              \u003Cnord-button variant=\"plain\" href=\"#\">1\u003C\u002Fnord-button>\n            \u003C\u002Fnord-pagination-link>\n          \u003C\u002Fnord-pagination-item>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-link current>\n              \u003Cnord-button variant=\"primary\" href=\"#\">2\u003C\u002Fnord-button>\n            \u003C\u002Fnord-pagination-link>\n          \u003C\u002Fnord-pagination-item>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-link>\n              \u003Cnord-button variant=\"plain\" href=\"#\">3\u003C\u002Fnord-button>\n            \u003C\u002Fnord-pagination-link>\n          \u003C\u002Fnord-pagination-item>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-ellipsis>\u003C\u002Fnord-pagination-ellipsis>\n          \u003C\u002Fnord-pagination-item>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-next>\n              \u003Cnord-button square href=\"#\">\n                \u003Cnord-icon name=\"arrow-right-small\">\u003C\u002Fnord-icon>\n                \u003Cnord-visually-hidden>Next\u003C\u002Fnord-visually-hidden>\n              \u003C\u002Fnord-button>\n            \u003C\u002Fnord-pagination-next>\n          \u003C\u002Fnord-pagination-item>\n        \u003C\u002Fnord-pagination-content>\n      \u003C\u002Fnord-pagination>",{"id":1960,"name":1961,"exportName":1961,"html":1962},"components-pagination--simple","Simple","\u003Cnord-pagination>\n        \u003Cnord-pagination-content>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-link>\n              \u003Cnord-button variant=\"plain\" href=\"#\">1\u003C\u002Fnord-button>\n            \u003C\u002Fnord-pagination-link>\n          \u003C\u002Fnord-pagination-item>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-link current>\n              \u003Cnord-button variant=\"primary\" href=\"#\">2\u003C\u002Fnord-button>\n            \u003C\u002Fnord-pagination-link>\n          \u003C\u002Fnord-pagination-item>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-link>\n              \u003Cnord-button variant=\"plain\" href=\"#\">3\u003C\u002Fnord-button>\n            \u003C\u002Fnord-pagination-link>\n          \u003C\u002Fnord-pagination-item>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-link>\n              \u003Cnord-button variant=\"plain\" href=\"#\">4\u003C\u002Fnord-button>\n            \u003C\u002Fnord-pagination-link>\n          \u003C\u002Fnord-pagination-item>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-link>\n              \u003Cnord-button variant=\"plain\" href=\"#\">5\u003C\u002Fnord-button>\n            \u003C\u002Fnord-pagination-link>\n          \u003C\u002Fnord-pagination-item>\n        \u003C\u002Fnord-pagination-content>\n      \u003C\u002Fnord-pagination>",{"id":1964,"name":1965,"exportName":1966,"html":1967},"components-pagination--icons-only","Icons Only","IconsOnly","\u003Cnord-stack direction=\"horizontal\" align-items=\"center\" justify-content=\"space-between\">\n        \u003Cnord-select label=\"Rows per page\" hide-label size=\"m\">\n          \u003Coption value=\"10\">10\u003C\u002Foption>\n          \u003Coption value=\"25\" selected>25\u003C\u002Foption>\n          \u003Coption value=\"50\">50\u003C\u002Foption>\n          \u003Coption value=\"100\">100\u003C\u002Foption>\n        \u003C\u002Fnord-select>\n        \u003Cnord-pagination style=\"inline-size: auto; margin: 0;\">\n          \u003Cnord-pagination-content>\n            \u003Cnord-pagination-item>\n              \u003Cnord-pagination-previous>\n                \u003Cnord-button square href=\"#\">\n                  \u003Cnord-icon name=\"arrow-left-small\">\u003C\u002Fnord-icon>\n                  \u003Cnord-visually-hidden>Previous\u003C\u002Fnord-visually-hidden>\n                \u003C\u002Fnord-button>\n              \u003C\u002Fnord-pagination-previous>\n            \u003C\u002Fnord-pagination-item>\n            \u003Cnord-pagination-item>\n              \u003Cnord-pagination-next>\n                \u003Cnord-button square href=\"#\">\n                  \u003Cnord-icon name=\"arrow-right-small\">\u003C\u002Fnord-icon>\n                  \u003Cnord-visually-hidden>Next\u003C\u002Fnord-visually-hidden>\n                \u003C\u002Fnord-button>\n              \u003C\u002Fnord-pagination-next>\n            \u003C\u002Fnord-pagination-item>\n          \u003C\u002Fnord-pagination-content>\n        \u003C\u002Fnord-pagination>\n      \u003C\u002Fnord-stack>",{"id":1969,"name":1970,"exportName":1970,"html":1971},"components-pagination--cursor","Cursor","\u003Cnord-pagination>\n        \u003Cnord-pagination-content>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-previous>\n              \u003Cnord-button href=\"#\" disabled>\n                \u003Cnord-icon name=\"arrow-left-small\">\u003C\u002Fnord-icon>\n                Previous\n              \u003C\u002Fnord-button>\n            \u003C\u002Fnord-pagination-previous>\n          \u003C\u002Fnord-pagination-item>\n          \u003Cnord-pagination-item>\n            \u003Cnord-pagination-next>\n              \u003Cnord-button href=\"#\">\n                Next\n                \u003Cnord-icon name=\"arrow-right-small\">\u003C\u002Fnord-icon>\n              \u003C\u002Fnord-button>\n            \u003C\u002Fnord-pagination-next>\n          \u003C\u002Fnord-pagination-item>\n        \u003C\u002Fnord-pagination-content>\n      \u003C\u002Fnord-pagination>",{"id":1973,"name":1974,"exportName":1974,"html":1975},"components-pagination--rtl","Rtl","\u003Cdiv dir=\"rtl\">\n        \u003Cnord-pagination>\n          \u003Cnord-pagination-content>\n            \u003Cnord-pagination-item>\n              \u003Cnord-pagination-previous>\n                \u003Cnord-button square href=\"#\">\n                  \u003Cnord-icon name=\"arrow-right-small\">\u003C\u002Fnord-icon>\n                  \u003Cnord-visually-hidden>السابق\u003C\u002Fnord-visually-hidden>\n                \u003C\u002Fnord-button>\n              \u003C\u002Fnord-pagination-previous>\n            \u003C\u002Fnord-pagination-item>\n            \u003Cnord-pagination-item>\n              \u003Cnord-pagination-link>\n                \u003Cnord-button variant=\"plain\" href=\"#\">١\u003C\u002Fnord-button>\n              \u003C\u002Fnord-pagination-link>\n            \u003C\u002Fnord-pagination-item>\n            \u003Cnord-pagination-item>\n              \u003Cnord-pagination-link current>\n                \u003Cnord-button variant=\"primary\" href=\"#\">٢\u003C\u002Fnord-button>\n              \u003C\u002Fnord-pagination-link>\n            \u003C\u002Fnord-pagination-item>\n            \u003Cnord-pagination-item>\n              \u003Cnord-pagination-link>\n                \u003Cnord-button variant=\"plain\" href=\"#\">٣\u003C\u002Fnord-button>\n              \u003C\u002Fnord-pagination-link>\n            \u003C\u002Fnord-pagination-item>\n            \u003Cnord-pagination-item>\n              \u003Cnord-pagination-ellipsis label=\"مزيد من الصفحات\">\u003C\u002Fnord-pagination-ellipsis>\n            \u003C\u002Fnord-pagination-item>\n            \u003Cnord-pagination-item>\n              \u003Cnord-pagination-next>\n                \u003Cnord-button square href=\"#\">\n                  \u003Cnord-icon name=\"arrow-left-small\">\u003C\u002Fnord-icon>\n                  \u003Cnord-visually-hidden>التالي\u003C\u002Fnord-visually-hidden>\n                \u003C\u002Fnord-button>\n              \u003C\u002Fnord-pagination-next>\n            \u003C\u002Fnord-pagination-item>\n          \u003C\u002Fnord-pagination-content>\n        \u003C\u002Fnord-pagination>\n      \u003C\u002Fdiv>",{"hasPlayground":837,"stories":1977},[1978,1981,1984,1987,1990,1994,1999],{"id":1979,"name":410,"exportName":410,"html":1980},"components-accordion--basic","\u003Cnord-accordion class=\"n:container-xs\">\n      \u003Cnord-accordion-item value=\"shipping\">\n        \u003Cnord-accordion-header>\n          \u003Cnord-accordion-trigger>\n            What are your shipping options?\n            \u003Cnord-icon name=\"arrow-expand-down-small\" size=\"xxs\">\u003C\u002Fnord-icon>\n          \u003C\u002Fnord-accordion-trigger>\n        \u003C\u002Fnord-accordion-header>\n        \u003Cnord-accordion-panel>\n          We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on\n          international orders.\n        \u003C\u002Fnord-accordion-panel>\n      \u003C\u002Fnord-accordion-item>\n      \u003Cnord-accordion-item value=\"returns\">\n        \u003Cnord-accordion-header>\n          \u003Cnord-accordion-trigger>\n            What is your return policy?\n            \u003Cnord-icon name=\"arrow-expand-down-small\" size=\"xxs\">\u003C\u002Fnord-icon>\n          \u003C\u002Fnord-accordion-trigger>\n        \u003C\u002Fnord-accordion-header>\n        \u003Cnord-accordion-panel>\n          Returns accepted within 30 days. Items must be unused and in original packaging. Refunds\n          processed within 5-7 business days.\n        \u003C\u002Fnord-accordion-panel>\n      \u003C\u002Fnord-accordion-item>\n      \u003Cnord-accordion-item value=\"support\">\n        \u003Cnord-accordion-header>\n          \u003Cnord-accordion-trigger>\n            How can I contact customer support?\n            \u003Cnord-icon name=\"arrow-expand-down-small\" size=\"xxs\">\u003C\u002Fnord-icon>\n          \u003C\u002Fnord-accordion-trigger>\n        \u003C\u002Fnord-accordion-header>\n        \u003Cnord-accordion-panel>\n          Reach us via email, live chat, or phone. We respond within 24 hours during business days.\n        \u003C\u002Fnord-accordion-panel>\n      \u003C\u002Fnord-accordion-item>\n    \u003C\u002Fnord-accordion>",{"id":1982,"name":521,"exportName":521,"html":1983},"components-accordion--overview","\u003Cnord-accordion class=\"n:container-xs\">\n      \u003Cnord-accordion-item value=\"shipping\">\n        \u003Cnord-accordion-header>\n          \u003Cnord-accordion-trigger>\n            What are your shipping options?\n            \u003Cnord-icon name=\"arrow-expand-down-small\" size=\"xxs\">\u003C\u002Fnord-icon>\n          \u003C\u002Fnord-accordion-trigger>\n        \u003C\u002Fnord-accordion-header>\n        \u003Cnord-accordion-panel>\n          We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on\n          international orders.\n        \u003C\u002Fnord-accordion-panel>\n      \u003C\u002Fnord-accordion-item>\n      \u003Cnord-accordion-item value=\"returns\">\n        \u003Cnord-accordion-header>\n          \u003Cnord-accordion-trigger>\n            What is your return policy?\n            \u003Cnord-icon name=\"arrow-expand-down-small\" size=\"xxs\">\u003C\u002Fnord-icon>\n          \u003C\u002Fnord-accordion-trigger>\n        \u003C\u002Fnord-accordion-header>\n        \u003Cnord-accordion-panel>\n          Returns accepted within 30 days. Items must be unused and in original packaging.\n        \u003C\u002Fnord-accordion-panel>\n      \u003C\u002Fnord-accordion-item>\n    \u003C\u002Fnord-accordion>",{"id":1985,"name":1843,"exportName":1843,"html":1986},"components-accordion--disabled","\u003Cnord-accordion disabled class=\"n:container-xs\">\n      \u003Cnord-accordion-item value=\"shipping\">\n        \u003Cnord-accordion-header>\n          \u003Cnord-accordion-trigger>\n            What are your shipping options?\n            \u003Cnord-icon name=\"arrow-expand-down-small\" size=\"xxs\">\u003C\u002Fnord-icon>\n          \u003C\u002Fnord-accordion-trigger>\n        \u003C\u002Fnord-accordion-header>\n        \u003Cnord-accordion-panel>\n          We offer standard (5-7 days), express (2-3 days), and overnight shipping.\n        \u003C\u002Fnord-accordion-panel>\n      \u003C\u002Fnord-accordion-item>\n      \u003Cnord-accordion-item value=\"returns\">\n        \u003Cnord-accordion-header>\n          \u003Cnord-accordion-trigger>\n            What is your return policy?\n            \u003Cnord-icon name=\"arrow-expand-down-small\" size=\"xxs\">\u003C\u002Fnord-icon>\n          \u003C\u002Fnord-accordion-trigger>\n        \u003C\u002Fnord-accordion-header>\n        \u003Cnord-accordion-panel>\n          Returns accepted within 30 days. Items must be unused and in original packaging.\n        \u003C\u002Fnord-accordion-panel>\n      \u003C\u002Fnord-accordion-item>\n    \u003C\u002Fnord-accordion>",{"id":1988,"name":1872,"exportName":1872,"html":1989},"components-accordion--multiple","\u003Cnord-accordion multiple class=\"n:container-xs\">\n      \u003Cnord-accordion-item value=\"notifications\">\n        \u003Cnord-accordion-header>\n          \u003Cnord-accordion-trigger>\n            Notification Settings\n            \u003Cnord-icon name=\"arrow-expand-down-small\" size=\"xxs\">\u003C\u002Fnord-icon>\n          \u003C\u002Fnord-accordion-trigger>\n        \u003C\u002Fnord-accordion-header>\n        \u003Cnord-accordion-panel>\n          Manage how you receive notifications. You can enable email alerts for updates or push\n          notifications for mobile devices.\n        \u003C\u002Fnord-accordion-panel>\n      \u003C\u002Fnord-accordion-item>\n      \u003Cnord-accordion-item value=\"privacy\">\n        \u003Cnord-accordion-header>\n          \u003Cnord-accordion-trigger>\n            Privacy & Security\n            \u003Cnord-icon name=\"arrow-expand-down-small\" size=\"xxs\">\u003C\u002Fnord-icon>\n          \u003C\u002Fnord-accordion-trigger>\n        \u003C\u002Fnord-accordion-header>\n        \u003Cnord-accordion-panel>\n          Control your privacy settings and security preferences. Enable two-factor authentication,\n          manage connected devices, review active sessions, and configure data sharing preferences.\n          You can also download your data or delete your account.\n        \u003C\u002Fnord-accordion-panel>\n      \u003C\u002Fnord-accordion-item>\n      \u003Cnord-accordion-item value=\"billing\">\n        \u003Cnord-accordion-header>\n          \u003Cnord-accordion-trigger>\n            Billing & Subscription\n            \u003Cnord-icon name=\"arrow-expand-down-small\" size=\"xxs\">\u003C\u002Fnord-icon>\n          \u003C\u002Fnord-accordion-trigger>\n        \u003C\u002Fnord-accordion-header>\n        \u003Cnord-accordion-panel>\n          View your current plan, payment history, and upcoming invoices. Update your payment\n          method, change your subscription tier, or cancel your subscription.\n        \u003C\u002Fnord-accordion-panel>\n      \u003C\u002Fnord-accordion-item>\n    \u003C\u002Fnord-accordion>",{"id":1991,"name":1992,"exportName":1992,"html":1993},"components-accordion--start","Start","\u003Cnord-accordion class=\"n:container-xs\">\n      \u003Cnord-accordion-item value=\"shipping\">\n        \u003Cnord-accordion-header>\n          \u003Cnord-accordion-trigger justify-content=\"start\">\n            What are your shipping options?\n            \u003Cnord-icon name=\"arrow-expand-down-small\" size=\"xxs\">\u003C\u002Fnord-icon>\n          \u003C\u002Fnord-accordion-trigger>\n        \u003C\u002Fnord-accordion-header>\n        \u003Cnord-accordion-panel>\n          We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on\n          international orders.\n        \u003C\u002Fnord-accordion-panel>\n      \u003C\u002Fnord-accordion-item>\n      \u003Cnord-accordion-item value=\"returns\">\n        \u003Cnord-accordion-header>\n          \u003Cnord-accordion-trigger justify-content=\"start\">\n            What is your return policy?\n            \u003Cnord-icon name=\"arrow-expand-down-small\" size=\"xxs\">\u003C\u002Fnord-icon>\n          \u003C\u002Fnord-accordion-trigger>\n        \u003C\u002Fnord-accordion-header>\n        \u003Cnord-accordion-panel>\n          Returns accepted within 30 days. Items must be unused and in original packaging.\n        \u003C\u002Fnord-accordion-panel>\n      \u003C\u002Fnord-accordion-item>\n    \u003C\u002Fnord-accordion>",{"id":1995,"name":1996,"exportName":1997,"html":1998},"components-accordion--custom-icon","Custom Icon","CustomIcon","\u003Cnord-accordion class=\"n:container-xs\">\n      \u003Cnord-accordion-item value=\"shipping\">\n        \u003Cnord-accordion-header>\n          \u003Cnord-accordion-trigger>\n            What are your shipping options?\n            \u003Cnord-icon name=\"arrow-down-small\" size=\"xxs\">\u003C\u002Fnord-icon>\n          \u003C\u002Fnord-accordion-trigger>\n        \u003C\u002Fnord-accordion-header>\n        \u003Cnord-accordion-panel>\n          We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on\n          international orders.\n        \u003C\u002Fnord-accordion-panel>\n      \u003C\u002Fnord-accordion-item>\n      \u003Cnord-accordion-item value=\"returns\">\n        \u003Cnord-accordion-header>\n          \u003Cnord-accordion-trigger>\n            What is your return policy?\n            \u003Cnord-icon name=\"arrow-down-small\" size=\"xxs\">\u003C\u002Fnord-icon>\n          \u003C\u002Fnord-accordion-trigger>\n        \u003C\u002Fnord-accordion-header>\n        \u003Cnord-accordion-panel>\n          Returns accepted within 30 days. Items must be unused and in original packaging.\n        \u003C\u002Fnord-accordion-panel>\n      \u003C\u002Fnord-accordion-item>\n    \u003C\u002Fnord-accordion>",{"id":2000,"name":2001,"exportName":2002,"html":2003},"components-accordion--custom-gap","Custom Gap","CustomGap","\u003Cnord-accordion class=\"n:container-xs\" style=\"--n-accordion-trigger-gap: var(--n-space-m)\">\n      \u003Cnord-accordion-item value=\"shipping\">\n        \u003Cnord-accordion-header>\n          \u003Cnord-accordion-trigger>\n            What are your shipping options?\n            \u003Cnord-icon name=\"arrow-expand-down-small\" size=\"xxs\">\u003C\u002Fnord-icon>\n          \u003C\u002Fnord-accordion-trigger>\n        \u003C\u002Fnord-accordion-header>\n        \u003Cnord-accordion-panel>\n          We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on\n          international orders.\n        \u003C\u002Fnord-accordion-panel>\n      \u003C\u002Fnord-accordion-item>\n      \u003Cnord-accordion-item value=\"returns\">\n        \u003Cnord-accordion-header>\n          \u003Cnord-accordion-trigger>\n            What is your return policy?\n            \u003Cnord-icon name=\"arrow-expand-down-small\" size=\"xxs\">\u003C\u002Fnord-icon>\n          \u003C\u002Fnord-accordion-trigger>\n        \u003C\u002Fnord-accordion-header>\n        \u003Cnord-accordion-panel>\n          Returns accepted within 30 days. Items must be unused and in original packaging.\n        \u003C\u002Fnord-accordion-panel>\n      \u003C\u002Fnord-accordion-item>\n    \u003C\u002Fnord-accordion>",{"components":2005,"css":2008,"themes":2011},{"url":2006,"version":2007},"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fcomponents\u002F5.0.0\u002Findex.js","5.0.0",{"url":2009,"version":2010},"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fcss\u002F5.2.0\u002Fnord.min.css","5.2.0",{"nord":2012,"nordDark":2014,"vet":2016,"vetDark":2018},{"url":2013},"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fthemes\u002F10.0.0\u002Fnord.css",{"url":2015},"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fthemes\u002F10.0.0\u002Fnord-dark.css",{"url":2017},"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fthemes\u002F10.0.0\u002Fvet.css",{"url":2019},"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fthemes\u002F10.0.0\u002Fvet-dark.css",[2021,2036,2050,2063,2077,2090,2104,2118,2133,2146,2158,2171,2184,2196,2208,2222,2235,2247,2260,2273,2285,2297,2310,2322,2334,2347,2360,2373,2387,2400,2413,2425,2437,2449,2461,2475,2487,2499,2511,2523],{"id":2022,"title":2023,"category":2024,"description":2025,"extension":833,"html":2026,"meta":2027,"order":2032,"previewHeight":2033,"previewWidth":835,"stem":2034,"__hash__":2035},"blocks\u002Fblocks\u002Fauthentication\u002Flogin-card.md","Login card","Authentication","A centered sign-in card with email, password and a primary action.","\u003Cnord-card padding=\"l\" class=\"n:max-inline-[24rem]! n:mx-auto\">\n  \u003Ch2 slot=\"header\">Sign in\u003C\u002Fh2>\n  \u003Cnord-stack gap=\"l\">\n    \u003Cnord-input label=\"Email\" type=\"email\" placeholder=\"you@example.com\" expand>\u003C\u002Fnord-input>\n    \u003Cnord-input label=\"Password\" type=\"password\" placeholder=\"••••••••\" expand>\u003C\u002Fnord-input>\n    \u003Cnord-checkbox label=\"Remember me\">\u003C\u002Fnord-checkbox>\n    \u003Cnord-button variant=\"primary\" expand>Sign in\u003C\u002Fnord-button>\n    \u003Cnord-button variant=\"plain\" expand>Forgot your password?\u003C\u002Fnord-button>\n  \u003C\u002Fnord-stack>\n\u003C\u002Fnord-card>\n",{"body":2028},{"type":8,"value":2029,"toc":2030},[],{"title":808,"searchDepth":809,"depth":809,"links":2031},[],1,460,"blocks\u002Fauthentication\u002Flogin-card","0kNz4bxu8ri-lzWIZ8HYxllnBf2CgOD0KFNxHcTdJPY",{"id":2037,"title":2038,"category":2024,"description":2039,"extension":833,"html":2040,"meta":2041,"order":818,"previewHeight":2046,"previewWidth":2047,"stem":2048,"__hash__":2049},"blocks\u002Fblocks\u002Fauthentication\u002Fsession-expired.md","Session expired","A re-authentication screen with a warning banner, sign-in card and sign-up link.","\u003Cnord-stack class=\"n:max-inline-[340px] n:mx-auto\">\n  \u003Cnord-banner shadow variant=\"warning\">You've been signed out. Please sign in to continue.\u003C\u002Fnord-banner>\n  \u003Cnord-card padding=\"l\">\n    \u003Ch2 slot=\"header\" class=\"n:m-0 n:text-l n:font-heading\">Sign in to Provet Cloud\u003C\u002Fh2>\n    \u003Cform action=\"#\">\n      \u003Cnord-stack>\n        \u003Cnord-input\n          label=\"Email\"\n          expand\n          required\n          hide-required\n          name=\"email\"\n          type=\"email\"\n          placeholder=\"you@example.com\"\n        >\u003C\u002Fnord-input>\n        \u003Cnord-input\n          label=\"Password\"\n          expand\n          required\n          hide-required\n          name=\"password\"\n          type=\"password\"\n          placeholder=\"••••••••\"\n        >\u003C\u002Fnord-input>\n        \u003Cnord-button type=\"submit\" expand variant=\"primary\">Sign in\u003C\u002Fnord-button>\n      \u003C\u002Fnord-stack>\n    \u003C\u002Fform>\n  \u003C\u002Fnord-card>\n  \u003Cnord-card class=\"n:text-center\">New to Provet Cloud? \u003Ca href=\"#\">Create an account\u003C\u002Fa>.\u003C\u002Fnord-card>\n\u003C\u002Fnord-stack>\n",{"body":2042},{"type":8,"value":2043,"toc":2044},[],{"title":808,"searchDepth":809,"depth":809,"links":2045},[],440,380,"blocks\u002Fauthentication\u002Fsession-expired","P1w4r7v0uRV51Y7YmxYi8gshy5aEdtkxJ5ZvqfcM_vg",{"id":2051,"title":2052,"category":2024,"description":2053,"extension":833,"html":2054,"meta":2055,"order":809,"previewHeight":2060,"previewWidth":835,"stem":2061,"__hash__":2062},"blocks\u002Fblocks\u002Fauthentication\u002Fsignup-card.md","Sign-up card","A registration card with name, email, password and terms consent.","\u003Cnord-card padding=\"l\" class=\"n:max-inline-[24rem]! n:mx-auto\">\n  \u003Ch2 slot=\"header\">Create your account\u003C\u002Fh2>\n  \u003Cnord-stack gap=\"l\">\n    \u003Cnord-input label=\"Full name\" placeholder=\"Ada Lovelace\" expand>\u003C\u002Fnord-input>\n    \u003Cnord-input label=\"Email\" type=\"email\" placeholder=\"you@example.com\" expand>\u003C\u002Fnord-input>\n    \u003Cnord-input label=\"Password\" type=\"password\" placeholder=\"••••••••\" expand>\u003C\u002Fnord-input>\n    \u003Cnord-checkbox label=\"I agree to the Terms of Use\">\u003C\u002Fnord-checkbox>\n    \u003Cnord-button variant=\"primary\" expand>Create account\u003C\u002Fnord-button>\n  \u003C\u002Fnord-stack>\n\u003C\u002Fnord-card>\n",{"body":2056},{"type":8,"value":2057,"toc":2058},[],{"title":808,"searchDepth":809,"depth":809,"links":2059},[],520,"blocks\u002Fauthentication\u002Fsignup-card","Yb-kt0kvAAoopICds4bZnKmHayq1cyM7RJHZdZhN07E",{"id":2064,"title":2065,"category":2066,"description":2067,"extension":833,"html":2068,"meta":2069,"order":2032,"previewHeight":2074,"previewWidth":2060,"stem":2075,"__hash__":2076},"blocks\u002Fblocks\u002Fbilling\u002Fpayment-method.md","Payment method","Billing","A saved card with brand, masked number, expiry and billing actions.","\u003Cnord-card>\n  \u003Cnord-stack slot=\"header\" direction=\"horizontal\" justify-content=\"space-between\" align-items=\"center\">\n    \u003Ch2 class=\"n:m-0 n:text-l n:font-heading\">Payment method\u003C\u002Fh2>\n    \u003Cnord-badge variant=\"success\">Default\u003C\u002Fnord-badge>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-stack gap=\"l\" direction=\"vertical\">\n    \u003Cdiv class=\"n:rounded-default n:p-l\" style=\"background: var(--n-color-accent); color: var(--n-color-text-on-accent)\">\n      \u003Cnord-stack direction=\"horizontal\" justify-content=\"space-between\" align-items=\"center\">\n        \u003Cnord-icon name=\"generic-credit-card\" size=\"l\">\u003C\u002Fnord-icon>\n        \u003Cspan class=\"n:font-heading\">VISA\u003C\u002Fspan>\n      \u003C\u002Fnord-stack>\n      \u003Cdiv class=\"n:mbs-l n:text-l n:font-heading\">•••• •••• •••• 4242\u003C\u002Fdiv>\n      \u003Cnord-stack direction=\"horizontal\" justify-content=\"space-between\" class=\"n:mbs-s n:text-s\">\n        \u003Cspan>Amelia Stone\u003C\u002Fspan>\n        \u003Cspan>Expires 08\u002F27\u003C\u002Fspan>\n      \u003C\u002Fnord-stack>\n    \u003C\u002Fdiv>\n    \u003Cnord-stack direction=\"horizontal\" justify-content=\"space-between\" align-items=\"center\">\n      \u003Cspan class=\"n:text-weak\">Next charge\u003C\u002Fspan>\n      \u003Cspan class=\"n:font-heading\">$49.00 on 1 Jul 2026\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-button-group slot=\"footer\" variant=\"spaced\">\n    \u003Cnord-button>Remove\u003C\u002Fnord-button>\n    \u003Cnord-button variant=\"primary\">Update card\u003C\u002Fnord-button>\n  \u003C\u002Fnord-button-group>\n\u003C\u002Fnord-card>\n",{"body":2070},{"type":8,"value":2071,"toc":2072},[],{"title":808,"searchDepth":809,"depth":809,"links":2073},[],360,"blocks\u002Fbilling\u002Fpayment-method","YPIe_plWd6G-W7c-A_hLUV_lgUZCQKGscGZAVw9UWtA",{"id":2078,"title":2079,"category":2066,"description":2080,"extension":833,"html":2081,"meta":2082,"order":809,"previewHeight":2060,"previewWidth":2087,"stem":2088,"__hash__":2089},"blocks\u002Fblocks\u002Fbilling\u002Fpricing-table.md","Pricing table","Three pricing tiers with feature lists and a highlighted recommended plan.","\u003Cdiv class=\"n:grid n:grid-cols-3 n:gap-m n:items-start\">\n  \u003Cnord-card>\n    \u003Ch3 slot=\"header\" class=\"n:m-0 n:text-l n:font-heading\">Starter\u003C\u002Fh3>\n    \u003Cnord-stack gap=\"l\" direction=\"vertical\">\n      \u003Cdiv>\u003Cspan class=\"n:text-xxl n:font-heading\">$0\u003C\u002Fspan>\u003Cspan class=\"n:text-weak\">\u002Fmo\u003C\u002Fspan>\u003C\u002Fdiv>\n      \u003Cnord-stack gap=\"s\" direction=\"vertical\">\n        \u003Cnord-stack direction=\"horizontal\" gap=\"s\" align-items=\"center\">\u003Cnord-icon name=\"interface-checked-circle\" class=\"n:text-success\">\u003C\u002Fnord-icon>1 location\u003C\u002Fnord-stack>\n        \u003Cnord-stack direction=\"horizontal\" gap=\"s\" align-items=\"center\">\u003Cnord-icon name=\"interface-checked-circle\" class=\"n:text-success\">\u003C\u002Fnord-icon>Up to 200 patients\u003C\u002Fnord-stack>\n        \u003Cnord-stack direction=\"horizontal\" gap=\"s\" align-items=\"center\">\u003Cnord-icon name=\"interface-checked-circle\" class=\"n:text-success\">\u003C\u002Fnord-icon>Email support\u003C\u002Fnord-stack>\n      \u003C\u002Fnord-stack>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-button slot=\"footer\" expand>Choose Starter\u003C\u002Fnord-button>\n  \u003C\u002Fnord-card>\n  \u003Cnord-card style=\"outline: 2px solid var(--n-color-accent); outline-offset: -2px\">\n    \u003Cnord-stack slot=\"header\" direction=\"horizontal\" justify-content=\"space-between\" align-items=\"center\">\n      \u003Ch3 class=\"n:m-0 n:text-l n:font-heading\">Professional\u003C\u002Fh3>\n      \u003Cnord-badge variant=\"highlight\">Popular\u003C\u002Fnord-badge>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-stack gap=\"l\" direction=\"vertical\">\n      \u003Cdiv>\u003Cspan class=\"n:text-xxl n:font-heading\">$49\u003C\u002Fspan>\u003Cspan class=\"n:text-weak\">\u002Fmo\u003C\u002Fspan>\u003C\u002Fdiv>\n      \u003Cnord-stack gap=\"s\" direction=\"vertical\">\n        \u003Cnord-stack direction=\"horizontal\" gap=\"s\" align-items=\"center\">\u003Cnord-icon name=\"interface-checked-circle\" class=\"n:text-success\">\u003C\u002Fnord-icon>Up to 5 locations\u003C\u002Fnord-stack>\n        \u003Cnord-stack direction=\"horizontal\" gap=\"s\" align-items=\"center\">\u003Cnord-icon name=\"interface-checked-circle\" class=\"n:text-success\">\u003C\u002Fnord-icon>Unlimited patients\u003C\u002Fnord-stack>\n        \u003Cnord-stack direction=\"horizontal\" gap=\"s\" align-items=\"center\">\u003Cnord-icon name=\"interface-checked-circle\" class=\"n:text-success\">\u003C\u002Fnord-icon>Online booking\u003C\u002Fnord-stack>\n        \u003Cnord-stack direction=\"horizontal\" gap=\"s\" align-items=\"center\">\u003Cnord-icon name=\"interface-checked-circle\" class=\"n:text-success\">\u003C\u002Fnord-icon>Priority support\u003C\u002Fnord-stack>\n      \u003C\u002Fnord-stack>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-button slot=\"footer\" variant=\"primary\" expand>Choose Professional\u003C\u002Fnord-button>\n  \u003C\u002Fnord-card>\n  \u003Cnord-card>\n    \u003Ch3 slot=\"header\" class=\"n:m-0 n:text-l n:font-heading\">Enterprise\u003C\u002Fh3>\n    \u003Cnord-stack gap=\"l\" direction=\"vertical\">\n      \u003Cdiv>\u003Cspan class=\"n:text-xxl n:font-heading\">Custom\u003C\u002Fspan>\u003C\u002Fdiv>\n      \u003Cnord-stack gap=\"s\" direction=\"vertical\">\n        \u003Cnord-stack direction=\"horizontal\" gap=\"s\" align-items=\"center\">\u003Cnord-icon name=\"interface-checked-circle\" class=\"n:text-success\">\u003C\u002Fnord-icon>Unlimited locations\u003C\u002Fnord-stack>\n        \u003Cnord-stack direction=\"horizontal\" gap=\"s\" align-items=\"center\">\u003Cnord-icon name=\"interface-checked-circle\" class=\"n:text-success\">\u003C\u002Fnord-icon>SSO & audit logs\u003C\u002Fnord-stack>\n        \u003Cnord-stack direction=\"horizontal\" gap=\"s\" align-items=\"center\">\u003Cnord-icon name=\"interface-checked-circle\" class=\"n:text-success\">\u003C\u002Fnord-icon>Dedicated manager\u003C\u002Fnord-stack>\n      \u003C\u002Fnord-stack>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-button slot=\"footer\" expand>Contact sales\u003C\u002Fnord-button>\n  \u003C\u002Fnord-card>\n\u003C\u002Fdiv>\n",{"body":2083},{"type":8,"value":2084,"toc":2085},[],{"title":808,"searchDepth":809,"depth":809,"links":2086},[],960,"blocks\u002Fbilling\u002Fpricing-table","8KEaCXNQIJIY27XqrMpfqQ8RTwhqRVvsTu8btCfDZW8",{"id":2091,"title":2092,"category":2093,"description":2094,"extension":833,"html":2095,"meta":2096,"order":2101,"previewHeight":2047,"previewWidth":2060,"stem":2102,"__hash__":2103},"blocks\u002Fblocks\u002Fcommunication\u002Fai-assistant.md","AI assistant panel","Communication","An assistant prompt panel with suggested questions and an input.","\u003Cnord-card>\n  \u003Cnord-stack slot=\"header\" direction=\"horizontal\" gap=\"s\" align-items=\"center\">\n    \u003Cnord-icon name=\"interface-star-filled\" class=\"n:text-highlight\">\u003C\u002Fnord-icon>\n    \u003Ch2 class=\"n:m-0 n:text-l n:font-heading\">Ask Provet AI\u003C\u002Fh2>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-stack gap=\"l\" direction=\"vertical\">\n    \u003Cp class=\"n:m-0 n:text-weak\">Ask a question about this patient's history or get help drafting a note.\u003C\u002Fp>\n    \u003Cnord-stack gap=\"s\" direction=\"vertical\">\n      \u003Cnord-button expand>Summarise Bella's recent visits\u003C\u002Fnord-button>\n      \u003Cnord-button expand>Draft a discharge summary\u003C\u002Fnord-button>\n      \u003Cnord-button expand>What vaccinations are due?\u003C\u002Fnord-button>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-input placeholder=\"Ask anything…\" expand>\n      \u003Cnord-icon slot=\"end\" name=\"interface-send\" label=\"Send\">\u003C\u002Fnord-icon>\n    \u003C\u002Fnord-input>\n  \u003C\u002Fnord-stack>\n\u003C\u002Fnord-card>\n",{"body":2097},{"type":8,"value":2098,"toc":2099},[],{"title":808,"searchDepth":809,"depth":809,"links":2100},[],5,"blocks\u002Fcommunication\u002Fai-assistant","k_ExcVshqFPXtphB3nfsfz4S_RbLZYw08OAnbvvZ3vA",{"id":2105,"title":2106,"category":2093,"description":2107,"extension":833,"html":2108,"meta":2109,"order":818,"previewHeight":2114,"previewWidth":2115,"stem":2116,"__hash__":2117},"blocks\u002Fblocks\u002Fcommunication\u002Fchat-composer.md","Message composer","A message input row with attachment and send actions.","\u003Cnord-card>\n  \u003Cnord-stack direction=\"horizontal\" gap=\"s\" align-items=\"end\">\n    \u003Cnord-button square variant=\"plain\" aria-label=\"Add attachment\">\n      \u003Cnord-icon name=\"interface-attachment\">\u003C\u002Fnord-icon>\n    \u003C\u002Fnord-button>\n    \u003Cnord-textarea\n      label=\"Message\"\n      hide-label\n      placeholder=\"Write a message…\"\n      resize=\"auto\"\n      expand\n    >\u003C\u002Fnord-textarea>\n    \u003Cnord-button variant=\"primary\" aria-label=\"Send message\">\n      \u003Cnord-icon slot=\"start\" name=\"interface-send\">\u003C\u002Fnord-icon>\n      Send\n    \u003C\u002Fnord-button>\n  \u003C\u002Fnord-stack>\n\u003C\u002Fnord-card>\n",{"body":2110},{"type":8,"value":2111,"toc":2112},[],{"title":808,"searchDepth":809,"depth":809,"links":2113},[],160,560,"blocks\u002Fcommunication\u002Fchat-composer","32TzWyG_b99hBjt3girwyHSZy_uDspH1OLU5G8PAIng",{"id":2119,"title":2120,"category":2093,"description":2121,"extension":833,"html":2122,"meta":2123,"order":2128,"previewHeight":2129,"previewWidth":2130,"stem":2131,"__hash__":2132},"blocks\u002Fblocks\u002Fcommunication\u002Fchat-empty.md","Chat empty state","A friendly empty state prompting the user to start a conversation.","\u003Cnord-card>\n  \u003Cnord-empty-state>\n    \u003Cnord-icon slot=\"icon\" name=\"interface-chat\" size=\"l\">\u003C\u002Fnord-icon>\n    \u003Ch2>No messages yet\u003C\u002Fh2>\n    \u003Cp>Start a conversation with this client to send appointment reminders and share updates.\u003C\u002Fp>\n    \u003Cnord-button variant=\"primary\">\n      \u003Cnord-icon slot=\"start\" name=\"interface-edit\">\u003C\u002Fnord-icon>\n      New message\n    \u003C\u002Fnord-button>\n  \u003C\u002Fnord-empty-state>\n\u003C\u002Fnord-card>\n",{"body":2124},{"type":8,"value":2125,"toc":2126},[],{"title":808,"searchDepth":809,"depth":809,"links":2127},[],4,320,480,"blocks\u002Fcommunication\u002Fchat-empty","Xdrdh2zflZoQ4ozavsIMlZ53TKfxjEyvp4q8PzbIrhc",{"id":2134,"title":2135,"category":2093,"description":2136,"extension":833,"html":2137,"meta":2138,"order":2032,"previewHeight":2143,"previewWidth":2115,"stem":2144,"__hash__":2145},"blocks\u002Fblocks\u002Fcommunication\u002Fconversation-list.md","Conversation list","An inbox list of client conversations with avatars, previews and unread counts.","\u003Cnord-card padding=\"none\">\n  \u003Cnord-stack slot=\"header\" direction=\"horizontal\" justify-content=\"space-between\" align-items=\"center\">\n    \u003Ch2 class=\"n:m-0 n:text-l n:font-heading\">Messages\u003C\u002Fh2>\n    \u003Cnord-badge variant=\"highlight\">3 new\u003C\u002Fnord-badge>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-stack gap=\"none\" direction=\"vertical\">\n    \u003Cnord-stack direction=\"horizontal\" gap=\"m\" align-items=\"center\" class=\"n:p-m\">\n      \u003Cnord-avatar name=\"Emma Carter\">\u003C\u002Fnord-avatar>\n      \u003Cdiv class=\"n:grow n:min-inline-0\">\n        \u003Cdiv class=\"n:font-heading\">Emma Carter\u003C\u002Fdiv>\n        \u003Cdiv class=\"n:truncate n:text-s n:text-weak\">Is Bella ok to eat before her appointment?\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cnord-stack gap=\"xs\" align-items=\"end\">\n        \u003Cspan class=\"n:text-xs n:text-weaker\">2m\u003C\u002Fspan>\n        \u003Cnord-badge variant=\"highlight\">2\u003C\u002Fnord-badge>\n      \u003C\u002Fnord-stack>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-divider>\u003C\u002Fnord-divider>\n    \u003Cnord-stack direction=\"horizontal\" gap=\"m\" align-items=\"center\" class=\"n:p-m\">\n      \u003Cnord-avatar name=\"James Wright\">\u003C\u002Fnord-avatar>\n      \u003Cdiv class=\"n:grow n:min-inline-0\">\n        \u003Cdiv class=\"n:font-heading\">James Wright\u003C\u002Fdiv>\n        \u003Cdiv class=\"n:truncate n:text-s n:text-weak\">Thanks, see you at 9:30!\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cspan class=\"n:text-xs n:text-weaker\">1h\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-divider>\u003C\u002Fnord-divider>\n    \u003Cnord-stack direction=\"horizontal\" gap=\"m\" align-items=\"center\" class=\"n:p-m\">\n      \u003Cnord-avatar name=\"Sophia Bennett\">\u003C\u002Fnord-avatar>\n      \u003Cdiv class=\"n:grow n:min-inline-0\">\n        \u003Cdiv class=\"n:font-heading\">Sophia Bennett\u003C\u002Fdiv>\n        \u003Cdiv class=\"n:truncate n:text-s n:text-weak\">Could I get a copy of the invoice?\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cspan class=\"n:text-xs n:text-weaker\">3h\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n  \u003C\u002Fnord-stack>\n\u003C\u002Fnord-card>\n",{"body":2139},{"type":8,"value":2140,"toc":2141},[],{"title":808,"searchDepth":809,"depth":809,"links":2142},[],420,"blocks\u002Fcommunication\u002Fconversation-list","dTIrjDY6Gh_LCuU4tRndSTDystBz5yvEeKMUXq1mRqQ",{"id":2147,"title":2148,"category":2093,"description":2149,"extension":833,"html":2150,"meta":2151,"order":809,"previewHeight":2143,"previewWidth":2115,"stem":2156,"__hash__":2157},"blocks\u002Fblocks\u002Fcommunication\u002Fmessage-thread.md","Message thread","A chat conversation with incoming and outgoing message bubbles.","\u003Cnord-card>\n  \u003Cnord-stack slot=\"header\" direction=\"horizontal\" gap=\"s\" align-items=\"center\">\n    \u003Cnord-avatar name=\"Emma Carter\" size=\"s\">\u003C\u002Fnord-avatar>\n    \u003Ch2 class=\"n:m-0 n:text-l n:font-heading\">Emma Carter\u003C\u002Fh2>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-stack gap=\"m\" direction=\"vertical\">\n    \u003Cdiv class=\"n:flex n:justify-start\">\n      \u003Cdiv class=\"n:max-inline-[80%] n:rounded-default n:p-m\" style=\"background: var(--n-color-surface-raised)\">\n        Hi! Is Bella ok to eat before her appointment tomorrow?\n        \u003Cdiv class=\"n:mbs-xs n:text-xs n:text-weaker\">09:02\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"n:flex n:justify-end\">\n      \u003Cdiv class=\"n:max-inline-[80%] n:rounded-default n:p-m\" style=\"background: var(--n-color-accent); color: var(--n-color-text-on-accent)\">\n        Morning! Please withhold food after midnight, water is fine.\n        \u003Cdiv class=\"n:mbs-xs n:text-xs\" style=\"color: var(--n-color-text-on-accent); opacity: 0.8\">09:05\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"n:flex n:justify-start\">\n      \u003Cdiv class=\"n:max-inline-[80%] n:rounded-default n:p-m\" style=\"background: var(--n-color-surface-raised)\">\n        Perfect, thank you!\n        \u003Cdiv class=\"n:mbs-xs n:text-xs n:text-weaker\">09:06\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fnord-stack>\n\u003C\u002Fnord-card>\n",{"body":2152},{"type":8,"value":2153,"toc":2154},[],{"title":808,"searchDepth":809,"depth":809,"links":2155},[],"blocks\u002Fcommunication\u002Fmessage-thread","RffJLKJs5sJGm9bvfDqdWds_scN_db_02nRs9wveY2Y",{"id":2159,"title":2160,"category":2161,"description":2162,"extension":833,"html":2163,"meta":2164,"order":2032,"previewHeight":2074,"previewWidth":2115,"stem":2169,"__hash__":2170},"blocks\u002Fblocks\u002Fconsultation\u002Fconsultation-overview.md","Consultation overview","Consultation","A summary card of the consultation's type, staff, location and timing.","\u003Cnord-card>\n  \u003Cnord-stack slot=\"header\" direction=\"horizontal\" justify-content=\"space-between\" align-items=\"center\">\n    \u003Ch2 class=\"n:m-0 n:text-l n:font-heading\">Consultation details\u003C\u002Fh2>\n    \u003Cnord-button size=\"s\" variant=\"default\">\n      \u003Cnord-icon slot=\"start\" name=\"interface-edit\">\u003C\u002Fnord-icon>\n      Edit\n    \u003C\u002Fnord-button>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-stack gap=\"m\" direction=\"vertical\">\n    \u003Cnord-stack direction=\"horizontal\" justify-content=\"space-between\" gap=\"m\">\n      \u003Cspan class=\"n:text-weak\">Type\u003C\u002Fspan>\n      \u003Cspan class=\"n:font-heading\">Wellness exam\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-divider>\u003C\u002Fnord-divider>\n    \u003Cnord-stack direction=\"horizontal\" justify-content=\"space-between\" gap=\"m\">\n      \u003Cspan class=\"n:text-weak\">Veterinarian\u003C\u002Fspan>\n      \u003Cspan class=\"n:font-heading\">Dr. Amelia Stone\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-divider>\u003C\u002Fnord-divider>\n    \u003Cnord-stack direction=\"horizontal\" justify-content=\"space-between\" gap=\"m\">\n      \u003Cspan class=\"n:text-weak\">Location\u003C\u002Fspan>\n      \u003Cspan class=\"n:font-heading\">Consultation room 2\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-divider>\u003C\u002Fnord-divider>\n    \u003Cnord-stack direction=\"horizontal\" justify-content=\"space-between\" gap=\"m\">\n      \u003Cspan class=\"n:text-weak\">Started\u003C\u002Fspan>\n      \u003Cspan class=\"n:font-heading\">Today, 09:02\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n  \u003C\u002Fnord-stack>\n\u003C\u002Fnord-card>\n",{"body":2165},{"type":8,"value":2166,"toc":2167},[],{"title":808,"searchDepth":809,"depth":809,"links":2168},[],"blocks\u002Fconsultation\u002Fconsultation-overview","iCc4_g-ZrgklIGCZQu8tsKemAf0JciZoNvfoO9enIQ0",{"id":2172,"title":2173,"category":2161,"description":2174,"extension":833,"html":2175,"meta":2176,"order":2101,"previewHeight":2047,"previewWidth":2181,"stem":2182,"__hash__":2183},"blocks\u002Fblocks\u002Fconsultation\u002Fdiagnoses-list.md","Diagnoses list","A list of recorded diagnoses with status and coding tags.","\u003Cnord-card padding=\"none\">\n  \u003Cnord-stack slot=\"header\" direction=\"horizontal\" justify-content=\"space-between\" align-items=\"center\">\n    \u003Ch2 class=\"n:m-0 n:text-l n:font-heading\">Diagnoses\u003C\u002Fh2>\n    \u003Cnord-button size=\"s\" variant=\"default\">\n      \u003Cnord-icon slot=\"start\" name=\"interface-add\">\u003C\u002Fnord-icon>\n      Add diagnosis\n    \u003C\u002Fnord-button>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-stack gap=\"none\" direction=\"vertical\">\n    \u003Cnord-stack direction=\"horizontal\" align-items=\"center\" gap=\"m\" class=\"n:p-m\">\n      \u003Cdiv class=\"n:grow\">\n        \u003Cdiv class=\"n:font-heading\">Gastroenteritis\u003C\u002Fdiv>\n        \u003Cdiv class=\"n:text-s n:text-weak\">VeNom 332 · added today\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cnord-badge variant=\"warning\">Tentative\u003C\u002Fnord-badge>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-divider>\u003C\u002Fnord-divider>\n    \u003Cnord-stack direction=\"horizontal\" align-items=\"center\" gap=\"m\" class=\"n:p-m\">\n      \u003Cdiv class=\"n:grow\">\n        \u003Cdiv class=\"n:font-heading\">Dental tartar\u003C\u002Fdiv>\n        \u003Cdiv class=\"n:text-s n:text-weak\">VeNom 145 · added today\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cnord-badge variant=\"success\">Confirmed\u003C\u002Fnord-badge>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-divider>\u003C\u002Fnord-divider>\n    \u003Cnord-stack direction=\"horizontal\" align-items=\"center\" gap=\"m\" class=\"n:p-m\">\n      \u003Cdiv class=\"n:grow\">\n        \u003Cdiv class=\"n:font-heading\">Obesity\u003C\u002Fdiv>\n        \u003Cdiv class=\"n:text-s n:text-weak\">VeNom 521 · resolved\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cnord-badge variant=\"neutral\">Resolved\u003C\u002Fnord-badge>\n    \u003C\u002Fnord-stack>\n  \u003C\u002Fnord-stack>\n\u003C\u002Fnord-card>\n",{"body":2177},{"type":8,"value":2178,"toc":2179},[],{"title":808,"searchDepth":809,"depth":809,"links":2180},[],640,"blocks\u002Fconsultation\u002Fdiagnoses-list","VwtKIU5SNJoaTiQ2rMB18dXVNa-qWJICkCjjh9NHMs0",{"id":2185,"title":2186,"category":2161,"description":2187,"extension":833,"html":2188,"meta":2189,"order":809,"previewHeight":2060,"previewWidth":2181,"stem":2194,"__hash__":2195},"blocks\u002Fblocks\u002Fconsultation\u002Fsoap-note.md","SOAP note","A structured clinical note with subjective, objective, assessment and plan fields.","\u003Cnord-card>\n  \u003Cnord-stack slot=\"header\" direction=\"horizontal\" justify-content=\"space-between\" align-items=\"center\">\n    \u003Ch2 class=\"n:m-0 n:text-l n:font-heading\">Clinical note\u003C\u002Fh2>\n    \u003Cnord-badge variant=\"info\">Draft\u003C\u002Fnord-badge>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-stack gap=\"l\" direction=\"vertical\">\n    \u003Cnord-textarea\n      label=\"Subjective\"\n      rows=\"2\"\n      value=\"Owner reports reduced appetite and lethargy over the past two days.\"\n    >\u003C\u002Fnord-textarea>\n    \u003Cnord-textarea\n      label=\"Objective\"\n      rows=\"2\"\n      value=\"T 38.9°C, HR 92 bpm, BCS 5\u002F9. Mild dental tartar. Abdomen soft, non-painful.\"\n    >\u003C\u002Fnord-textarea>\n    \u003Cnord-textarea\n      label=\"Assessment\"\n      rows=\"2\"\n      value=\"Suspected mild gastroenteritis. No signs of systemic illness.\"\n    >\u003C\u002Fnord-textarea>\n    \u003Cnord-textarea\n      label=\"Plan\"\n      rows=\"2\"\n      value=\"Bland diet 5 days, probiotics, recheck if no improvement in 48h.\"\n    >\u003C\u002Fnord-textarea>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-button-group slot=\"footer\" variant=\"spaced\">\n    \u003Cnord-button>Save draft\u003C\u002Fnord-button>\n    \u003Cnord-button variant=\"primary\">Sign note\u003C\u002Fnord-button>\n  \u003C\u002Fnord-button-group>\n\u003C\u002Fnord-card>\n",{"body":2190},{"type":8,"value":2191,"toc":2192},[],{"title":808,"searchDepth":809,"depth":809,"links":2193},[],"blocks\u002Fconsultation\u002Fsoap-note","rIFpuQF58De80IOwDYZcNhzED2wTMqxoWd7SgCPhLW0",{"id":2197,"title":2198,"category":2161,"description":2199,"extension":833,"html":2200,"meta":2201,"order":2128,"previewHeight":2143,"previewWidth":2181,"stem":2206,"__hash__":2207},"blocks\u002Fblocks\u002Fconsultation\u002Ftreatment-items.md","Treatment items","A list of planned treatment items with prices and a running total.","\u003Cnord-card padding=\"none\" footer-divider>\n  \u003Cnord-stack slot=\"header\" direction=\"horizontal\" justify-content=\"space-between\" align-items=\"center\">\n    \u003Ch2 class=\"n:m-0 n:text-l n:font-heading\">Treatment items\u003C\u002Fh2>\n    \u003Cnord-button size=\"s\" variant=\"default\">\n      \u003Cnord-icon slot=\"start\" name=\"interface-add\">\u003C\u002Fnord-icon>\n      Add item\n    \u003C\u002Fnord-button>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-stack gap=\"none\" direction=\"vertical\">\n    \u003Cnord-stack direction=\"horizontal\" align-items=\"center\" gap=\"m\" class=\"n:p-m\">\n      \u003Cnord-icon name=\"medical-syringe\" class=\"n:text-weaker\">\u003C\u002Fnord-icon>\n      \u003Cdiv class=\"n:grow\">\n        \u003Cdiv class=\"n:font-heading\">Rabies vaccination\u003C\u002Fdiv>\n        \u003Cdiv class=\"n:text-s n:text-weak\">1 × $35.00\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cspan class=\"n:font-heading\">$35.00\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-divider>\u003C\u002Fnord-divider>\n    \u003Cnord-stack direction=\"horizontal\" align-items=\"center\" gap=\"m\" class=\"n:p-m\">\n      \u003Cnord-icon name=\"medical-pill\" class=\"n:text-weaker\">\u003C\u002Fnord-icon>\n      \u003Cdiv class=\"n:grow\">\n        \u003Cdiv class=\"n:font-heading\">Anti-parasitic tablets\u003C\u002Fdiv>\n        \u003Cdiv class=\"n:text-s n:text-weak\">2 × $12.50\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cspan class=\"n:font-heading\">$25.00\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-divider>\u003C\u002Fnord-divider>\n    \u003Cnord-stack direction=\"horizontal\" align-items=\"center\" gap=\"m\" class=\"n:p-m\">\n      \u003Cnord-icon name=\"medical-instrument-stethoscope\" class=\"n:text-weaker\">\u003C\u002Fnord-icon>\n      \u003Cdiv class=\"n:grow\">\n        \u003Cdiv class=\"n:font-heading\">Consultation fee\u003C\u002Fdiv>\n        \u003Cdiv class=\"n:text-s n:text-weak\">1 × $55.00\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cspan class=\"n:font-heading\">$55.00\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-stack slot=\"footer\" direction=\"horizontal\" justify-content=\"space-between\" align-items=\"center\">\n    \u003Cspan class=\"n:text-weak\">Total\u003C\u002Fspan>\n    \u003Cspan class=\"n:text-l n:font-heading\">$115.00\u003C\u002Fspan>\n  \u003C\u002Fnord-stack>\n\u003C\u002Fnord-card>\n",{"body":2202},{"type":8,"value":2203,"toc":2204},[],{"title":808,"searchDepth":809,"depth":809,"links":2205},[],"blocks\u002Fconsultation\u002Ftreatment-items","i9prVH39WGvs3wBXkxLiMxejq0nBQFmpC_PoiGXOhvE",{"id":2209,"title":2210,"category":2161,"description":2211,"extension":833,"html":2212,"meta":2213,"order":818,"previewHeight":2218,"previewWidth":2219,"stem":2220,"__hash__":2221},"blocks\u002Fblocks\u002Fconsultation\u002Fvitals-summary.md","Vitals summary","A grid of the patient's latest measurements with clinical icons.","\u003Cnord-card>\n  \u003Ch2 slot=\"header\" class=\"n:m-0 n:text-l n:font-heading\">Latest vitals\u003C\u002Fh2>\n  \u003Cdiv class=\"n:grid n:grid-cols-4 n:gap-m\">\n    \u003Cnord-stack gap=\"xs\" align-items=\"center\">\n      \u003Cnord-icon name=\"medical-temperature\" size=\"l\" class=\"n:text-weaker\">\u003C\u002Fnord-icon>\n      \u003Cspan class=\"n:text-xl n:font-heading\">38.9°C\u003C\u002Fspan>\n      \u003Cspan class=\"n:text-s n:text-weak\">Temperature\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-stack gap=\"xs\" align-items=\"center\">\n      \u003Cnord-icon name=\"medical-heart-rate\" size=\"l\" class=\"n:text-weaker\">\u003C\u002Fnord-icon>\n      \u003Cspan class=\"n:text-xl n:font-heading\">92 bpm\u003C\u002Fspan>\n      \u003Cspan class=\"n:text-s n:text-weak\">Heart rate\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-stack gap=\"xs\" align-items=\"center\">\n      \u003Cnord-icon name=\"generic-pet-paw\" size=\"l\" class=\"n:text-weaker\">\u003C\u002Fnord-icon>\n      \u003Cspan class=\"n:text-xl n:font-heading\">24 kg\u003C\u002Fspan>\n      \u003Cspan class=\"n:text-s n:text-weak\">Weight\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-stack gap=\"xs\" align-items=\"center\">\n      \u003Cnord-icon name=\"medical-blood\" size=\"l\" class=\"n:text-weaker\">\u003C\u002Fnord-icon>\n      \u003Cspan class=\"n:text-xl n:font-heading\">5\u002F9\u003C\u002Fspan>\n      \u003Cspan class=\"n:text-s n:text-weak\">Body condition\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n  \u003C\u002Fdiv>\n\u003C\u002Fnord-card>\n",{"body":2214},{"type":8,"value":2215,"toc":2216},[],{"title":808,"searchDepth":809,"depth":809,"links":2217},[],240,720,"blocks\u002Fconsultation\u002Fvitals-summary","5DfYAFGqsBguQ1LuABi6u6dLlVkjyOemORfAAyuGGgE",{"id":2223,"title":2224,"category":2225,"description":2226,"extension":833,"html":2227,"meta":2228,"order":2128,"previewHeight":2143,"previewWidth":2181,"stem":2233,"__hash__":2234},"blocks\u002Fblocks\u002Fdashboard\u002Factivity-feed.md","Activity feed","Dashboard","A recent-activity timeline with avatars and relative timestamps.","\u003Cnord-card>\n  \u003Ch2 slot=\"header\" class=\"n:m-0 n:text-l n:font-heading\">Recent activity\u003C\u002Fh2>\n  \u003Cnord-stack gap=\"l\" direction=\"vertical\">\n    \u003Cnord-stack direction=\"horizontal\" gap=\"m\" align-items=\"start\">\n      \u003Cnord-avatar name=\"Dr. Amelia Stone\" size=\"s\">\u003C\u002Fnord-avatar>\n      \u003Cdiv class=\"n:grow\">\n        \u003Cdiv>\u003Cstrong>Dr. Amelia Stone\u003C\u002Fstrong> completed a consultation for \u003Cstrong>Bella\u003C\u002Fstrong>\u003C\u002Fdiv>\n        \u003Cdiv class=\"n:text-s n:text-weaker\">10 minutes ago\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-stack direction=\"horizontal\" gap=\"m\" align-items=\"start\">\n      \u003Cnord-avatar name=\"Liam Foster\" size=\"s\">\u003C\u002Fnord-avatar>\n      \u003Cdiv class=\"n:grow\">\n        \u003Cdiv>\u003Cstrong>Liam Foster\u003C\u002Fstrong> checked in \u003Cstrong>Milo\u003C\u002Fstrong> for a dental check\u003C\u002Fdiv>\n        \u003Cdiv class=\"n:text-s n:text-weaker\">32 minutes ago\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-stack direction=\"horizontal\" gap=\"m\" align-items=\"start\">\n      \u003Cnord-avatar name=\"System\" size=\"s\" variant=\"square\">\u003C\u002Fnord-avatar>\n      \u003Cdiv class=\"n:grow\">\n        \u003Cdiv>Invoice \u003Cstrong>#1043\u003C\u002Fstrong> was paid by Sophia Bennett\u003C\u002Fdiv>\n        \u003Cdiv class=\"n:text-s n:text-weaker\">1 hour ago\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-stack direction=\"horizontal\" gap=\"m\" align-items=\"start\">\n      \u003Cnord-avatar name=\"Dr. Noah Reed\" size=\"s\">\u003C\u002Fnord-avatar>\n      \u003Cdiv class=\"n:grow\">\n        \u003Cdiv>\u003Cstrong>Dr. Noah Reed\u003C\u002Fstrong> added lab results for \u003Cstrong>Rex\u003C\u002Fstrong>\u003C\u002Fdiv>\n        \u003Cdiv class=\"n:text-s n:text-weaker\">2 hours ago\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fnord-stack>\n  \u003C\u002Fnord-stack>\n\u003C\u002Fnord-card>\n",{"body":2229},{"type":8,"value":2230,"toc":2231},[],{"title":808,"searchDepth":809,"depth":809,"links":2232},[],"blocks\u002Fdashboard\u002Factivity-feed","Aa_tXrA8OhJMlhke7XU7f7rXsurOlf7Wtx27iA1Egdw",{"id":2236,"title":2237,"category":2225,"description":2238,"extension":833,"html":2239,"meta":2240,"order":2101,"previewHeight":2074,"previewWidth":2219,"stem":2245,"__hash__":2246},"blocks\u002Fblocks\u002Fdashboard\u002Fresource-overview.md","Staff & resource overview","Who is on shift and how booked the day's rooms and clinicians are.","\u003Cnord-card>\n  \u003Cnord-stack slot=\"header\" direction=\"horizontal\" justify-content=\"space-between\" align-items=\"center\">\n    \u003Ch2 class=\"n:m-0 n:text-l n:font-heading\">On shift today\u003C\u002Fh2>\n    \u003Cspan class=\"n:text-s n:text-weak\">5 of 6 rooms in use\u003C\u002Fspan>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-stack gap=\"l\" direction=\"vertical\">\n    \u003Cdiv>\n      \u003Cnord-stack direction=\"horizontal\" justify-content=\"space-between\" class=\"n:mbe-xs\">\n        \u003Cspan class=\"n:font-heading\">Dr. Amelia Stone\u003C\u002Fspan>\n        \u003Cspan class=\"n:text-s n:text-weak\">8 \u002F 10 slots\u003C\u002Fspan>\n      \u003C\u002Fnord-stack>\n      \u003Cnord-progress-bar value=\"80\" label=\"Dr. Amelia Stone capacity\">\u003C\u002Fnord-progress-bar>\n    \u003C\u002Fdiv>\n    \u003Cdiv>\n      \u003Cnord-stack direction=\"horizontal\" justify-content=\"space-between\" class=\"n:mbe-xs\">\n        \u003Cspan class=\"n:font-heading\">Dr. Noah Reed\u003C\u002Fspan>\n        \u003Cspan class=\"n:text-s n:text-weak\">6 \u002F 10 slots\u003C\u002Fspan>\n      \u003C\u002Fnord-stack>\n      \u003Cnord-progress-bar value=\"60\" label=\"Dr. Noah Reed capacity\">\u003C\u002Fnord-progress-bar>\n    \u003C\u002Fdiv>\n    \u003Cdiv>\n      \u003Cnord-stack direction=\"horizontal\" justify-content=\"space-between\" class=\"n:mbe-xs\">\n        \u003Cspan class=\"n:font-heading\">Surgery room\u003C\u002Fspan>\n        \u003Cspan class=\"n:text-s n:text-weak\">Booked until 14:00\u003C\u002Fspan>\n      \u003C\u002Fnord-stack>\n      \u003Cnord-progress-bar value=\"95\" label=\"Surgery room capacity\">\u003C\u002Fnord-progress-bar>\n    \u003C\u002Fdiv>\n  \u003C\u002Fnord-stack>\n\u003C\u002Fnord-card>\n",{"body":2241},{"type":8,"value":2242,"toc":2243},[],{"title":808,"searchDepth":809,"depth":809,"links":2244},[],"blocks\u002Fdashboard\u002Fresource-overview","fkLt0BgTjbWBa34Rw6foByA4gZs3TF14f3syDX2gtqg",{"id":2248,"title":2249,"category":2225,"description":2250,"extension":833,"html":2251,"meta":2252,"order":2257,"previewHeight":2074,"previewWidth":2060,"stem":2258,"__hash__":2259},"blocks\u002Fblocks\u002Fdashboard\u002Fstaff-list.md","Staff list","A list of clinic staff with avatars, contact details and a quick action.","\u003Cnord-item-group>\n  \u003Cnord-item variant=\"outline\">\n    \u003Cnord-item-media>\n      \u003Cnord-avatar name=\"Amelia Stone\">\u003C\u002Fnord-avatar>\n    \u003C\u002Fnord-item-media>\n    \u003Cnord-item-content>\n      \u003Cnord-item-title>Dr. Amelia Stone\u003C\u002Fnord-item-title>\n      \u003Cnord-item-description>Lead veterinarian\u003C\u002Fnord-item-description>\n    \u003C\u002Fnord-item-content>\n    \u003Cnord-item-actions>\n      \u003Cnord-button variant=\"plain\" size=\"s\" square aria-label=\"Message Amelia Stone\">\n        \u003Cnord-icon name=\"interface-chat\">\u003C\u002Fnord-icon>\n      \u003C\u002Fnord-button>\n    \u003C\u002Fnord-item-actions>\n  \u003C\u002Fnord-item>\n  \u003Cnord-item variant=\"outline\">\n    \u003Cnord-item-media>\n      \u003Cnord-avatar name=\"Noah Reed\">\u003C\u002Fnord-avatar>\n    \u003C\u002Fnord-item-media>\n    \u003Cnord-item-content>\n      \u003Cnord-item-title>Dr. Noah Reed\u003C\u002Fnord-item-title>\n      \u003Cnord-item-description>Veterinary surgeon\u003C\u002Fnord-item-description>\n    \u003C\u002Fnord-item-content>\n    \u003Cnord-item-actions>\n      \u003Cnord-button variant=\"plain\" size=\"s\" square aria-label=\"Message Noah Reed\">\n        \u003Cnord-icon name=\"interface-chat\">\u003C\u002Fnord-icon>\n      \u003C\u002Fnord-button>\n    \u003C\u002Fnord-item-actions>\n  \u003C\u002Fnord-item>\n  \u003Cnord-item variant=\"outline\">\n    \u003Cnord-item-media>\n      \u003Cnord-avatar name=\"Liam Foster\">\u003C\u002Fnord-avatar>\n    \u003C\u002Fnord-item-media>\n    \u003Cnord-item-content>\n      \u003Cnord-item-title>Liam Foster\u003C\u002Fnord-item-title>\n      \u003Cnord-item-description>Veterinary nurse\u003C\u002Fnord-item-description>\n    \u003C\u002Fnord-item-content>\n    \u003Cnord-item-actions>\n      \u003Cnord-button variant=\"plain\" size=\"s\" square aria-label=\"Message Liam Foster\">\n        \u003Cnord-icon name=\"interface-chat\">\u003C\u002Fnord-icon>\n      \u003C\u002Fnord-button>\n    \u003C\u002Fnord-item-actions>\n  \u003C\u002Fnord-item>\n\u003C\u002Fnord-item-group>\n",{"body":2253},{"type":8,"value":2254,"toc":2255},[],{"title":808,"searchDepth":809,"depth":809,"links":2256},[],6,"blocks\u002Fdashboard\u002Fstaff-list","PECII9SpwYOx9zPCnsDEDNQ_40b57KK0aSXvBVYtnno",{"id":2261,"title":2262,"category":2225,"description":2263,"extension":833,"html":2264,"meta":2265,"order":2032,"previewHeight":2270,"previewWidth":2087,"stem":2271,"__hash__":2272},"blocks\u002Fblocks\u002Fdashboard\u002Fstat-cards.md","KPI stat cards","A row of headline metrics with trend indicators for a clinic dashboard.","\u003Cdiv class=\"n:grid n:grid-cols-4 n:gap-m\">\n  \u003Cnord-card>\n    \u003Cnord-stack gap=\"s\">\n      \u003Cnord-stack direction=\"horizontal\" justify-content=\"space-between\" align-items=\"center\">\n        \u003Cspan class=\"n:text-s n:text-weak\">Appointments today\u003C\u002Fspan>\n        \u003Cnord-icon name=\"interface-calendar\" class=\"n:text-weaker\">\u003C\u002Fnord-icon>\n      \u003C\u002Fnord-stack>\n      \u003Cspan class=\"n:text-xxl n:font-heading\">24\u003C\u002Fspan>\n      \u003Cnord-badge variant=\"success\">\u003Cnord-icon slot=\"icon\" name=\"graph-trend-up\">\u003C\u002Fnord-icon>+12%\u003C\u002Fnord-badge>\n    \u003C\u002Fnord-stack>\n  \u003C\u002Fnord-card>\n  \u003Cnord-card>\n    \u003Cnord-stack gap=\"s\">\n      \u003Cnord-stack direction=\"horizontal\" justify-content=\"space-between\" align-items=\"center\">\n        \u003Cspan class=\"n:text-s n:text-weak\">Patients seen\u003C\u002Fspan>\n        \u003Cnord-icon name=\"generic-pet-paw\" class=\"n:text-weaker\">\u003C\u002Fnord-icon>\n      \u003C\u002Fnord-stack>\n      \u003Cspan class=\"n:text-xxl n:font-heading\">18\u003C\u002Fspan>\n      \u003Cnord-badge variant=\"success\">\u003Cnord-icon slot=\"icon\" name=\"graph-trend-up\">\u003C\u002Fnord-icon>+5%\u003C\u002Fnord-badge>\n    \u003C\u002Fnord-stack>\n  \u003C\u002Fnord-card>\n  \u003Cnord-card>\n    \u003Cnord-stack gap=\"s\">\n      \u003Cnord-stack direction=\"horizontal\" justify-content=\"space-between\" align-items=\"center\">\n        \u003Cspan class=\"n:text-s n:text-weak\">Revenue\u003C\u002Fspan>\n        \u003Cnord-icon name=\"graph-bars\" class=\"n:text-weaker\">\u003C\u002Fnord-icon>\n      \u003C\u002Fnord-stack>\n      \u003Cspan class=\"n:text-xxl n:font-heading\">$4,820\u003C\u002Fspan>\n      \u003Cnord-badge variant=\"success\">\u003Cnord-icon slot=\"icon\" name=\"graph-trend-up\">\u003C\u002Fnord-icon>+8%\u003C\u002Fnord-badge>\n    \u003C\u002Fnord-stack>\n  \u003C\u002Fnord-card>\n  \u003Cnord-card>\n    \u003Cnord-stack gap=\"s\">\n      \u003Cnord-stack direction=\"horizontal\" justify-content=\"space-between\" align-items=\"center\">\n        \u003Cspan class=\"n:text-s n:text-weak\">Outstanding\u003C\u002Fspan>\n        \u003Cnord-icon name=\"file-invoice\" class=\"n:text-weaker\">\u003C\u002Fnord-icon>\n      \u003C\u002Fnord-stack>\n      \u003Cspan class=\"n:text-xxl n:font-heading\">$960\u003C\u002Fspan>\n      \u003Cnord-badge variant=\"warning\">\u003Cnord-icon slot=\"icon\" name=\"graph-trend-down\">\u003C\u002Fnord-icon>3 invoices\u003C\u002Fnord-badge>\n    \u003C\u002Fnord-stack>\n  \u003C\u002Fnord-card>\n\u003C\u002Fdiv>\n",{"body":2266},{"type":8,"value":2267,"toc":2268},[],{"title":808,"searchDepth":809,"depth":809,"links":2269},[],220,"blocks\u002Fdashboard\u002Fstat-cards","FQ0GFwT0FWPi_WCxYjvrJeAmB12Oucx_H0-eu5os6e8",{"id":2274,"title":2275,"category":2225,"description":2276,"extension":833,"html":2277,"meta":2278,"order":818,"previewHeight":2143,"previewWidth":2181,"stem":2283,"__hash__":2284},"blocks\u002Fblocks\u002Fdashboard\u002Ftask-list.md","Task list","A checklist card for outstanding clinic tasks with due dates.","\u003Cnord-card padding=\"none\" footer-divider>\n  \u003Cnord-stack slot=\"header\" direction=\"horizontal\" justify-content=\"space-between\" align-items=\"center\">\n    \u003Ch2 class=\"n:m-0 n:text-l n:font-heading\">Tasks\u003C\u002Fh2>\n    \u003Cnord-badge variant=\"warning\">4 due\u003C\u002Fnord-badge>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-stack gap=\"none\" direction=\"vertical\">\n    \u003Cnord-stack direction=\"horizontal\" align-items=\"center\" gap=\"m\" class=\"n:p-m\">\n      \u003Cnord-checkbox label=\"Call Mr. Wright about Milo's results\" hide-label>\u003C\u002Fnord-checkbox>\n      \u003Cdiv class=\"n:grow\">Call Mr. Wright about Milo's results\u003C\u002Fdiv>\n      \u003Cspan class=\"n:text-s n:text-danger\">Today\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-divider>\u003C\u002Fnord-divider>\n    \u003Cnord-stack direction=\"horizontal\" align-items=\"center\" gap=\"m\" class=\"n:p-m\">\n      \u003Cnord-checkbox label=\"Order vaccine stock\" hide-label>\u003C\u002Fnord-checkbox>\n      \u003Cdiv class=\"n:grow\">Order vaccine stock\u003C\u002Fdiv>\n      \u003Cspan class=\"n:text-s n:text-weak\">Tomorrow\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-divider>\u003C\u002Fnord-divider>\n    \u003Cnord-stack direction=\"horizontal\" align-items=\"center\" gap=\"m\" class=\"n:p-m\">\n      \u003Cnord-checkbox label=\"Review lab results for Bella\" hide-label checked>\u003C\u002Fnord-checkbox>\n      \u003Cdiv class=\"n:grow n:text-weaker n:line-through\">Review lab results for Bella\u003C\u002Fdiv>\n      \u003Cspan class=\"n:text-s n:text-weak\">Done\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-divider>\u003C\u002Fnord-divider>\n    \u003Cnord-stack direction=\"horizontal\" align-items=\"center\" gap=\"m\" class=\"n:p-m\">\n      \u003Cnord-checkbox label=\"Confirm afternoon appointments\" hide-label>\u003C\u002Fnord-checkbox>\n      \u003Cdiv class=\"n:grow\">Confirm afternoon appointments\u003C\u002Fdiv>\n      \u003Cspan class=\"n:text-s n:text-weak\">Fri\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-button slot=\"footer\" variant=\"plain\" expand>\n    \u003Cnord-icon slot=\"start\" name=\"interface-add\">\u003C\u002Fnord-icon>\n    Add task\n  \u003C\u002Fnord-button>\n\u003C\u002Fnord-card>\n",{"body":2279},{"type":8,"value":2280,"toc":2281},[],{"title":808,"searchDepth":809,"depth":809,"links":2282},[],"blocks\u002Fdashboard\u002Ftask-list","zSvk8veUZC8oLhykrDpYgip_Zu2NW5yt43vRSZU7lXE",{"id":2286,"title":2287,"category":2225,"description":2288,"extension":833,"html":2289,"meta":2290,"order":809,"previewHeight":2033,"previewWidth":2219,"stem":2295,"__hash__":2296},"blocks\u002Fblocks\u002Fdashboard\u002Ftodays-schedule.md","Today's schedule","A compact list of the day's upcoming appointments with patient and status.","\u003Cnord-card padding=\"none\">\n  \u003Cnord-stack slot=\"header\" direction=\"horizontal\" justify-content=\"space-between\" align-items=\"center\">\n    \u003Ch2 class=\"n:m-0 n:text-l n:font-heading\">Today's schedule\u003C\u002Fh2>\n    \u003Cnord-button size=\"s\" variant=\"plain\">View all\u003C\u002Fnord-button>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-stack gap=\"none\" direction=\"vertical\">\n    \u003Cnord-stack direction=\"horizontal\" align-items=\"center\" gap=\"m\" class=\"n:p-m\">\n      \u003Cspan class=\"n:text-s n:text-weak n:font-heading\">09:00\u003C\u002Fspan>\n      \u003Cnord-icon name=\"generic-canine\" size=\"l\" class=\"n:text-weaker\">\u003C\u002Fnord-icon>\n      \u003Cdiv class=\"n:grow\">\n        \u003Cdiv class=\"n:font-heading\">Bella · Vaccination\u003C\u002Fdiv>\n        \u003Cdiv class=\"n:text-s n:text-weak\">Emma Carter\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cnord-badge variant=\"success\">Checked in\u003C\u002Fnord-badge>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-divider>\u003C\u002Fnord-divider>\n    \u003Cnord-stack direction=\"horizontal\" align-items=\"center\" gap=\"m\" class=\"n:p-m\">\n      \u003Cspan class=\"n:text-s n:text-weak n:font-heading\">09:30\u003C\u002Fspan>\n      \u003Cnord-icon name=\"generic-feline\" size=\"l\" class=\"n:text-weaker\">\u003C\u002Fnord-icon>\n      \u003Cdiv class=\"n:grow\">\n        \u003Cdiv class=\"n:font-heading\">Milo · Dental check\u003C\u002Fdiv>\n        \u003Cdiv class=\"n:text-s n:text-weak\">James Wright\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cnord-badge variant=\"info\">Scheduled\u003C\u002Fnord-badge>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-divider>\u003C\u002Fnord-divider>\n    \u003Cnord-stack direction=\"horizontal\" align-items=\"center\" gap=\"m\" class=\"n:p-m\">\n      \u003Cspan class=\"n:text-s n:text-weak n:font-heading\">10:15\u003C\u002Fspan>\n      \u003Cnord-icon name=\"generic-leporidae\" size=\"l\" class=\"n:text-weaker\">\u003C\u002Fnord-icon>\n      \u003Cdiv class=\"n:grow\">\n        \u003Cdiv class=\"n:font-heading\">Coco · Follow-up\u003C\u002Fdiv>\n        \u003Cdiv class=\"n:text-s n:text-weak\">Sophia Bennett\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cnord-badge variant=\"warning\">Waiting\u003C\u002Fnord-badge>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-divider>\u003C\u002Fnord-divider>\n    \u003Cnord-stack direction=\"horizontal\" align-items=\"center\" gap=\"m\" class=\"n:p-m\">\n      \u003Cspan class=\"n:text-s n:text-weak n:font-heading\">11:00\u003C\u002Fspan>\n      \u003Cnord-icon name=\"generic-canine\" size=\"l\" class=\"n:text-weaker\">\u003C\u002Fnord-icon>\n      \u003Cdiv class=\"n:grow\">\n        \u003Cdiv class=\"n:font-heading\">Rex · Surgery consult\u003C\u002Fdiv>\n        \u003Cdiv class=\"n:text-s n:text-weak\">Olivia Hughes\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cnord-badge variant=\"info\">Scheduled\u003C\u002Fnord-badge>\n    \u003C\u002Fnord-stack>\n  \u003C\u002Fnord-stack>\n\u003C\u002Fnord-card>\n",{"body":2291},{"type":8,"value":2292,"toc":2293},[],{"title":808,"searchDepth":809,"depth":809,"links":2294},[],"blocks\u002Fdashboard\u002Ftodays-schedule","6NGfejaKKs9t952SUYcabrex3gDEPMgNwvNkJr9VEWc",{"id":2298,"title":2299,"category":2300,"description":2301,"extension":833,"html":2302,"meta":2303,"order":818,"previewHeight":2143,"previewWidth":2181,"stem":2308,"__hash__":2309},"blocks\u002Fblocks\u002Fforms\u002Fform-layout.md","Form layout","Forms","A two-column labelled form section with a description and footer actions.","\u003Cnord-card>\n  \u003Cnord-field-set>\n    \u003Cnord-field-legend>Patient details\u003C\u002Fnord-field-legend>\n    \u003Cnord-field-description>Basic information shown on the patient record.\u003C\u002Fnord-field-description>\n    \u003Cnord-field-group class=\"n:grid! n:grid-cols-2 n:gap-m!\">\n      \u003Cnord-field>\n        \u003Cnord-field-label for=\"fl-name\">Name\u003C\u002Fnord-field-label>\n        \u003Cnord-input id=\"fl-name\" hide-label value=\"Bella\">\u003C\u002Fnord-input>\n      \u003C\u002Fnord-field>\n      \u003Cnord-field>\n        \u003Cnord-field-label for=\"fl-species\">Species\u003C\u002Fnord-field-label>\n        \u003Cnord-input id=\"fl-species\" hide-label value=\"Dog\">\u003C\u002Fnord-input>\n      \u003C\u002Fnord-field>\n      \u003Cnord-field>\n        \u003Cnord-field-label for=\"fl-breed\">Breed\u003C\u002Fnord-field-label>\n        \u003Cnord-input id=\"fl-breed\" hide-label value=\"Golden Retriever\">\u003C\u002Fnord-input>\n      \u003C\u002Fnord-field>\n      \u003Cnord-field>\n        \u003Cnord-field-label for=\"fl-dob\">Date of birth\u003C\u002Fnord-field-label>\n        \u003Cnord-input id=\"fl-dob\" type=\"date\" hide-label value=\"2021-03-14\">\u003C\u002Fnord-input>\n      \u003C\u002Fnord-field>\n    \u003C\u002Fnord-field-group>\n  \u003C\u002Fnord-field-set>\n  \u003Cnord-button-group slot=\"footer\" variant=\"spaced\">\n    \u003Cnord-button>Cancel\u003C\u002Fnord-button>\n    \u003Cnord-button variant=\"primary\">Save patient\u003C\u002Fnord-button>\n  \u003C\u002Fnord-button-group>\n\u003C\u002Fnord-card>\n",{"body":2304},{"type":8,"value":2305,"toc":2306},[],{"title":808,"searchDepth":809,"depth":809,"links":2307},[],"blocks\u002Fforms\u002Fform-layout","VGwvZtlVkUy2SIwlCcTlnL6Dm6NI7O9IvwrRF6mySsk",{"id":2311,"title":2312,"category":2300,"description":2313,"extension":833,"html":2314,"meta":2315,"order":2032,"previewHeight":2074,"previewWidth":2130,"stem":2320,"__hash__":2321},"blocks\u002Fblocks\u002Fforms\u002Fprofile-form.md","Profile form","A labelled fieldset with inputs, inline validation and a toggle.","\u003Cnord-field-set>\n  \u003Cnord-field-legend>Profile\u003C\u002Fnord-field-legend>\n  \u003Cnord-field-description>Visible to colleagues across your clinic.\u003C\u002Fnord-field-description>\n  \u003Cnord-field-group>\n    \u003Cnord-field>\n      \u003Cnord-field-label for=\"profile-name\">Full name\u003C\u002Fnord-field-label>\n      \u003Cnord-input id=\"profile-name\" hide-label value=\"Laura Williams\">\u003C\u002Fnord-input>\n      \u003Cnord-field-description>How your name appears to colleagues.\u003C\u002Fnord-field-description>\n    \u003C\u002Fnord-field>\n    \u003Cnord-field invalid>\n      \u003Cnord-field-label for=\"profile-username\">Username\u003C\u002Fnord-field-label>\n      \u003Cnord-input id=\"profile-username\" hide-label value=\"lwilliams\">\u003C\u002Fnord-input>\n      \u003Cnord-field-error>Choose another username.\u003C\u002Fnord-field-error>\n    \u003C\u002Fnord-field>\n    \u003Cnord-field orientation=\"horizontal\">\n      \u003Cnord-toggle id=\"profile-newsletter\" hide-label checked>\u003C\u002Fnord-toggle>\n      \u003Cnord-field-label for=\"profile-newsletter\">Email me clinic updates\u003C\u002Fnord-field-label>\n    \u003C\u002Fnord-field>\n  \u003C\u002Fnord-field-group>\n\u003C\u002Fnord-field-set>\n",{"body":2316},{"type":8,"value":2317,"toc":2318},[],{"title":808,"searchDepth":809,"depth":809,"links":2319},[],"blocks\u002Fforms\u002Fprofile-form","an3dr8pw1HnY4fFUSmnSDQ7qeNvU4lZsjXVlO6B5X3A",{"id":2323,"title":2324,"category":2300,"description":2325,"extension":833,"html":2326,"meta":2327,"order":809,"previewHeight":2143,"previewWidth":2115,"stem":2332,"__hash__":2333},"blocks\u002Fblocks\u002Fforms\u002Fsettings-panel.md","Settings panel","A settings card with grouped toggle preferences and dividers.","\u003Cnord-card>\n  \u003Ch2 slot=\"header\" class=\"n:m-0 n:text-l n:font-heading\">Notifications\u003C\u002Fh2>\n  \u003Cnord-stack gap=\"m\" direction=\"vertical\">\n    \u003Cnord-field orientation=\"horizontal\">\n      \u003Cnord-toggle id=\"set-email\" hide-label checked>\u003C\u002Fnord-toggle>\n      \u003Cnord-field-label for=\"set-email\">\n        Email notifications\n        \u003Cnord-field-description>Appointment reminders and summaries.\u003C\u002Fnord-field-description>\n      \u003C\u002Fnord-field-label>\n    \u003C\u002Fnord-field>\n    \u003Cnord-divider>\u003C\u002Fnord-divider>\n    \u003Cnord-field orientation=\"horizontal\">\n      \u003Cnord-toggle id=\"set-sms\" hide-label>\u003C\u002Fnord-toggle>\n      \u003Cnord-field-label for=\"set-sms\">\n        SMS reminders\n        \u003Cnord-field-description>Text owners 24 hours before a visit.\u003C\u002Fnord-field-description>\n      \u003C\u002Fnord-field-label>\n    \u003C\u002Fnord-field>\n    \u003Cnord-divider>\u003C\u002Fnord-divider>\n    \u003Cnord-field orientation=\"horizontal\">\n      \u003Cnord-toggle id=\"set-push\" hide-label checked>\u003C\u002Fnord-toggle>\n      \u003Cnord-field-label for=\"set-push\">\n        Push notifications\n        \u003Cnord-field-description>Alerts on your device for new messages.\u003C\u002Fnord-field-description>\n      \u003C\u002Fnord-field-label>\n    \u003C\u002Fnord-field>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-button-group slot=\"footer\" variant=\"spaced\">\n    \u003Cnord-button>Cancel\u003C\u002Fnord-button>\n    \u003Cnord-button variant=\"primary\">Save changes\u003C\u002Fnord-button>\n  \u003C\u002Fnord-button-group>\n\u003C\u002Fnord-card>\n",{"body":2328},{"type":8,"value":2329,"toc":2330},[],{"title":808,"searchDepth":809,"depth":809,"links":2331},[],"blocks\u002Fforms\u002Fsettings-panel","VOwFjGK0Z6L97qYhzdOMAUxWvpdhK4DRc_awrK6D6ZI",{"id":2335,"title":643,"category":173,"description":2336,"extension":833,"html":2337,"meta":2338,"order":809,"previewHeight":2343,"previewWidth":2344,"stem":2345,"__hash__":2346},"blocks\u002Fblocks\u002Flayout\u002Ffilter-toolbar.md","A toolbar row combining a select, search, segmented control and filter buttons.","\u003Cnord-stack gap=\"s\" direction=\"horizontal\" wrap align-items=\"center\">\n  \u003Cnord-select size=\"s\" name=\"view\" value=\"rows\" label=\"View\" hide-label>\n    \u003Coption value=\"rows\">Rows\u003C\u002Foption>\n    \u003Coption value=\"columns\">Columns\u003C\u002Foption>\n  \u003C\u002Fnord-select>\n\n  \u003Cnord-input size=\"s\" type=\"search\" placeholder=\"Search patients\" label=\"Search\" hide-label>\u003C\u002Fnord-input>\n\n  \u003Cnord-visually-hidden id=\"time-frame\">Time frame\u003C\u002Fnord-visually-hidden>\n  \u003Cnord-segmented-control aria-labelledby=\"time-frame\">\n    \u003Cnord-segmented-control-item size=\"s\" label=\"Day\" name=\"frame\" value=\"day\" checked>\u003C\u002Fnord-segmented-control-item>\n    \u003Cnord-segmented-control-item size=\"s\" label=\"Week\" name=\"frame\" value=\"week\">\u003C\u002Fnord-segmented-control-item>\n    \u003Cnord-segmented-control-item size=\"s\" label=\"Month\" name=\"frame\" value=\"month\">\u003C\u002Fnord-segmented-control-item>\n  \u003C\u002Fnord-segmented-control>\n\n  \u003Cnord-button variant=\"dashed\" size=\"s\">\n    \u003Cnord-icon slot=\"start\" name=\"interface-filter\">\u003C\u002Fnord-icon>\n    Species\n  \u003C\u002Fnord-button>\n\n  \u003Cnord-divider direction=\"vertical\">\u003C\u002Fnord-divider>\n\n  \u003Cnord-button variant=\"dashed\" size=\"s\">\n    \u003Cnord-icon slot=\"start\" name=\"interface-add\">\u003C\u002Fnord-icon>\n    Add filter\n  \u003C\u002Fnord-button>\n\u003C\u002Fnord-stack>\n",{"body":2339},{"type":8,"value":2340,"toc":2341},[],{"title":808,"searchDepth":809,"depth":809,"links":2342},[],120,760,"blocks\u002Flayout\u002Ffilter-toolbar","DQGyDoRbbO6QE5dYCVCn_Megvf-voxAVi9CDF_lLbco",{"id":2348,"title":2349,"category":173,"description":2350,"extension":833,"html":2351,"meta":2352,"order":2032,"previewHeight":2357,"previewWidth":835,"stem":2358,"__hash__":2359},"blocks\u002Fblocks\u002Flayout\u002Fpage-header.md","Page header","A page title with supporting text and primary\u002Fsecondary actions.","\u003Cnord-stack direction=\"horizontal\" align-items=\"center\" justify-content=\"space-between\" gap=\"l\" class=\"n:inline-full!\">\n  \u003Cnord-stack gap=\"s\">\n    \u003Ch1 class=\"n:m-0\">Patients\u003C\u002Fh1>\n    \u003Cp class=\"n:m-0 n:text-weaker\">Manage and review patient records.\u003C\u002Fp>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-stack direction=\"horizontal\" gap=\"s\">\n    \u003Cnord-button>Export\u003C\u002Fnord-button>\n    \u003Cnord-button variant=\"primary\">New patient\u003C\u002Fnord-button>\n  \u003C\u002Fnord-stack>\n\u003C\u002Fnord-stack>\n",{"body":2353},{"type":8,"value":2354,"toc":2355},[],{"title":808,"searchDepth":809,"depth":809,"links":2356},[],200,"blocks\u002Flayout\u002Fpage-header","pSwnz5df2GWNn4m5XNJGIVPLo-lKAv5d87KF_Hm1OrI",{"id":2361,"title":2362,"category":2363,"description":2364,"extension":833,"html":2365,"meta":2366,"order":2032,"previewHeight":2143,"previewWidth":2115,"stem":2371,"__hash__":2372},"blocks\u002Fblocks\u002Fonboarding\u002Fsetup-checklist.md","Setup checklist","Onboarding","An onboarding checklist with progress and per-step actions.","\u003Cnord-card padding=\"none\" footer-divider>\n  \u003Cnord-stack slot=\"header\" gap=\"s\">\n    \u003Ch2 class=\"n:m-0 n:text-l n:font-heading\">Get started\u003C\u002Fh2>\n    \u003Cnord-stack gap=\"xs\">\n      \u003Cnord-stack direction=\"horizontal\" justify-content=\"space-between\">\n        \u003Cspan class=\"n:text-s n:text-weak\">2 of 4 complete\u003C\u002Fspan>\n        \u003Cspan class=\"n:text-s n:text-weak\">50%\u003C\u002Fspan>\n      \u003C\u002Fnord-stack>\n      \u003Cnord-progress-bar value=\"50\" label=\"Onboarding progress\">\u003C\u002Fnord-progress-bar>\n    \u003C\u002Fnord-stack>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-stack gap=\"none\" direction=\"vertical\">\n    \u003Cnord-stack direction=\"horizontal\" align-items=\"center\" gap=\"m\" class=\"n:p-m\">\n      \u003Cnord-icon name=\"interface-checked-circle\" class=\"n:text-success\">\u003C\u002Fnord-icon>\n      \u003Cspan class=\"n:grow n:text-weaker n:line-through\">Create your clinic\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-divider>\u003C\u002Fnord-divider>\n    \u003Cnord-stack direction=\"horizontal\" align-items=\"center\" gap=\"m\" class=\"n:p-m\">\n      \u003Cnord-icon name=\"interface-checked-circle\" class=\"n:text-success\">\u003C\u002Fnord-icon>\n      \u003Cspan class=\"n:grow n:text-weaker n:line-through\">Invite your team\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-divider>\u003C\u002Fnord-divider>\n    \u003Cnord-stack direction=\"horizontal\" align-items=\"center\" gap=\"m\" class=\"n:p-m\">\n      \u003Cnord-icon name=\"interface-circle\" class=\"n:text-weaker\">\u003C\u002Fnord-icon>\n      \u003Cspan class=\"n:grow n:font-heading\">Add your first patient\u003C\u002Fspan>\n      \u003Cnord-button size=\"s\" variant=\"primary\">Start\u003C\u002Fnord-button>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-divider>\u003C\u002Fnord-divider>\n    \u003Cnord-stack direction=\"horizontal\" align-items=\"center\" gap=\"m\" class=\"n:p-m\">\n      \u003Cnord-icon name=\"interface-circle\" class=\"n:text-weaker\">\u003C\u002Fnord-icon>\n      \u003Cspan class=\"n:grow\">Connect online booking\u003C\u002Fspan>\n      \u003Cnord-button size=\"s\">Start\u003C\u002Fnord-button>\n    \u003C\u002Fnord-stack>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-button slot=\"footer\" variant=\"plain\" expand>Skip for now\u003C\u002Fnord-button>\n\u003C\u002Fnord-card>\n",{"body":2367},{"type":8,"value":2368,"toc":2369},[],{"title":808,"searchDepth":809,"depth":809,"links":2370},[],"blocks\u002Fonboarding\u002Fsetup-checklist","2rxps_yAObn8jj0_qwvh4fr-HUD5Ev8GElpaBF4zLvU",{"id":2374,"title":2375,"category":2376,"description":2377,"extension":833,"html":2378,"meta":2379,"order":809,"previewHeight":2384,"previewWidth":2060,"stem":2385,"__hash__":2386},"blocks\u002Fblocks\u002Fpatient-client\u002Fclient-contact.md","Client contact card","Patient & client","A client's contact details with quick call and email actions.","\u003Cnord-card>\n  \u003Cnord-stack slot=\"header\" direction=\"horizontal\" justify-content=\"space-between\" align-items=\"center\">\n    \u003Ch2 class=\"n:m-0 n:text-l n:font-heading\">Contact details\u003C\u002Fh2>\n    \u003Cnord-button size=\"s\" variant=\"default\">\n      \u003Cnord-icon slot=\"start\" name=\"interface-edit\">\u003C\u002Fnord-icon>\n      Edit\n    \u003C\u002Fnord-button>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-stack gap=\"m\" direction=\"vertical\">\n    \u003Cnord-stack direction=\"horizontal\" gap=\"m\" align-items=\"center\">\n      \u003Cnord-avatar name=\"Emma Carter\">\u003C\u002Fnord-avatar>\n      \u003Cdiv class=\"n:grow\">\n        \u003Cdiv class=\"n:font-heading\">Emma Carter\u003C\u002Fdiv>\n        \u003Cdiv class=\"n:text-s n:text-weak\">Client since 2021\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-divider>\u003C\u002Fnord-divider>\n    \u003Cnord-stack direction=\"horizontal\" gap=\"s\" align-items=\"center\">\n      \u003Cnord-icon name=\"generic-telephone\" class=\"n:text-weaker\">\u003C\u002Fnord-icon>\n      \u003Cspan>+44 7700 900482\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-stack direction=\"horizontal\" gap=\"s\" align-items=\"center\">\n      \u003Cnord-icon name=\"interface-email\" class=\"n:text-weaker\">\u003C\u002Fnord-icon>\n      \u003Cspan>emma.carter@example.com\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-stack direction=\"horizontal\" gap=\"s\" align-items=\"center\">\n      \u003Cnord-icon name=\"generic-location\" class=\"n:text-weaker\">\u003C\u002Fnord-icon>\n      \u003Cspan>14 Oak Lane, Bristol BS1 4ST\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-button-group slot=\"footer\" variant=\"spaced\">\n    \u003Cnord-button>\n      \u003Cnord-icon slot=\"start\" name=\"generic-telephone\">\u003C\u002Fnord-icon>\n      Call\n    \u003C\u002Fnord-button>\n    \u003Cnord-button>\n      \u003Cnord-icon slot=\"start\" name=\"interface-email\">\u003C\u002Fnord-icon>\n      Email\n    \u003C\u002Fnord-button>\n  \u003C\u002Fnord-button-group>\n\u003C\u002Fnord-card>\n",{"body":2380},{"type":8,"value":2381,"toc":2382},[],{"title":808,"searchDepth":809,"depth":809,"links":2383},[],340,"blocks\u002Fpatient-client\u002Fclient-contact","B0UUTNzLK1egFssGZwj3OASI5qGrLsRl-2bP2-hDgO8",{"id":2388,"title":2389,"category":2376,"description":2390,"extension":833,"html":2391,"meta":2392,"order":2397,"previewHeight":2033,"previewWidth":2087,"stem":2398,"__hash__":2399},"blocks\u002Fblocks\u002Fpatient-client\u002Ffilter-table.md","Filterable table","A data table with a filter bar — search, filter chips, add filter and reset.","\u003Cnord-card padding=\"none\">\n  \u003Ch2 slot=\"header\" class=\"n:m-0 n:text-l n:font-heading\">Patients\u003C\u002Fh2>\n  \u003Cdiv class=\"n:p-m\">\n    \u003Cnord-filter-bar align=\"start\">\n      \u003Cnord-filter-input label=\"Search\" placeholder=\"Search patients\" clearable>\u003C\u002Fnord-filter-input>\n      \u003Cnord-filter-dropdown label=\"Species\">\u003C\u002Fnord-filter-dropdown>\n      \u003Cnord-filter-dropdown label=\"Status\">\u003C\u002Fnord-filter-dropdown>\n      \u003Cnord-filter-date-range label=\"Date of birth\" removable>\u003C\u002Fnord-filter-date-range>\n      \u003Cnord-filter-add-button>\u003C\u002Fnord-filter-add-button>\n      \u003Cnord-filter-reset-button>\u003C\u002Fnord-filter-reset-button>\n    \u003C\u002Fnord-filter-bar>\n  \u003C\u002Fdiv>\n  \u003Cnord-table>\n    \u003Ctable>\n      \u003Cthead>\n        \u003Ctr>\n          \u003Cth class=\"n-table-align-right\">ID\u003C\u002Fth>\n          \u003Cth>Name\u003C\u002Fth>\n          \u003Cth>Species\u003C\u002Fth>\n          \u003Cth>Breed\u003C\u002Fth>\n          \u003Cth>Gender\u003C\u002Fth>\n          \u003Cth>Status\u003C\u002Fth>\n        \u003C\u002Ftr>\n      \u003C\u002Fthead>\n      \u003Ctbody>\n        \u003Ctr>\n          \u003Ctd class=\"n-table-align-right\">101\u003C\u002Ftd>\n          \u003Ctd>Bella\u003C\u002Ftd>\n          \u003Ctd>Dog\u003C\u002Ftd>\n          \u003Ctd class=\"n:caption\">Golden Retriever\u003C\u002Ftd>\n          \u003Ctd>Female\u003C\u002Ftd>\n          \u003Ctd>\u003Cnord-badge variant=\"success\">Active\u003C\u002Fnord-badge>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd class=\"n-table-align-right\">102\u003C\u002Ftd>\n          \u003Ctd>Milo\u003C\u002Ftd>\n          \u003Ctd>Cat\u003C\u002Ftd>\n          \u003Ctd class=\"n:caption\">British Shorthair\u003C\u002Ftd>\n          \u003Ctd>Male\u003C\u002Ftd>\n          \u003Ctd>\u003Cnord-badge variant=\"success\">Active\u003C\u002Fnord-badge>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd class=\"n-table-align-right\">103\u003C\u002Ftd>\n          \u003Ctd>Coco\u003C\u002Ftd>\n          \u003Ctd>Rabbit\u003C\u002Ftd>\n          \u003Ctd class=\"n:caption\">Lionhead\u003C\u002Ftd>\n          \u003Ctd>Female\u003C\u002Ftd>\n          \u003Ctd>\u003Cnord-badge variant=\"warning\">Inactive\u003C\u002Fnord-badge>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd class=\"n-table-align-right\">104\u003C\u002Ftd>\n          \u003Ctd>Rex\u003C\u002Ftd>\n          \u003Ctd>Dog\u003C\u002Ftd>\n          \u003Ctd class=\"n:caption\">German Shepherd\u003C\u002Ftd>\n          \u003Ctd>Male\u003C\u002Ftd>\n          \u003Ctd>\u003Cnord-badge variant=\"success\">Active\u003C\u002Fnord-badge>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd class=\"n-table-align-right\">105\u003C\u002Ftd>\n          \u003Ctd>Luna\u003C\u002Ftd>\n          \u003Ctd>Cat\u003C\u002Ftd>\n          \u003Ctd class=\"n:caption\">Maine Coon\u003C\u002Ftd>\n          \u003Ctd>Female\u003C\u002Ftd>\n          \u003Ctd>\u003Cnord-badge variant=\"warning\">Inactive\u003C\u002Fnord-badge>\u003C\u002Ftd>\n        \u003C\u002Ftr>\n      \u003C\u002Ftbody>\n    \u003C\u002Ftable>\n  \u003C\u002Fnord-table>\n\u003C\u002Fnord-card>\n",{"body":2393},{"type":8,"value":2394,"toc":2395},[],{"title":808,"searchDepth":809,"depth":809,"links":2396},[],7,"blocks\u002Fpatient-client\u002Ffilter-table","GrXQu11jiIQie18YHWTDiV47dNZTJeqr8uVO0CmtJ4U",{"id":2401,"title":2402,"category":2376,"description":2403,"extension":833,"html":2404,"meta":2405,"order":2128,"previewHeight":2410,"previewWidth":2060,"stem":2411,"__hash__":2412},"blocks\u002Fblocks\u002Fpatient-client\u002Fhealth-plan.md","Health plan summary","A wellness-plan card showing benefits used and what's included.","\u003Cnord-card>\n  \u003Cnord-stack slot=\"header\" direction=\"horizontal\" justify-content=\"space-between\" align-items=\"center\">\n    \u003Ch2 class=\"n:m-0 n:text-l n:font-heading\">Wellness Plus\u003C\u002Fh2>\n    \u003Cnord-badge variant=\"success\">Active\u003C\u002Fnord-badge>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-stack gap=\"l\" direction=\"vertical\">\n    \u003Cdiv>\n      \u003Cnord-stack direction=\"horizontal\" justify-content=\"space-between\" class=\"n:mbe-xs\">\n        \u003Cspan class=\"n:text-weak\">Benefits used\u003C\u002Fspan>\n        \u003Cspan class=\"n:font-heading\">6 \u002F 10\u003C\u002Fspan>\n      \u003C\u002Fnord-stack>\n      \u003Cnord-progress-bar value=\"60\" label=\"Benefits used\">\u003C\u002Fnord-progress-bar>\n    \u003C\u002Fdiv>\n    \u003Cnord-stack gap=\"s\" direction=\"vertical\">\n      \u003Cnord-stack direction=\"horizontal\" gap=\"s\" align-items=\"center\">\n        \u003Cnord-icon name=\"interface-checked-circle\" class=\"n:text-success\">\u003C\u002Fnord-icon>\n        \u003Cspan>2 wellness exams per year\u003C\u002Fspan>\n      \u003C\u002Fnord-stack>\n      \u003Cnord-stack direction=\"horizontal\" gap=\"s\" align-items=\"center\">\n        \u003Cnord-icon name=\"interface-checked-circle\" class=\"n:text-success\">\u003C\u002Fnord-icon>\n        \u003Cspan>Core vaccinations included\u003C\u002Fspan>\n      \u003C\u002Fnord-stack>\n      \u003Cnord-stack direction=\"horizontal\" gap=\"s\" align-items=\"center\">\n        \u003Cnord-icon name=\"interface-checked-circle\" class=\"n:text-success\">\u003C\u002Fnord-icon>\n        \u003Cspan>10% off treatments & medication\u003C\u002Fspan>\n      \u003C\u002Fnord-stack>\n    \u003C\u002Fnord-stack>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-button slot=\"footer\" expand>Manage plan\u003C\u002Fnord-button>\n\u003C\u002Fnord-card>\n",{"body":2406},{"type":8,"value":2407,"toc":2408},[],{"title":808,"searchDepth":809,"depth":809,"links":2409},[],400,"blocks\u002Fpatient-client\u002Fhealth-plan","EFA_0C-XLKxGBHZAyqsadFUyRcZV9m3BawH1XkRAcEs",{"id":2414,"title":2415,"category":2376,"description":2416,"extension":833,"html":2417,"meta":2418,"order":818,"previewHeight":2046,"previewWidth":2115,"stem":2423,"__hash__":2424},"blocks\u002Fblocks\u002Fpatient-client\u002Fmedical-history.md","Medical history","A chronological timeline of a patient's clinical events.","\u003Cnord-card padding=\"none\">\n  \u003Ch2 slot=\"header\" class=\"n:m-0 n:text-l n:font-heading\">Medical history\u003C\u002Fh2>\n  \u003Cnord-stack gap=\"none\" direction=\"vertical\">\n    \u003Cnord-stack direction=\"horizontal\" gap=\"m\" align-items=\"start\" class=\"n:p-m\">\n      \u003Cnord-icon name=\"medical-syringe\" class=\"n:text-weaker\">\u003C\u002Fnord-icon>\n      \u003Cdiv class=\"n:grow\">\n        \u003Cdiv class=\"n:font-heading\">Annual vaccination\u003C\u002Fdiv>\n        \u003Cdiv class=\"n:text-s n:text-weak\">Rabies, DHPP · Dr. Stone\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cspan class=\"n:text-s n:text-weaker\">24 Jun\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-divider>\u003C\u002Fnord-divider>\n    \u003Cnord-stack direction=\"horizontal\" gap=\"m\" align-items=\"start\" class=\"n:p-m\">\n      \u003Cnord-icon name=\"medical-surgery\" class=\"n:text-weaker\">\u003C\u002Fnord-icon>\n      \u003Cdiv class=\"n:grow\">\n        \u003Cdiv class=\"n:font-heading\">Spay surgery\u003C\u002Fdiv>\n        \u003Cdiv class=\"n:text-s n:text-weak\">Uncomplicated · Dr. Reed\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cspan class=\"n:text-s n:text-weaker\">12 Mar\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-divider>\u003C\u002Fnord-divider>\n    \u003Cnord-stack direction=\"horizontal\" gap=\"m\" align-items=\"start\" class=\"n:p-m\">\n      \u003Cnord-icon name=\"medical-instrument-stethoscope\" class=\"n:text-weaker\">\u003C\u002Fnord-icon>\n      \u003Cdiv class=\"n:grow\">\n        \u003Cdiv class=\"n:font-heading\">Wellness exam\u003C\u002Fdiv>\n        \u003Cdiv class=\"n:text-s n:text-weak\">Healthy · Dr. Stone\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cspan class=\"n:text-s n:text-weaker\">02 Jan\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n  \u003C\u002Fnord-stack>\n\u003C\u002Fnord-card>\n",{"body":2419},{"type":8,"value":2420,"toc":2421},[],{"title":808,"searchDepth":809,"depth":809,"links":2422},[],"blocks\u002Fpatient-client\u002Fmedical-history","PeCV4nPpt-ser8SUetWKDqWXnvI0SnUcooKJLChjvJ4",{"id":2426,"title":2427,"category":2376,"description":2428,"extension":833,"html":2429,"meta":2430,"order":2032,"previewHeight":2074,"previewWidth":2060,"stem":2435,"__hash__":2436},"blocks\u002Fblocks\u002Fpatient-client\u002Fpatient-profile.md","Patient profile card","A patient summary with species, key details and clinical alerts.","\u003Cnord-card>\n  \u003Cnord-stack slot=\"header\" direction=\"horizontal\" gap=\"m\" align-items=\"center\">\n    \u003Cnord-avatar name=\"Bella\" icon=\"generic-canine\" size=\"l\">\u003C\u002Fnord-avatar>\n    \u003Cdiv class=\"n:grow\">\n      \u003Ch2 class=\"n:m-0 n:text-l n:font-heading\">Bella\u003C\u002Fh2>\n      \u003Cdiv class=\"n:text-s n:text-weak\">Golden Retriever · Female · 4 yrs\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-stack slot=\"header-end\" direction=\"horizontal\" gap=\"xs\">\n    \u003Cnord-badge variant=\"danger\">Allergy: penicillin\u003C\u002Fnord-badge>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-stack gap=\"m\" direction=\"vertical\">\n    \u003Cnord-stack direction=\"horizontal\" justify-content=\"space-between\" gap=\"m\">\n      \u003Cspan class=\"n:text-weak\">Microchip\u003C\u002Fspan>\n      \u003Cspan class=\"n:font-heading\">985 1410 0021 8843\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-divider>\u003C\u002Fnord-divider>\n    \u003Cnord-stack direction=\"horizontal\" justify-content=\"space-between\" gap=\"m\">\n      \u003Cspan class=\"n:text-weak\">Weight\u003C\u002Fspan>\n      \u003Cspan class=\"n:font-heading\">24 kg\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-divider>\u003C\u002Fnord-divider>\n    \u003Cnord-stack direction=\"horizontal\" justify-content=\"space-between\" gap=\"m\">\n      \u003Cspan class=\"n:text-weak\">Owner\u003C\u002Fspan>\n      \u003Cspan class=\"n:font-heading\">Emma Carter\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-button slot=\"footer\" expand>View full record\u003C\u002Fnord-button>\n\u003C\u002Fnord-card>\n",{"body":2431},{"type":8,"value":2432,"toc":2433},[],{"title":808,"searchDepth":809,"depth":809,"links":2434},[],"blocks\u002Fpatient-client\u002Fpatient-profile","yOjSy10_YcdETpB7A1HU3RgI6Yz6AD4eOoScCviKwaY",{"id":2438,"title":2439,"category":2376,"description":2440,"extension":833,"html":2441,"meta":2442,"order":2257,"previewHeight":2143,"previewWidth":2087,"stem":2447,"__hash__":2448},"blocks\u002Fblocks\u002Fpatient-client\u002Frecords-table.md","Records table","A card-wrapped data table of patient records with header filters and status badges.","\u003Cnord-card padding=\"none\">\n  \u003Ch2 slot=\"header\" class=\"n:m-0 n:text-l n:font-heading\">Patient records\u003C\u002Fh2>\n  \u003Cdiv slot=\"header-end\" class=\"n:flex n:gap-s\">\n    \u003Cnord-input size=\"s\" label=\"Search\" hide-label placeholder=\"Search patients\" type=\"search\">\u003C\u002Fnord-input>\n    \u003Cnord-select hide-label size=\"s\" label=\"Filter by status\" placeholder=\"All statuses\">\n      \u003Cnord-icon slot=\"icon\" name=\"interface-filter\">\u003C\u002Fnord-icon>\n      \u003Coption value=\"active\">Active\u003C\u002Foption>\n      \u003Coption value=\"inactive\">Inactive\u003C\u002Foption>\n    \u003C\u002Fnord-select>\n  \u003C\u002Fdiv>\n  \u003Cnord-table>\n    \u003Ctable>\n      \u003Cthead>\n        \u003Ctr>\n          \u003Cth>Patient\u003C\u002Fth>\n          \u003Cth>Species\u003C\u002Fth>\n          \u003Cth>Owner\u003C\u002Fth>\n          \u003Cth>Status\u003C\u002Fth>\n          \u003Cth class=\"n-table-align-right\">Last visit\u003C\u002Fth>\n        \u003C\u002Ftr>\n      \u003C\u002Fthead>\n      \u003Ctbody>\n        \u003Ctr>\n          \u003Ctd>Bella\u003C\u002Ftd>\n          \u003Ctd class=\"n:caption\">Dog · Golden Retriever\u003C\u002Ftd>\n          \u003Ctd>Emma Carter\u003C\u002Ftd>\n          \u003Ctd>\u003Cnord-badge variant=\"success\">Active\u003C\u002Fnord-badge>\u003C\u002Ftd>\n          \u003Ctd class=\"n:caption n-table-align-right\">24.6.2026\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd>Milo\u003C\u002Ftd>\n          \u003Ctd class=\"n-caption\">Cat · British Shorthair\u003C\u002Ftd>\n          \u003Ctd>James Wright\u003C\u002Ftd>\n          \u003Ctd>\u003Cnord-badge variant=\"success\">Active\u003C\u002Fnord-badge>\u003C\u002Ftd>\n          \u003Ctd class=\"n-caption n-table-align-right\">21.6.2026\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd>Coco\u003C\u002Ftd>\n          \u003Ctd class=\"n-caption\">Rabbit · Lionhead\u003C\u002Ftd>\n          \u003Ctd>Sophia Bennett\u003C\u002Ftd>\n          \u003Ctd>\u003Cnord-badge variant=\"warning\">Inactive\u003C\u002Fnord-badge>\u003C\u002Ftd>\n          \u003Ctd class=\"n-caption n-table-align-right\">02.4.2026\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd>Rex\u003C\u002Ftd>\n          \u003Ctd class=\"n-caption\">Dog · German Shepherd\u003C\u002Ftd>\n          \u003Ctd>Olivia Hughes\u003C\u002Ftd>\n          \u003Ctd>\u003Cnord-badge variant=\"success\">Active\u003C\u002Fnord-badge>\u003C\u002Ftd>\n          \u003Ctd class=\"n-caption n-table-align-right\">18.6.2026\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n          \u003Ctd>Luna\u003C\u002Ftd>\n          \u003Ctd class=\"n-caption\">Cat · Maine Coon\u003C\u002Ftd>\n          \u003Ctd>Daniel Evans\u003C\u002Ftd>\n          \u003Ctd>\u003Cnord-badge variant=\"warning\">Inactive\u003C\u002Fnord-badge>\u003C\u002Ftd>\n          \u003Ctd class=\"n-caption n-table-align-right\">11.1.2026\u003C\u002Ftd>\n        \u003C\u002Ftr>\n      \u003C\u002Ftbody>\n    \u003C\u002Ftable>\n  \u003C\u002Fnord-table>\n\u003C\u002Fnord-card>\n",{"body":2443},{"type":8,"value":2444,"toc":2445},[],{"title":808,"searchDepth":809,"depth":809,"links":2446},[],"blocks\u002Fpatient-client\u002Frecords-table","8OTPgN3ZlD6euhImhSD1yxivwFTtwzcdR-XMs0rpyYk",{"id":2450,"title":2451,"category":2376,"description":2452,"extension":833,"html":2453,"meta":2454,"order":2101,"previewHeight":2074,"previewWidth":2115,"stem":2459,"__hash__":2460},"blocks\u002Fblocks\u002Fpatient-client\u002Freferral-card.md","Veterinary referral","A referral summary linking a patient to a specialist with status.","\u003Cnord-card>\n  \u003Cnord-stack slot=\"header\" direction=\"horizontal\" justify-content=\"space-between\" align-items=\"center\">\n    \u003Ch2 class=\"n:m-0 n:text-l n:font-heading\">Referral\u003C\u002Fh2>\n    \u003Cnord-badge variant=\"info\">Pending\u003C\u002Fnord-badge>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-stack gap=\"m\" direction=\"vertical\">\n    \u003Cnord-stack direction=\"horizontal\" gap=\"m\" align-items=\"center\">\n      \u003Cnord-avatar name=\"Bella\" icon=\"generic-canine\">\u003C\u002Fnord-avatar>\n      \u003Cdiv class=\"n:grow\">\n        \u003Cdiv class=\"n:font-heading\">Bella · Orthopaedics\u003C\u002Fdiv>\n        \u003Cdiv class=\"n:text-s n:text-weak\">Suspected cruciate ligament injury\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-divider>\u003C\u002Fnord-divider>\n    \u003Cnord-stack direction=\"horizontal\" justify-content=\"space-between\" gap=\"m\">\n      \u003Cspan class=\"n:text-weak\">Referred to\u003C\u002Fspan>\n      \u003Cspan class=\"n:font-heading\">Bristol Veterinary Specialists\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-stack direction=\"horizontal\" justify-content=\"space-between\" gap=\"m\">\n      \u003Cspan class=\"n:text-weak\">Referring vet\u003C\u002Fspan>\n      \u003Cspan class=\"n:font-heading\">Dr. Amelia Stone\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-button-group slot=\"footer\" variant=\"spaced\">\n    \u003Cnord-button>View letter\u003C\u002Fnord-button>\n    \u003Cnord-button variant=\"primary\">Send referral\u003C\u002Fnord-button>\n  \u003C\u002Fnord-button-group>\n\u003C\u002Fnord-card>\n",{"body":2455},{"type":8,"value":2456,"toc":2457},[],{"title":808,"searchDepth":809,"depth":809,"links":2458},[],"blocks\u002Fpatient-client\u002Freferral-card","-54-7nG58ProsDGVlR0R0NHB_MBPaGIAFCsvZ6SMYmM",{"id":2462,"title":2463,"category":2464,"description":2465,"extension":833,"html":2466,"meta":2467,"order":2032,"previewHeight":2472,"previewWidth":2115,"stem":2473,"__hash__":2474},"blocks\u002Fblocks\u002Fscheduling\u002Fappointment-card.md","Appointment card","Scheduling","A single appointment summary with patient, time, type and quick actions.","\u003Cnord-card>\n  \u003Cnord-stack slot=\"header\" direction=\"horizontal\" gap=\"m\" align-items=\"center\">\n    \u003Cnord-avatar name=\"Bella\" icon=\"generic-canine\">\u003C\u002Fnord-avatar>\n    \u003Cdiv class=\"n:grow\">\n      \u003Ch2 class=\"n:m-0 n:text-l n:font-heading\">Bella\u003C\u002Fh2>\n      \u003Cdiv class=\"n:text-s n:text-weak\">Golden Retriever · 4 yrs · Emma Carter\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cnord-badge variant=\"success\">Confirmed\u003C\u002Fnord-badge>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-stack gap=\"m\" direction=\"vertical\">\n    \u003Cnord-stack direction=\"horizontal\" gap=\"s\" align-items=\"center\">\n      \u003Cnord-icon name=\"interface-calendar\" class=\"n:text-weaker\">\u003C\u002Fnord-icon>\n      \u003Cspan>Today, 09:00 – 09:30\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-stack direction=\"horizontal\" gap=\"s\" align-items=\"center\">\n      \u003Cnord-icon name=\"medical-syringe\" class=\"n:text-weaker\">\u003C\u002Fnord-icon>\n      \u003Cspan>Annual vaccination\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-stack direction=\"horizontal\" gap=\"s\" align-items=\"center\">\n      \u003Cnord-icon name=\"generic-location\" class=\"n:text-weaker\">\u003C\u002Fnord-icon>\n      \u003Cspan>Consultation room 2 · Dr. Amelia Stone\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-button-group slot=\"footer\" variant=\"spaced\">\n    \u003Cnord-button>Reschedule\u003C\u002Fnord-button>\n    \u003Cnord-button variant=\"primary\">Check in\u003C\u002Fnord-button>\n  \u003C\u002Fnord-button-group>\n\u003C\u002Fnord-card>\n",{"body":2468},{"type":8,"value":2469,"toc":2470},[],{"title":808,"searchDepth":809,"depth":809,"links":2471},[],280,"blocks\u002Fscheduling\u002Fappointment-card","65vP-pbvbhqkIUhqf_0o0H14j4g9-PT1tTi7MGNoww4",{"id":2476,"title":2477,"category":2464,"description":2478,"extension":833,"html":2479,"meta":2480,"order":2101,"previewHeight":2046,"previewWidth":2130,"stem":2485,"__hash__":2486},"blocks\u002Fblocks\u002Fscheduling\u002Fappointment-detail.md","Appointment detail panel","A side-panel preview of an appointment with notes, type and assigned staff.","\u003Cnord-card>\n  \u003Cnord-stack slot=\"header\" direction=\"horizontal\" justify-content=\"space-between\" align-items=\"center\">\n    \u003Ch2 class=\"n:m-0 n:text-l n:font-heading\">Appointment\u003C\u002Fh2>\n    \u003Cnord-button size=\"s\" square variant=\"plain\" aria-label=\"Close\">\u003Cnord-icon name=\"interface-close-small\">\u003C\u002Fnord-icon>\u003C\u002Fnord-button>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-stack gap=\"l\" direction=\"vertical\">\n    \u003Cnord-stack direction=\"horizontal\" gap=\"s\" align-items=\"start\">\n      \u003Cnord-icon name=\"file-notepad\" class=\"n:text-weaker\">\u003C\u002Fnord-icon>\n      \u003Cp class=\"n:m-0 n:text-weak\">Owner reports limping on the left hind leg for three days. No known trauma.\u003C\u002Fp>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-divider>\u003C\u002Fnord-divider>\n    \u003Cnord-stack direction=\"horizontal\" gap=\"m\" align-items=\"center\">\n      \u003Cspan class=\"n:inline-block n:rounded-full\" style=\"inline-size: 0.75rem; block-size: 0.75rem; background: var(--n-color-status-highlight)\">\u003C\u002Fspan>\n      \u003Cdiv class=\"n:grow\">\n        \u003Cdiv class=\"n:font-heading\">Lameness exam\u003C\u002Fdiv>\n        \u003Cdiv class=\"n:text-s n:text-weaker\">45 minutes\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-stack direction=\"horizontal\" gap=\"m\" align-items=\"center\">\n      \u003Cnord-avatar name=\"Dr. Noah Reed\" size=\"s\">\u003C\u002Fnord-avatar>\n      \u003Cdiv class=\"n:grow\">\n        \u003Cdiv class=\"n:font-heading\">Dr. Noah Reed\u003C\u002Fdiv>\n        \u003Cdiv class=\"n:text-s n:text-weaker\">Lead veterinarian\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fnord-stack>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-button slot=\"footer\" variant=\"primary\" expand>Open consultation\u003C\u002Fnord-button>\n\u003C\u002Fnord-card>\n",{"body":2481},{"type":8,"value":2482,"toc":2483},[],{"title":808,"searchDepth":809,"depth":809,"links":2484},[],"blocks\u002Fscheduling\u002Fappointment-detail","V_Zo1gXuligfcHQHo8SXKqmo2ZZEVZJw1vWlNCPBN7w",{"id":2488,"title":2489,"category":2464,"description":2490,"extension":833,"html":2491,"meta":2492,"order":2257,"previewHeight":2129,"previewWidth":2130,"stem":2497,"__hash__":2498},"blocks\u002Fblocks\u002Fscheduling\u002Fappointment-type.md","Appointment type picker","Selectable choice cards for picking how a patient will be seen.","\u003Cnord-field-set>\n  \u003Cnord-field-legend>Appointment type\u003C\u002Fnord-field-legend>\n  \u003Cnord-field-description>Choose how you'd like to see this patient.\u003C\u002Fnord-field-description>\n  \u003Cnord-field-group>\n    \u003Cnord-field-label for=\"visit-clinic\" class=\"n:border n:border-[var(--n-color-border)] n:rounded-[var(--n-border-radius-m)] n:p-m\">\n      \u003Cnord-field orientation=\"horizontal\">\n        \u003Cnord-field-content>\n          \u003Cnord-field-title>In-clinic visit\u003C\u002Fnord-field-title>\n          \u003Cnord-field-description>See the patient at the clinic.\u003C\u002Fnord-field-description>\n        \u003C\u002Fnord-field-content>\n        \u003Cnord-radio id=\"visit-clinic\" name=\"visit-type\" value=\"clinic\" hide-label checked>\u003C\u002Fnord-radio>\n      \u003C\u002Fnord-field>\n    \u003C\u002Fnord-field-label>\n    \u003Cnord-field-label for=\"visit-video\" class=\"n:border n:border-[var(--n-color-border)] n:rounded-[var(--n-border-radius-m)] n:p-m\">\n      \u003Cnord-field orientation=\"horizontal\">\n        \u003Cnord-field-content>\n          \u003Cnord-field-title>Video consultation\u003C\u002Fnord-field-title>\n          \u003Cnord-field-description>Consult remotely over secure video.\u003C\u002Fnord-field-description>\n        \u003C\u002Fnord-field-content>\n        \u003Cnord-radio id=\"visit-video\" name=\"visit-type\" value=\"video\" hide-label>\u003C\u002Fnord-radio>\n      \u003C\u002Fnord-field>\n    \u003C\u002Fnord-field-label>\n    \u003Cnord-field-label for=\"visit-home\" class=\"n:border n:border-[var(--n-color-border)] n:rounded-[var(--n-border-radius-m)] n:p-m\">\n      \u003Cnord-field orientation=\"horizontal\">\n        \u003Cnord-field-content>\n          \u003Cnord-field-title>Home visit\u003C\u002Fnord-field-title>\n          \u003Cnord-field-description>A vet travels to the owner's address.\u003C\u002Fnord-field-description>\n        \u003C\u002Fnord-field-content>\n        \u003Cnord-radio id=\"visit-home\" name=\"visit-type\" value=\"home\" hide-label>\u003C\u002Fnord-radio>\n      \u003C\u002Fnord-field>\n    \u003C\u002Fnord-field-label>\n  \u003C\u002Fnord-field-group>\n\u003C\u002Fnord-field-set>\n",{"body":2493},{"type":8,"value":2494,"toc":2495},[],{"title":808,"searchDepth":809,"depth":809,"links":2496},[],"blocks\u002Fscheduling\u002Fappointment-type","2NC4cr8kBSyDGH-Kh-3ivirI6XKnd-fx3hvrBf0M6tQ",{"id":2500,"title":2501,"category":2464,"description":2502,"extension":833,"html":2503,"meta":2504,"order":818,"previewHeight":2143,"previewWidth":2115,"stem":2509,"__hash__":2510},"blocks\u002Fblocks\u002Fscheduling\u002Fbooking-slots.md","Booking slot picker","A self-service date and time-slot picker for online appointment booking.","\u003Cnord-card>\n  \u003Ch2 slot=\"header\" class=\"n:m-0 n:text-l n:font-heading\">Choose a time\u003C\u002Fh2>\n  \u003Cnord-stack gap=\"l\" direction=\"vertical\">\n    \u003Cnord-select label=\"Service\" value=\"checkup\">\n      \u003Coption value=\"checkup\">Wellness check-up\u003C\u002Foption>\n      \u003Coption value=\"vaccination\">Vaccination\u003C\u002Foption>\n      \u003Coption value=\"dental\">Dental check\u003C\u002Foption>\n    \u003C\u002Fnord-select>\n    \u003Cdiv>\n      \u003Cdiv class=\"n:mbe-s n:font-heading\">Tuesday, 24 June\u003C\u002Fdiv>\n      \u003Cdiv class=\"n:grid n:grid-cols-3 n:gap-s\">\n        \u003Cnord-button>08:30\u003C\u002Fnord-button>\n        \u003Cnord-button variant=\"primary\">09:00\u003C\u002Fnord-button>\n        \u003Cnord-button>09:30\u003C\u002Fnord-button>\n        \u003Cnord-button disabled>10:00\u003C\u002Fnord-button>\n        \u003Cnord-button>10:30\u003C\u002Fnord-button>\n        \u003Cnord-button>11:15\u003C\u002Fnord-button>\n        \u003Cnord-button disabled>13:00\u003C\u002Fnord-button>\n        \u003Cnord-button>13:30\u003C\u002Fnord-button>\n        \u003Cnord-button>14:00\u003C\u002Fnord-button>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-button slot=\"footer\" variant=\"primary\" expand>Continue\u003C\u002Fnord-button>\n\u003C\u002Fnord-card>\n",{"body":2505},{"type":8,"value":2506,"toc":2507},[],{"title":808,"searchDepth":809,"depth":809,"links":2508},[],"blocks\u002Fscheduling\u002Fbooking-slots","Y_ZPPjdbmSMZcgxMCGiD6hLIV5z7aYD4G7IDt19f4pQ",{"id":2512,"title":2513,"category":2464,"description":2514,"extension":833,"html":2515,"meta":2516,"order":809,"previewHeight":2033,"previewWidth":2181,"stem":2521,"__hash__":2522},"blocks\u002Fblocks\u002Fscheduling\u002Fday-agenda.md","Day agenda","A vertical time-grid agenda for a single clinician's day.","\u003Cnord-card>\n  \u003Cnord-stack slot=\"header\" direction=\"horizontal\" justify-content=\"space-between\" align-items=\"center\">\n    \u003Ch2 class=\"n:m-0 n:text-l n:font-heading\">Tuesday, 24 June\u003C\u002Fh2>\n    \u003Cnord-button-group>\n      \u003Cnord-button size=\"s\" square aria-label=\"Previous day\">\u003Cnord-icon name=\"arrow-left\">\u003C\u002Fnord-icon>\u003C\u002Fnord-button>\n      \u003Cnord-button size=\"s\" square aria-label=\"Next day\">\u003Cnord-icon name=\"arrow-right\">\u003C\u002Fnord-icon>\u003C\u002Fnord-button>\n    \u003C\u002Fnord-button-group>\n  \u003C\u002Fnord-stack>\n  \u003Cnord-stack gap=\"m\" direction=\"vertical\">\n    \u003Cnord-stack direction=\"horizontal\" gap=\"m\" align-items=\"center\">\n      \u003Cspan class=\"n:text-s n:text-weak n:font-heading\">09:00\u003C\u002Fspan>\n      \u003Cnord-card padding=\"m\" class=\"n:grow\">\n        \u003Cstrong>Bella · Vaccination\u003C\u002Fstrong>\n        \u003Cdiv class=\"n:text-s n:text-weak\">Emma Carter · 30 min\u003C\u002Fdiv>\n      \u003C\u002Fnord-card>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-stack direction=\"horizontal\" gap=\"m\" align-items=\"center\">\n      \u003Cspan class=\"n:text-s n:text-weak n:font-heading\">10:00\u003C\u002Fspan>\n      \u003Cnord-card padding=\"m\" class=\"n:grow\">\n        \u003Cstrong>Milo · Dental check\u003C\u002Fstrong>\n        \u003Cdiv class=\"n:text-s n:text-weak\">James Wright · 45 min\u003C\u002Fdiv>\n      \u003C\u002Fnord-card>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-stack direction=\"horizontal\" gap=\"m\" align-items=\"center\">\n      \u003Cspan class=\"n:text-s n:text-weak n:font-heading\">11:00\u003C\u002Fspan>\n      \u003Cdiv class=\"n:grow n:rounded-default n:border n:border-dashed n:p-m n:text-center n:text-s n:text-weaker\">\n        Available\n      \u003C\u002Fdiv>\n    \u003C\u002Fnord-stack>\n  \u003C\u002Fnord-stack>\n\u003C\u002Fnord-card>\n",{"body":2517},{"type":8,"value":2518,"toc":2519},[],{"title":808,"searchDepth":809,"depth":809,"links":2520},[],"blocks\u002Fscheduling\u002Fday-agenda","ep7ua5Ln6sfr0YY0XbAa8Ubw_mdtsYlHDNEzVaJoAgE",{"id":2524,"title":2525,"category":2464,"description":2526,"extension":833,"html":2527,"meta":2528,"order":2128,"previewHeight":2143,"previewWidth":2533,"stem":2534,"__hash__":2535},"blocks\u002Fblocks\u002Fscheduling\u002Fwaiting-room.md","Waiting room board","A check-in board grouping patients by status across the visit lifecycle.","\u003Cdiv class=\"n:grid n:grid-cols-3 n:gap-m\">\n  \u003Cnord-card padding=\"none\">\n    \u003Cnord-stack slot=\"header\" direction=\"horizontal\" justify-content=\"space-between\" align-items=\"center\">\n      \u003Cspan class=\"n:font-heading\">Waiting\u003C\u002Fspan>\n      \u003Cnord-badge variant=\"warning\">2\u003C\u002Fnord-badge>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-stack gap=\"none\" direction=\"vertical\">\n      \u003Cnord-stack direction=\"horizontal\" gap=\"s\" align-items=\"center\" class=\"n:p-m\">\n        \u003Cnord-avatar name=\"Coco\" icon=\"generic-leporidae\" size=\"s\">\u003C\u002Fnord-avatar>\n        \u003Cdiv class=\"n:grow\">\u003Cdiv class=\"n:font-heading\">Coco\u003C\u002Fdiv>\u003Cdiv class=\"n:text-s n:text-weak\">10:15 · waiting 12m\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fnord-stack>\n      \u003Cnord-divider>\u003C\u002Fnord-divider>\n      \u003Cnord-stack direction=\"horizontal\" gap=\"s\" align-items=\"center\" class=\"n:p-m\">\n        \u003Cnord-avatar name=\"Luna\" icon=\"generic-feline\" size=\"s\">\u003C\u002Fnord-avatar>\n        \u003Cdiv class=\"n:grow\">\u003Cdiv class=\"n:font-heading\">Luna\u003C\u002Fdiv>\u003Cdiv class=\"n:text-s n:text-weak\">10:30 · waiting 4m\u003C\u002Fdiv>\u003C\u002Fdiv>\n      \u003C\u002Fnord-stack>\n    \u003C\u002Fnord-stack>\n  \u003C\u002Fnord-card>\n  \u003Cnord-card padding=\"none\">\n    \u003Cnord-stack slot=\"header\" direction=\"horizontal\" justify-content=\"space-between\" align-items=\"center\">\n      \u003Cspan class=\"n:font-heading\">In consultation\u003C\u002Fspan>\n      \u003Cnord-badge variant=\"info\">1\u003C\u002Fnord-badge>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-stack direction=\"horizontal\" gap=\"s\" align-items=\"center\" class=\"n:p-m\">\n      \u003Cnord-avatar name=\"Bella\" icon=\"generic-canine\" size=\"s\">\u003C\u002Fnord-avatar>\n      \u003Cdiv class=\"n:grow\">\u003Cdiv class=\"n:font-heading\">Bella\u003C\u002Fdiv>\u003Cdiv class=\"n:text-s n:text-weak\">Dr. Stone · room 2\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fnord-stack>\n  \u003C\u002Fnord-card>\n  \u003Cnord-card padding=\"none\">\n    \u003Cnord-stack slot=\"header\" direction=\"horizontal\" justify-content=\"space-between\" align-items=\"center\">\n      \u003Cspan class=\"n:font-heading\">Ready for checkout\u003C\u002Fspan>\n      \u003Cnord-badge variant=\"success\">1\u003C\u002Fnord-badge>\n    \u003C\u002Fnord-stack>\n    \u003Cnord-stack direction=\"horizontal\" gap=\"s\" align-items=\"center\" class=\"n:p-m\">\n      \u003Cnord-avatar name=\"Rex\" icon=\"generic-canine\" size=\"s\">\u003C\u002Fnord-avatar>\n      \u003Cdiv class=\"n:grow\">\u003Cdiv class=\"n:font-heading\">Rex\u003C\u002Fdiv>\u003Cdiv class=\"n:text-s n:text-weak\">Invoice ready\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003C\u002Fnord-stack>\n  \u003C\u002Fnord-card>\n\u003C\u002Fdiv>\n",{"body":2529},{"type":8,"value":2530,"toc":2531},[],{"title":808,"searchDepth":809,"depth":809,"links":2532},[],880,"blocks\u002Fscheduling\u002Fwaiting-room","eprL6IKV-06ETaazylNAk4HO2_u3A0uKAkOyP9Yk22I",[2537,2539,2541,2543,2545,2547,2549,2551,2553,2555,2557,2559,2561,2563,2565,2567,2569,2571,2573,2575,2577,2579,2581,2583,2585,2587,2589,2591,2593,2595,2597,2599,2601,2603,2605,2607,2609,2611,2613,2615,2617,2619,2621,2623,2625,2627,2629,2631,2633,2635,2637,2639,2641,2643,2645,2647,2649,2651,2653,2655,2657,2659,2661,2663],{"path":2538,"isNew":837,"updated":835},"\u002Fcomponent-docs\u002Faccordion",{"path":2540,"isNew":837,"updated":835},"\u002Fcomponent-docs\u002Faside",{"path":2542,"isNew":837,"updated":831},"\u002Fcomponent-docs\u002Fautocomplete",{"path":2544,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Favatar",{"path":2546,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Fbadge",{"path":2548,"isNew":834,"updated":831},"\u002Fcomponent-docs\u002Fbanner",{"path":2550,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Fbutton",{"path":2552,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Fbutton-group",{"path":2554,"isNew":834,"updated":831},"\u002Fcomponent-docs\u002Fcalendar",{"path":2556,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Fcard",{"path":2558,"isNew":834,"updated":831},"\u002Fcomponent-docs\u002Fcheckbox",{"path":2560,"isNew":837,"updated":835},"\u002Fcomponent-docs\u002Fcollapsible",{"path":2562,"isNew":837,"updated":831},"\u002Fcomponent-docs\u002Fcombobox",{"path":2564,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Fcommand-menu",{"path":2566,"isNew":834,"updated":831},"\u002Fcomponent-docs\u002Fdate-picker",{"path":2568,"isNew":837,"updated":831},"\u002Fcomponent-docs\u002Fdate-range-picker",{"path":2570,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Fdivider",{"path":2572,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Fdrawer",{"path":2574,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Fdropdown",{"path":2576,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Fempty-state",{"path":2578,"isNew":837,"updated":835},"\u002Fcomponent-docs\u002Ffield",{"path":2580,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Ffieldset",{"path":2582,"isNew":837,"updated":835},"\u002Fcomponent-docs\u002Ffilter-bar",{"path":2584,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Ffilter-date-range",{"path":2586,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Ffilter-dropdown",{"path":2588,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Ffooter",{"path":2590,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Fheader",{"path":2592,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Ficon",{"path":2594,"isNew":834,"updated":831},"\u002Fcomponent-docs\u002Finput",{"path":2596,"isNew":837,"updated":835},"\u002Fcomponent-docs\u002Fitem",{"path":2598,"isNew":837,"updated":835},"\u002Fcomponent-docs\u002Fkbd",{"path":2600,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Flayout",{"path":2602,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Fmessage",{"path":2604,"isNew":837,"updated":835},"\u002Fcomponent-docs\u002Fmeter",{"path":2606,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Fmodal",{"path":2608,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Fnavigation",{"path":2610,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Fnotification",{"path":2612,"isNew":837,"updated":831},"\u002Fcomponent-docs\u002Fnumber-field",{"path":2614,"isNew":837,"updated":831},"\u002Fcomponent-docs\u002Fotp-field",{"path":2616,"isNew":837,"updated":835},"\u002Fcomponent-docs\u002Foutline",{"path":2618,"isNew":837,"updated":835},"\u002Fcomponent-docs\u002Fpagination",{"path":2620,"isNew":834,"updated":831},"\u002Fcomponent-docs\u002Fpopout",{"path":2622,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Fprogress",{"path":2624,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Fprogress-bar",{"path":2626,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Fqrcode",{"path":2628,"isNew":834,"updated":831},"\u002Fcomponent-docs\u002Fradio",{"path":2630,"isNew":834,"updated":831},"\u002Fcomponent-docs\u002Frange",{"path":2632,"isNew":837,"updated":835},"\u002Fcomponent-docs\u002Fscroll-area",{"path":2634,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Fsegmented-control",{"path":2636,"isNew":834,"updated":831},"\u002Fcomponent-docs\u002Fselect",{"path":2638,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Fskeleton",{"path":2640,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Fspinner",{"path":2642,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Fstack",{"path":2644,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Ftab",{"path":2646,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Ftable",{"path":2648,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Ftag",{"path":2650,"isNew":834,"updated":831},"\u002Fcomponent-docs\u002Ftextarea",{"path":2652,"isNew":837,"updated":831},"\u002Fcomponent-docs\u002Ftime-picker",{"path":2654,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Ftoast",{"path":2656,"isNew":834,"updated":831},"\u002Fcomponent-docs\u002Ftoggle",{"path":2658,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Ftooltip",{"path":2660,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Ftop-bar",{"path":2662,"isNew":837,"updated":835},"\u002Fcomponent-docs\u002Ftruncate",{"path":2664,"isNew":834,"updated":835},"\u002Fcomponent-docs\u002Fvisually-hidden",1783350290620]