[{"data":1,"prerenderedAt":2776},["ShallowReactive",2],{"updates-july-2026-alpha-components":3,"$fEjZpFH0sX5lf9r5DqHjpE5W7CJ1Rj0Oiu25ygAOvmSk":176,"$f8f5lnJ37FCtouC_Q-20Y_lk47T8QT59vG2H3NVA0ikU":540,"$fH8KF6TaNm7Prkw5PjE_U_K0_jhwqU4rL9IgcxTR8qEY":655,"example-stories-data-table-filter-bar":1382,"example-stories-chat":1404,"example-stories-timestamp":1759,"$fsnSGTjxJbwbyeIKGKRLM1aZyvHCO750tb-yYxbPAr8k":1804,"shiki--updates-july-2026-alpha-components-v-0-0-1-4-3":154,"shiki--updates-july-2026-alpha-components-v-0-0-1-6-3":154,"shiki--updates-july-2026-alpha-components-v-0-0-1-8-3":154,"shiki--updates-july-2026-alpha-components-v-0-0-1-10-3":154,"shiki--updates-july-2026-alpha-components-v-0-0-1-13-3":154,"shiki--updates-july-2026-alpha-components-v-0-0-1-15-3":154,"shiki--updates-july-2026-alpha-components-v-0-0-1-17-3":154,"shiki--updates-july-2026-alpha-components-v-0-0-1-20-3":154,"shiki--updates-july-2026-alpha-components-v-0-0-1-22-3":154,"sidebar-component-doc-meta":1820,"$fx0KBVvEgIeiEV9EkX1AURRdQeozNw-G7x_XSmfA1P-0":2011,"example-stories-chart":2243,"example-stories-data-table":2273,"example-stories-rich-text-editor":2533,"example-stories-input-group":2613,"example-stories-overflow-list":2691,"example-stories-resizable":2739},{"id":4,"title":5,"author":6,"body":7,"date":161,"description":162,"extension":163,"external":164,"icon":165,"keywords":165,"meta":166,"native":164,"navTitle":165,"navigation":167,"path":171,"railLabel":165,"seo":172,"sidebar":164,"sitemap":173,"stem":174,"url":165,"__hash__":175},"updates\u002Fupdates\u002Fjuly-2026-alpha-components.md","Nine Alpha Component Families for Product Interfaces","Joseph Anson and João Gonçalves",{"type":8,"value":9,"toc":153},"minimark",[10,17,20,25,33,39,46,51,58,62,69,74,78,85,90,97,101,108,112,116,123,127,134,138,142,145],[11,12,13],"nord-intro",{},[14,15,16],"p",{},"Nord 5.1 introduces nine alpha component families for the product interfaces teams build most often: data-heavy workspaces, conversational flows, editing surfaces, and responsive layouts.",[14,18,19],{},"The release is deliberately marked alpha. These components are ready for early product adoption and feedback, but their APIs may evolve as teams use them in production-shaped interfaces. Existing stable components keep their current APIs.",[21,22,24],"h2",{"id":23},"build-richer-data-and-content-surfaces","Build richer data and content surfaces",[14,26,27,32],{},[28,29,31],"a",{"href":30},"\u002Fcomponents\u002Fchart\u002F","Chart"," provides composable cartesian and circular visualizations: line, area, grouped bar, stacked bar, pie, donut, axes, legends, tooltips, and crosshairs. It includes an accessible data alternative and loads the rendering pieces a composition actually needs.",[34,35],"example-usage",{"component":36,"name":37,"story":38},"chart","Grouped bar chart","GroupedBar",[14,40,41,45],{},[28,42,44],{"href":43},"\u002Fcomponents\u002Fdata-table\u002F","Data Table"," provides a headless, virtualized table foundation with sorting, filtering, selection, column sizing, pinning, and row expansion.",[34,47],{"component":48,"name":49,"story":50},"data-table","Data Table overview","Overview",[14,52,53,57],{},[28,54,56],{"href":55},"\u002Fcomponents\u002Fdata-table-filter-bar\u002F","Data Table Filter Bar"," adds composable controls for building table query interfaces.",[34,59],{"component":60,"name":61,"story":50},"data-table-filter-bar","Data Table Filter Bar overview",[14,63,64,68],{},[28,65,67],{"href":66},"\u002Fcomponents\u002Frich-text-editor\u002F","Rich Text Editor"," provides editor, toolbar, command, and content primitives backed by TipTap, so products can compose the editing controls they need rather than inherit one fixed toolbar.",[34,70],{"component":71,"name":72,"story":73},"rich-text-editor","Rich Text Editor overview","Basic",[21,75,77],{"id":76},"build-conversation-and-workflow-interfaces","Build conversation and workflow interfaces",[14,79,80,84],{},[28,81,83],{"href":82},"\u002Fcomponents\u002Fchat\u002F","Chat"," provides message lists, bubbles, metadata, system messages, composer input, attachments, tokens, tool calls, dictation controls, and scroll-to-latest behaviour. It supplies the interaction structure while applications retain ownership of data, permissions, and submission.",[34,86],{"component":87,"name":88,"story":89},"chat","Chat panel","ChatPanelView",[14,91,92,96],{},[28,93,95],{"href":94},"\u002Fcomponents\u002Finput-group\u002F","Input Group"," composes controls with add-ons and shared sizing, making compact search, currency, and inline-action fields easier to build consistently.",[34,98],{"component":99,"name":100,"story":50},"input-group","Input Group overview",[14,102,103,107],{},[28,104,106],{"href":105},"\u002Fcomponents\u002Foverflow-list\u002F","Overflow List"," keeps a constrained row useful by moving excess items into an accessible menu instead of letting the layout wrap or clip unpredictably.",[34,109],{"component":110,"name":111,"story":50},"overflow-list","Overflow List overview",[21,113,115],{"id":114},"adapt-layouts-without-local-one-off-patterns","Adapt layouts without local one-off patterns",[14,117,118,122],{},[28,119,121],{"href":120},"\u002Fcomponents\u002Fresizable\u002F","Resizable"," provides keyboard-accessible, composable resize handles and panels for split views.",[34,124],{"component":125,"name":126,"story":50},"resizable","Resizable overview",[14,128,129,133],{},[28,130,132],{"href":131},"\u002Fcomponents\u002Ftimestamp\u002F","Timestamp"," presents dates and times with locale-aware formatting and clear semantic markup.",[34,135],{"component":136,"name":137,"story":50},"timestamp","Timestamp overview",[21,139,141],{"id":140},"try-alpha-components-deliberately","Try alpha components deliberately",[14,143,144],{},"Start with a bounded screen or feature where your team can give feedback quickly. Keep the component imports explicit, follow the composition examples in each component page, and retain visual-regression coverage around the states that matter to your product. We will use that feedback to stabilize APIs before these families graduate from alpha.",[14,146,147,148,152],{},"For exact version details, see the ",[28,149,151],{"href":150},"\u002Fchangelogs\u002F","Web Components changelog",".",{"title":154,"searchDepth":155,"depth":155,"links":156},"",2,[157,158,159,160],{"id":23,"depth":155,"text":24},{"id":76,"depth":155,"text":77},{"id":114,"depth":155,"text":115},{"id":140,"depth":155,"text":141},"2026-07-29","Nord 5.1 adds alpha components for charts, conversations, data tables, rich-text editing, layout, and responsive content management.","md",false,null,{"editable":167,"tags":168},true,[169,170],"post","docs-updates","\u002Fupdates\u002Fjuly-2026-alpha-components",{"title":5,"description":162},{"loc":171},"updates\u002Fjuly-2026-alpha-components","LALTP-XVx06JeV4tDMB-jm8pUalMoNiuZjRIexJkpq4",[177,372,488,506],{"title":178,"children":179,"path":370,"stem":371,"page":164},"Docs",[180,282],{"path":181,"title":182,"icon":183,"keywords":184,"children":185},"\u002Fdocs\u002Fdeveloper","Developer","file-code","docs developer start install setup web components ai faq",[186,190,195,200,204,208,250,272,277],{"path":181,"title":187,"icon":188,"keywords":189},"Getting started","navigation-dashboard","docs start install setup npm",{"path":191,"title":192,"icon":193,"keywords":194},"\u002Fdocs\u002Fdeveloper\u002Fweb-components","Using Web Components","generic-module","web components setup install usage custom elements",{"path":196,"title":197,"icon":198,"keywords":199},"\u002Fdocs\u002Fdeveloper\u002Fwebfonts","Webfonts","interface-content-book","fonts typography webfonts",{"path":201,"title":202,"icon":193,"keywords":203},"\u002Fdocs\u002Fdeveloper\u002Fcdn","CDN","cdn package delivery script link",{"path":205,"title":206,"icon":198,"keywords":207},"\u002Fdocs\u002Fdeveloper\u002Flocalization","Localization","localization translation rtl ltr",{"path":209,"title":210,"icon":183,"keywords":211,"badge":212,"children":213},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework","CSS Framework","css framework legacy utilities","legacy",[214,217,220,223,226,229,232,235,238,241,244,247],{"path":215,"title":216},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#installation","Installation",{"path":218,"title":219},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#usage","Usage",{"path":221,"title":222},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#utilities","Utilities",{"path":224,"title":225},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#reset-utility","Reset Utility",{"path":227,"title":228},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#typographic-utilities","Typographic Utilities",{"path":230,"title":231},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#font-size-utilities","Font Size Utilities",{"path":233,"title":234},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#color-utilities","Color Utilities",{"path":236,"title":237},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#border-utilities","Border Utilities",{"path":239,"title":240},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#box-shadow-utilities","Box Shadow Utilities",{"path":242,"title":243},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#grid-and-container-utilities","Grid & Container Utilities",{"path":245,"title":246},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#spacing-utilities","Spacing Utilities",{"path":248,"title":249},"\u002Fdocs\u002Fdeveloper\u002Fcss-framework\u002F#css-custom-properties","CSS Custom Properties",{"path":251,"title":252,"icon":253,"keywords":254,"children":255},"\u002Fdocs\u002Fdeveloper\u002Feslint","ESLint Plugin","interface-checked","eslint lint rules css tailwind",[256,258,260,263,266,269],{"path":257,"title":216},"\u002Fdocs\u002Fdeveloper\u002Feslint\u002F#installation",{"path":259,"title":219},"\u002Fdocs\u002Fdeveloper\u002Feslint\u002F#usage",{"path":261,"title":262},"\u002Fdocs\u002Fdeveloper\u002Feslint\u002F#nord-rules","Nord Rules",{"path":264,"title":265},"\u002Fdocs\u002Fdeveloper\u002Feslint\u002F#tailwind-rules","Tailwind Rules",{"path":267,"title":268},"\u002Fdocs\u002Fdeveloper\u002Feslint\u002F#custom-configuration","Custom Configuration",{"path":270,"title":271},"\u002Fdocs\u002Fdeveloper\u002Feslint\u002F#class-detection","Class Detection",{"path":273,"title":274,"icon":275,"keywords":276},"\u002Fdocs\u002Fdeveloper\u002Fworking-with-ai","Working with AI","interface-ai","ai llms skills agents",{"path":278,"title":279,"icon":280,"keywords":281},"\u002Fdocs\u002Fdeveloper\u002Ffaq","FAQ","interface-help","questions answers support",{"path":283,"title":284,"icon":198,"keywords":285,"children":286},"\u002Fdesign","Design","design foundations themes brand tools figma",[287,289,323,360,365],{"path":283,"title":187,"icon":188,"keywords":288},"design start foundations figma",{"path":290,"title":291,"icon":198,"keywords":292,"children":293},"\u002Fdesign\u002Ffoundations","Foundations","principles accessibility colors typography grid naming",[294,297,300,302,305,308,311,314,317,320],{"path":295,"title":296},"\u002Fdesign\u002Ffoundations\u002Faccessibility-checklist","Accessibility",{"path":298,"title":299},"\u002Fdesign\u002Ffoundations\u002Fcolors","Color System",{"path":301,"title":234},"\u002Fdesign\u002Ffoundations\u002Fcolor-utilities",{"path":303,"title":304},"\u002Fdesign\u002Ffoundations\u002Fprinciples","Principles",{"path":306,"title":307},"\u002Fdesign\u002Ffoundations\u002Ffigma","Figma Toolkit",{"path":309,"title":310},"\u002Fdesign\u002Ffoundations\u002Fgrid","Grid",{"path":312,"title":313},"\u002Fdesign\u002Ffoundations\u002Ficonography","Iconography",{"path":315,"title":316},"\u002Fdesign\u002Ffoundations\u002Fnaming","Naming",{"path":318,"title":319},"\u002Fdesign\u002Ffoundations\u002Fbrand","Nordhealth Brand",{"path":321,"title":322},"\u002Fdesign\u002Ffoundations\u002Ftypography","Typography",{"path":324,"title":325,"icon":326,"keywords":327,"children":328},"\u002Fdesign\u002Fthemes","Themes","interface-mode-light","themes brand dark light contrast",[329,331,333,336,339,342,345,348,351,354,357],{"path":330,"title":50},"#top",{"path":332,"title":216},"#installation",{"path":334,"title":335},"#available-themes","Available Themes",{"path":337,"title":338},"#examples","Examples",{"path":340,"title":341},"#dark-mode","Dark Mode",{"path":343,"title":344},"#creating-themes","Creating Themes",{"path":346,"title":347},"#accent-color","Accent Color",{"path":349,"title":350},"#top-bar-theming","Top Bar theming",{"path":352,"title":353},"#logo-usage","Logo Usage",{"path":355,"title":356},"#theming-in-figma","Theming in Figma",{"path":358,"title":359},"#theme-builder","Theme Builder",{"path":361,"title":362,"icon":363,"keywords":364},"\u002Fdesign\u002Fassets","Brand assets","interface-attachment","assets downloads logo brand figma",{"path":366,"title":367,"icon":368,"keywords":369},"\u002Fdesign\u002Ftools","Tools","navigation-settings","tools color generator theme builder accessibility checklist","\u002Fdocs","docs",{"title":373,"children":374,"path":486,"stem":487},"Core",[375,380,418,466,471,476,481],{"path":376,"title":377,"icon":378,"keywords":379},"\u002Fcomponents","Components","interface-grid","components web components reference api examples",{"path":381,"title":382,"icon":383,"keywords":384,"children":385},"\u002Fcore\u002Ftokens","Design Tokens","interface-tag","tokens variables color space typography",[386,389,392,395,398,401,404,407,410,413,416],{"path":387,"title":388},"#color","Color",{"path":390,"title":391},"#border-radius","Border Radius",{"path":393,"title":394},"#box-shadow","Box Shadow",{"path":396,"title":397},"#font-size","Font Size",{"path":399,"title":400},"#font","Font",{"path":402,"title":403},"#line-height","Line Height",{"path":405,"title":406},"#size","Size",{"path":408,"title":409},"#space","Space",{"path":411,"title":412},"#transition","Transition",{"path":414,"title":415},"#z-index","Z-index",{"path":417,"title":219},"#usage",{"path":419,"title":420,"icon":421,"keywords":422,"children":423},"\u002Fcore\u002Fcss\u002Ftailwind","Tailwind CSS","interface-edit","tailwind utilities css tokens",[424,426,428,431,434,437,440,443,446,449,452,455,458,460,463],{"path":425,"title":216},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#installation",{"path":427,"title":219},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#usage",{"path":429,"title":430},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#peer-dependencies","Peer Dependencies",{"path":432,"title":433},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#theme-variables","Theme Variables",{"path":435,"title":436},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#logical-properties","Logical Properties",{"path":438,"title":439},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#typography-examples","Typography Examples",{"path":441,"title":442},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#color-examples","Color Examples",{"path":444,"title":445},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#border-examples","Border Examples",{"path":447,"title":448},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#shadow-examples","Shadow Examples",{"path":450,"title":451},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#miscellaneous-utilities","Miscellaneous Utilities",{"path":453,"title":454},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#nord-components","Nord Components",{"path":456,"title":457},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#form-utilities","Form Utilities",{"path":459,"title":310},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#grid",{"path":461,"title":462},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#states-hover-focus-etc","States (Hover, Focus, etc.)",{"path":464,"title":465},"\u002Fcore\u002Fcss\u002Ftailwind\u002F#extending-the-theme","Extending the Theme",{"path":467,"title":468,"icon":469,"keywords":470},"\u002Fblocks","Blocks","interface-table","blocks patterns sections examples",{"path":472,"title":473,"icon":474,"keywords":475},"\u002Ftemplates","Templates","navigation-catalog","templates pages layouts examples",{"path":477,"title":478,"icon":479,"keywords":480},"\u002Ficons","Icons","interface-bookmark","icons nordicons symbols",{"path":482,"title":483,"icon":484,"native":167,"keywords":485},"\u002Fstorybook","Playground","interface-play","playground storybook examples","\u002Fcore","core",{"title":489,"path":490,"stem":491,"children":492},"Updates","\u002Fupdates","updates\u002Findex",[493,497,502],{"path":490,"title":494,"icon":495,"keywords":496},"Latest Updates","file-notes","latest updates blog announcements news",{"path":498,"title":499,"icon":500,"keywords":501},"\u002Fchangelogs","Changelog","text-list","changelog releases packages versions",{"path":503,"title":504,"icon":183,"keywords":505},"\u002Fmigrations","Migration guides","migrations upgrade guides breaking changes",{"title":507,"children":508,"path":538,"stem":539},"Resources",[509,514,518,522,526,530,534],{"path":510,"title":511,"icon":512,"keywords":513},"\u002Fresources\u002Fabout","About the design system","interface-info","about nord design system team goals",{"path":515,"title":516,"icon":280,"keywords":517},"\u002Fresources\u002Fsupport","Support","help feedback support slack office hours status",{"path":519,"title":520,"icon":421,"keywords":521},"\u002Fresources\u002Fcontributing","Contributing","contributing contribution proposal process",{"path":523,"title":524,"icon":500,"keywords":525},"\u002Fresources\u002Fbacklog-prioritization","Backlog prioritization","backlog prioritization roadmap requests",{"path":527,"title":528,"icon":280,"keywords":529},"\u002Fresources\u002Faccessibility-statement","Accessibility statement","accessibility statement wcag website",{"path":531,"title":532,"icon":512,"keywords":533},"\u002Fresources\u002Fcareers","Careers","careers jobs team",{"path":535,"title":536,"icon":495,"keywords":537},"\u002Fresources\u002Fterms","Terms of use","terms legal license usage","\u002Fresources","resources",[541,604,641,646],{"title":178,"children":542,"path":370,"stem":371,"page":164},[543,574],{"path":181,"title":182,"icon":183,"keywords":184,"children":544},[545,546,547,548,549,550,564,572,573],{"path":181,"title":187,"icon":188,"keywords":189},{"path":191,"title":192,"icon":193,"keywords":194},{"path":196,"title":197,"icon":198,"keywords":199},{"path":201,"title":202,"icon":193,"keywords":203},{"path":205,"title":206,"icon":198,"keywords":207},{"path":209,"title":210,"icon":183,"keywords":211,"badge":212,"children":551},[552,553,554,555,556,557,558,559,560,561,562,563],{"path":215,"title":216},{"path":218,"title":219},{"path":221,"title":222},{"path":224,"title":225},{"path":227,"title":228},{"path":230,"title":231},{"path":233,"title":234},{"path":236,"title":237},{"path":239,"title":240},{"path":242,"title":243},{"path":245,"title":246},{"path":248,"title":249},{"path":251,"title":252,"icon":253,"keywords":254,"children":565},[566,567,568,569,570,571],{"path":257,"title":216},{"path":259,"title":219},{"path":261,"title":262},{"path":264,"title":265},{"path":267,"title":268},{"path":270,"title":271},{"path":273,"title":274,"icon":275,"keywords":276},{"path":278,"title":279,"icon":280,"keywords":281},{"path":283,"title":284,"icon":198,"keywords":285,"children":575},[576,577,589,602,603],{"path":283,"title":187,"icon":188,"keywords":288},{"path":290,"title":291,"icon":198,"keywords":292,"children":578},[579,580,581,582,583,584,585,586,587,588],{"path":295,"title":296},{"path":298,"title":299},{"path":301,"title":234},{"path":303,"title":304},{"path":306,"title":307},{"path":309,"title":310},{"path":312,"title":313},{"path":315,"title":316},{"path":318,"title":319},{"path":321,"title":322},{"path":324,"title":325,"icon":326,"keywords":327,"children":590},[591,592,593,594,595,596,597,598,599,600,601],{"path":330,"title":50},{"path":332,"title":216},{"path":334,"title":335},{"path":337,"title":338},{"path":340,"title":341},{"path":343,"title":344},{"path":346,"title":347},{"path":349,"title":350},{"path":352,"title":353},{"path":355,"title":356},{"path":358,"title":359},{"path":361,"title":362,"icon":363,"keywords":364},{"path":366,"title":367,"icon":368,"keywords":369},{"title":373,"children":605,"path":486,"stem":487},[606,607,620,637,638,639,640],{"path":376,"title":377,"icon":378,"keywords":379},{"path":381,"title":382,"icon":383,"keywords":384,"children":608},[609,610,611,612,613,614,615,616,617,618,619],{"path":387,"title":388},{"path":390,"title":391},{"path":393,"title":394},{"path":396,"title":397},{"path":399,"title":400},{"path":402,"title":403},{"path":405,"title":406},{"path":408,"title":409},{"path":411,"title":412},{"path":414,"title":415},{"path":417,"title":219},{"path":419,"title":420,"icon":421,"keywords":422,"children":621},[622,623,624,625,626,627,628,629,630,631,632,633,634,635,636],{"path":425,"title":216},{"path":427,"title":219},{"path":429,"title":430},{"path":432,"title":433},{"path":435,"title":436},{"path":438,"title":439},{"path":441,"title":442},{"path":444,"title":445},{"path":447,"title":448},{"path":450,"title":451},{"path":453,"title":454},{"path":456,"title":457},{"path":459,"title":310},{"path":461,"title":462},{"path":464,"title":465},{"path":467,"title":468,"icon":469,"keywords":470},{"path":472,"title":473,"icon":474,"keywords":475},{"path":477,"title":478,"icon":479,"keywords":480},{"path":482,"title":483,"icon":484,"native":167,"keywords":485},{"title":489,"path":490,"stem":491,"children":642},[643,644,645],{"path":490,"title":494,"icon":495,"keywords":496},{"path":498,"title":499,"icon":500,"keywords":501},{"path":503,"title":504,"icon":183,"keywords":505},{"title":507,"children":647,"path":538,"stem":539},[648,649,650,651,652,653,654],{"path":510,"title":511,"icon":512,"keywords":513},{"path":515,"title":516,"icon":280,"keywords":517},{"path":519,"title":520,"icon":421,"keywords":521},{"path":523,"title":524,"icon":500,"keywords":525},{"path":527,"title":528,"icon":280,"keywords":529},{"path":531,"title":532,"icon":512,"keywords":533},{"path":535,"title":536,"icon":495,"keywords":537},[656,679,693,698,703,708,712,717,721,725,742,786,850,854,867,880,889,903,907,911,915,936,954,958,999,1003,1036,1040,1044,1048,1052,1061,1102,1111,1115,1119,1123,1144,1162,1171,1175,1179,1188,1201,1230,1234,1238,1242,1246,1250,1254,1266,1287,1291,1300,1304,1308,1312,1316,1329,1333,1342,1346,1350,1353,1362,1366,1370,1374,1378],{"name":657,"tagName":658,"description":659,"category":660,"status":661,"isNew":164,"lightDom":167,"parts":662},"Accordion","nord-accordion","Accordion is a set of collapsible sections, each with a header that toggles\nthe visibility of its content. It coordinates a group of\nAccordion Item elements, keyboard focus\nmovement between them, and which items are open.","container","ready",[663,667,671,675],{"name":664,"tagName":665,"description":666},"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":668,"tagName":669,"description":670},"AccordionItem","nord-accordion-item","Accordion Item groups an Accordion Header and\nits Accordion Panel within an\nAccordion.",{"name":672,"tagName":673,"description":674},"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":676,"tagName":677,"description":678},"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":680,"tagName":681,"description":682,"category":683,"status":661,"isNew":164,"lightDom":164,"parts":684},"Aside","nord-aside","Container for the right-side rail + drawer pattern in the app shell.","layout",[685,689],{"name":686,"tagName":687,"description":688},"AsideDrawer","nord-aside-drawer","A drawer panel inside \u003Cnord-aside>.",{"name":690,"tagName":691,"description":692},"AsideTrigger","nord-aside-trigger","Rail button that toggles a \u003Cnord-aside-drawer> inside \u003Cnord-aside>,\nor navigates like a link when href is set.",{"name":694,"tagName":695,"description":696,"category":697,"status":661,"isNew":164,"lightDom":167},"Autocomplete","nord-autocomplete","Autocomplete is a free-text input with suggestions: the text the user types\nis itself the committed value (a string), and the options are completion\naids. Picking a suggestion fills the input with the option's label and commits\nthat label. Use it when the answer is open-ended text but you can offer\nhelpful completions (a city, a tag, a username); reach for\nCombobox instead when the value must be one of a\nfixed set of options.\n\nAutocomplete is a control only — it has no built-in label, hint or error.\nCompose it inside a Field to give it a label, hint and\nerror message, the same way you would a native input.\n\nBase UI parity: Autocomplete is the Combobox primitive with\nselectionMode=\"none\" + fillInputOnItemPress.","form",{"name":699,"tagName":700,"description":701,"category":702,"status":661,"isNew":164,"lightDom":164},"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":704,"tagName":705,"description":706,"category":707,"status":661,"isNew":164,"lightDom":164},"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":709,"tagName":710,"description":711,"category":707,"status":661,"isNew":164,"lightDom":164},"Banner","nord-banner","Banner informs users about important changes or conditions in the\ninterface. Use this component if you need to communicate to users\nin a prominent way.",{"name":713,"tagName":714,"description":715,"category":716,"status":661,"isNew":164,"lightDom":164},"Button","nord-button","Buttons are used for interface actions. Primary style should be\nused only once per section for main call-to-action, while other\nstyles can appear more frequently.","action",{"name":718,"tagName":719,"description":720,"category":716,"status":661,"isNew":164,"lightDom":164},"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":722,"tagName":723,"description":724,"category":697,"status":661,"isNew":164,"lightDom":164},"Calendar","nord-calendar","Calendar allows user to pick a date. It comes with built-in\nfunctionality that allows you to set a minimum and a maximum allowed date.\nPlease note that the date must be passed in ISO-8601 format.",{"name":726,"tagName":727,"description":728,"category":660,"status":661,"isNew":164,"lightDom":164,"parts":729},"Card","nord-card","Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",[730,734,738],{"name":731,"tagName":732,"description":733},"CardBody","nord-card-body","The main content region of a composed Card. Applies the\ncard's body padding and grows to fill the available space between the\nCard Header and Card Footer.\n\nPlace it as a direct child of nord-card.",{"name":735,"tagName":736,"description":737},"CardFooter","nord-card-footer","The footer region of a composed Card. Typically holds\nactions or supplementary information.\n\nPlace it as a direct child of nord-card, after\nCard Body. Set divider to draw a separating\nborder above the footer.",{"name":739,"tagName":740,"description":741},"CardHeader","nord-card-header","The header region of a composed Card. Lays a heading and\noptional actions out in a row (heading at the start, actions at the end) and\ndraws the divider beneath the header.\n\nPlace it as a direct child of nord-card, before\nCard Body. Direct child heading elements use the\nsame typography as the legacy Card header slot.",{"name":31,"tagName":743,"description":744,"category":702,"status":661,"isNew":164,"lightDom":164,"parts":745},"nord-chart","Chart owns a renderer-independent declarative chart composition.",[746,750,754,758,762,766,770,774,778,782],{"name":747,"tagName":748,"description":749},"ChartArea","nord-chart-area","Chart Area emphasizes magnitude as well as change.",{"name":751,"tagName":752,"description":753},"ChartAxis","nord-chart-axis","Chart Axis describes one Cartesian axis.",{"name":755,"tagName":756,"description":757},"ChartCrosshair","nord-chart-crosshair","Chart Crosshair enables the supported Cartesian crosshair interaction.",{"name":759,"tagName":760,"description":761},"ChartDonut","nord-chart-donut","Chart Donut shows a part-to-whole comparison around a centre.",{"name":763,"tagName":764,"description":765},"ChartGroupedBar","nord-chart-grouped-bar","Chart Grouped Bar compares multiple values side by side.",{"name":767,"tagName":768,"description":769},"ChartLegend","nord-chart-legend","Chart Legend configures semantic legend presentation for a Chart.",{"name":771,"tagName":772,"description":773},"ChartLine","nord-chart-line","Chart Line shows change over an ordered Cartesian scale.",{"name":775,"tagName":776,"description":777},"ChartPie","nord-chart-pie","Chart Pie shows a small part-to-whole comparison.",{"name":779,"tagName":780,"description":781},"ChartStackedBar","nord-chart-stacked-bar","Chart Stacked Bar compares contributions to a total.",{"name":783,"tagName":784,"description":785},"ChartTooltip","nord-chart-tooltip","Chart Tooltip configures supplementary pointer content.",{"name":83,"tagName":787,"description":788,"category":683,"status":661,"isNew":164,"lightDom":167,"parts":789},"nord-chat","Chat owns scroll behavior and positioning while leaving messages,\nempty content, composer, and scroll affordance in consumer DOM order.",[790,794,798,802,806,810,814,818,822,826,830,834,838,842,846],{"name":791,"tagName":792,"description":793},"ChatAttachment","nord-chat-attachment","An image or file attached to a message, in the composer before sending and in\nthe message log after. Files render as a compact pill in both places; images\nrender as a small thumbnail in the composer and a captioned card in a\nmessage, because a pending upload and a delivered one are read differently.\n\nPresentation follows placement, so the same markup works in either position.\nremovable adds the remove action; a sent attachment is a record, so it is\nnormally left off in the message log.",{"name":795,"tagName":796,"description":797},"ChatComposer","nord-chat-composer","Framework-neutral chat composition shell with controlled\u002Funcontrolled value,\nform submission, send\u002Fstop state, and named light-DOM composition regions.\n\nThe component never re-renders consumer nodes. Use slot values drawer,\nheader-actions, header-context, input, footer-actions, send-actions,\nand send-button to document each direct child's role. Source order remains\nthe semantic and keyboard order in every framework.",{"name":799,"tagName":800,"description":801},"ChatComposerDrawer","nord-chat-composer-drawer","Collapsible Composer region for attachments, feedback, progress, or context.\nConsumer nodes remain direct children so framework renderers retain ownership\nof their DOM relationships. The host itself is the disclosure region.\n\nThe disclosure is intentionally a native button: Nord Button does not expose\naria-controls on its shadow-owned control, which this composite requires.",{"name":803,"tagName":804,"description":805},"ChatComposerInput","nord-chat-composer-input","Form-associated, framework-neutral rich plain-text input. Tokens are atomic,\ntrigger sources may be synchronous or asynchronous, and consumer strings are\nnever parsed as HTML. Native input bubbles for every user-visible change;\nchange commits on blur.",{"name":807,"tagName":808,"description":809},"ChatDictationButton","nord-chat-dictation-button","Starts and stops speech-to-text capture for a chat composer. Speech can be\nsent to a browser or platform recognition service: disclose that privacy\nbehavior, request microphone access only after the user's activation, and do\nnot start capture automatically. Always retain keyboard text entry as the\nfallback when Web Speech is unsupported or permission is denied.\n\nEvery final transcript emits nord-dictation-result. Composer integration\nshould listen for that event and call Composer Input's public insertText()\nmethod; this component never reaches through another element's Shadow DOM.\nThe same methods and bubbling events work from plain HTML, React, Vue, Svelte,\nAngular, or any other DOM-capable framework.",{"name":811,"tagName":812,"description":813},"ChatLayoutScrollButton","nord-chat-layout-scroll-button","Chat Layout Scroll Button composes the existing Nord Button and Nord Icon to\nreturn the reader to the newest content. It can inherit visibility and\nnew-message state from Chat.",{"name":815,"tagName":816,"description":817},"ChatMessage","nord-chat-message","Chat Message groups one speaker's avatar, name, bubbles, and metadata without\ntaking ownership of consumer-authored message content.",{"name":819,"tagName":820,"description":821},"ChatMessageBubble","nord-chat-message-bubble","Chat Message Bubble styles one consumer-owned message fragment using sender\nand density values inherited privately from Chat Message.",{"name":823,"tagName":824,"description":825},"ChatMessageList","nord-chat-message-list","Chat Message List is an accessible conversation log which preserves direct\nconsumer children and coordinates loading older messages with Chat.",{"name":827,"tagName":828,"description":829},"ChatMessageMetadata","nord-chat-message-metadata","Chat Message Metadata presents optional timestamps, delivery state, footer\ncontent, and actions without recreating consumer-owned controls.",{"name":831,"tagName":832,"description":833},"ChatSendButton","nord-chat-send-button","Nord Button-based send\u002Fstop action for standalone use or Composer coordination.",{"name":835,"tagName":836,"description":837},"ChatSystemMessage","nord-chat-system-message","Chat System Message separates or announces conversation status updates.",{"name":839,"tagName":840,"description":841},"ChatToken","nord-chat-token","An atomic visual token used by Composer Input and Tokenized Text. It is\nnamed for what it is rather than where it started: the composer is one host,\nnot the only one.\nConsumer children remain in the light DOM; the component only owns its\noptional generated label and remove button.\nThe remove action stays native because this atomic control is embedded inside\na contenteditable composite; Nord Button's form proxy and shadow control are\ninappropriate in that editing surface. Its glyph reuses Nord Icon.",{"name":843,"tagName":844,"description":845},"ChatTokenizedText","nord-chat-tokenized-text","Safely reconstructs known Composer Tokens from a canonical serialized string.\nIt creates only text nodes and token elements and never parses consumer HTML.\nConsumer children are left untouched. When both meaningful consumer content\nand value exist, consumer content wins so output is never duplicated.\nToken values match only at word\u002Fmarker boundaries, never inside larger words.",{"name":847,"tagName":848,"description":849},"ChatToolCalls","nord-chat-tool-calls","Displays ordered LLM tool or function calls. One call stays inline; multiple\ncalls use a summary disclosure whose collapsed surface includes the latest\nactivity. Result nodes remain consumer-owned and are never scoped or cloned.\n\nPrefer stable key values during streaming, provide a useful target, show\ndurations only after completion, and include visible errorMessage text.\nConsumers localize fixed status\u002Fsummary strings through Nord translations.",{"name":851,"tagName":852,"description":853,"category":697,"status":661,"isNew":164,"lightDom":164},"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":855,"tagName":856,"description":857,"category":660,"status":661,"isNew":164,"lightDom":167,"parts":858},"Collapsible","nord-collapsible","Collapsible is a disclosure that shows or hides a section of content. It wires\ntogether a Collapsible Trigger and a\nCollapsible Panel, animating the panel\nheight as it opens and closes.",[859,863],{"name":860,"tagName":861,"description":862},"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":864,"tagName":865,"description":866},"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":868,"tagName":869,"description":870,"category":697,"status":661,"isNew":164,"lightDom":167,"parts":871},"Combobox","nord-combobox","Combobox lets users choose one option (or several) from a list by typing to\nfilter, then picking with the keyboard or pointer. Use it when a Select\nwould be unwieldy because there are many options to scan.\n\nCombobox is a control only — it has no built-in label, hint or error. Compose\nit inside a Field to give it a label, hint and error\nmessage, the same way you would a native input.\n\nThe committed value is an option's value (or an array of them with\nmultiple); the input is a filter\u002Fsearch field whose text is discarded on\ncommit. For a free-text input with suggestions where the typed text is the\nvalue, use Autocomplete instead.",[872,876],{"name":873,"tagName":874,"description":875},"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":877,"tagName":878,"description":879},"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":881,"tagName":882,"description":883,"category":716,"status":661,"isNew":164,"lightDom":164,"parts":884},"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.",[885],{"name":886,"tagName":887,"description":888},"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":890,"tagName":891,"description":892,"category":893,"status":661,"isNew":164,"lightDom":164,"parts":894},"DataTable","nord-data-table","Data Table renders tabular data from a TanStack column model with sorting,\nselection, pagination and filtering. It is **controlled and headless**: feed\nit columns, data and state and react to its *-change events — it owns\nno data fetching, serialization or persistence. Filters and pagination are\ndeclared as config (filters, pagination) and rendered by the table.\n\nConsumer content for the slots below is captured from light-DOM slot=\"…\"\nchildren and re-projected into the rendered table (this element is light-DOM,\nso native \u003Cslot> projection isn't available).","list",[895,899],{"name":896,"tagName":897,"description":898},"DataTableBulkActions","nord-data-table-bulk-actions","Actions for a Data Table's bulk-selection state.\nPlace it as a direct child of nord-data-table and put your action buttons\ninside; the table captures it and renders it in the header-row takeover that\nappears while rows are selected (next to the \"N selected\" count).\n\nIt's a light-DOM marker (styled display: contents by the parent table) — it\nhosts your controls without adding a box, so they sit inline in the takeover.",{"name":900,"tagName":901,"description":902},"DataTableFilterBar","nord-data-table-filter-bar","Data Table Filter Bar renders a row of filter controls from a declarative\nfilters config — the filter equivalent of a column model. Each descriptor\nmaps to the matching nord-filter-* control; the bar tracks the value map and\nemits a single filters-change event. It owns no data fetching or\nserialization. Used embedded by Data Table, or\nstandalone (bind to a table via for=).",{"name":904,"tagName":905,"description":906,"category":697,"status":661,"isNew":164,"lightDom":164},"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":908,"tagName":909,"description":910,"category":697,"status":661,"isNew":164,"lightDom":167},"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":912,"tagName":913,"description":914,"category":683,"status":661,"isNew":164,"lightDom":164},"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":916,"tagName":917,"description":918,"category":683,"status":661,"isNew":164,"lightDom":164,"parts":919},"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.",[920,924,928,932],{"name":921,"tagName":922,"description":923},"DrawerBody","nord-drawer-body","The main content region of a composed Drawer. This is\nthe scrolling zone between the fixed header and footer; the drawer's padding\nattribute applies here.\n\nIt occupies the drawer's default slot, so place it as a direct child of\nnord-drawer (no slot attribute).",{"name":925,"tagName":926,"description":927},"DrawerClose","nord-drawer-close","A standalone close control for a composed Drawer.\n\nWhen left empty it renders a default close icon button. Give it your own\ncontrol and it becomes a transparent wrapper that removes the nearest\nnord-drawer when clicked.",{"name":929,"tagName":930,"description":931},"DrawerFooter","nord-drawer-footer","The footer region of a composed Drawer. A fixed zone at\nthe bottom of the drawer, typically holding actions.\n\nAuto-assigns itself to the drawer's footer slot, so place it as a direct\nchild of nord-drawer (no slot attribute needed).",{"name":933,"tagName":934,"description":935},"DrawerHeader","nord-drawer-header","The header region of a composed Drawer. A fixed zone\nat the top of the drawer; bring your own heading element or use it directly\nfor a title.\n\nAuto-assigns itself to the drawer's header slot, so place it as a direct\nchild of nord-drawer (no slot attribute needed).",{"name":937,"tagName":938,"description":939,"category":940,"status":661,"isNew":164,"lightDom":164,"parts":941},"Dropdown","nord-dropdown","Dropdown menu displays a list of actions or selectable options for\na user. Dropdown uses popout component internally to create\nthe overlay functionality.","overlay",[942,946,950],{"name":943,"tagName":944,"description":945},"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":947,"tagName":948,"description":949},"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":951,"tagName":952,"description":953},"DropdownSubmenu","nord-dropdown-submenu","Dropdown submenu nests a secondary menu within a parent dropdown.",{"name":955,"tagName":956,"description":957,"category":707,"status":661,"isNew":164,"lightDom":164},"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":959,"tagName":960,"description":961,"category":697,"status":661,"isNew":164,"lightDom":167,"parts":962},"Field","nord-field","Field is the wrapper for a single form control. It lays out a\nField Label, a control (such as an\nInput), an optional\nField Description and a\nField Error with consistent spacing.\n\nCombine several together in a Field Group and\ngroup related groups with a Field Set.\n\nThe Field shares its state with the control through context: a Nord control\nplaced inside a Field suppresses its own built-in label\u002Fhint\u002Ferror and takes\nits accessible name, description and invalid\u002Fdisabled state from the Field.",[963,967,971,975,979,983,987,991,995],{"name":964,"tagName":965,"description":966},"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":968,"tagName":969,"description":970},"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":972,"tagName":973,"description":974},"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":976,"tagName":977,"description":978},"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":980,"tagName":981,"description":982},"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":984,"tagName":985,"description":986},"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":988,"tagName":989,"description":990},"FieldSeparator","nord-field-separator","Field Separator draws a thin divider between sections inside a\nField Group.",{"name":992,"tagName":993,"description":994},"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":996,"tagName":997,"description":998},"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":1000,"tagName":1001,"description":1002,"category":697,"status":661,"isNew":164,"lightDom":164},"Fieldset","nord-fieldset","Deprecated: for new code, group related controls with the composable Field\nfamily — see grouping fields with Field.\nnord-fieldset remains supported for backwards compatibility and is not\nscheduled for removal.\n\nFieldset is used for grouping sets of input components. It is necessary to use a\nfieldset with radio and checkbox components, and can also be useful for logically\ngrouping other types of inputs.",{"name":1004,"tagName":1005,"description":1006,"category":697,"status":661,"isNew":164,"lightDom":167,"parts":1007},"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.",[1008,1012,1016,1020,1024,1028,1032],{"name":1009,"tagName":1010,"description":1011},"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":1013,"tagName":1014,"description":1015},"FilterDate","nord-filter-date","Filter Date is a self-contained single-date **filter**: a chip that opens a\npopout containing an inline Calendar. It is the\nsingle-date counterpart to Filter Date Range\nand renders the shared filter chip 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":1017,"tagName":1018,"description":1019},"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":1021,"tagName":1022,"description":1023},"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":1025,"tagName":1026,"description":1027},"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":1029,"tagName":1030,"description":1031},"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":1033,"tagName":1034,"description":1035},"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":1037,"tagName":1038,"description":1039,"category":683,"status":661,"isNew":164,"lightDom":164},"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":1041,"tagName":1042,"description":1043,"category":683,"status":661,"isNew":164,"lightDom":164},"Header","nord-header","The header is a block of designated space for labelling the currently\nviewed context as well as providing primary actions.",{"name":1045,"tagName":1046,"description":1047,"category":702,"status":661,"isNew":164,"lightDom":164},"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":1049,"tagName":1050,"description":1051,"category":697,"status":661,"isNew":164,"lightDom":164},"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":1053,"tagName":1054,"description":1055,"category":697,"status":661,"isNew":164,"lightDom":167,"parts":1056},"InputGroup","nord-input-group","Input Group composes exactly one Nord Input or Textarea with reusable add-ons\nwhile leaving the editable control, form state, and all consumer nodes owned\nby the consumer.",[1057],{"name":1058,"tagName":1059,"description":1060},"InputGroupAddon","nord-input-group-addon","Positions reusable Nord content around the text control in an Input Group.\nIts children retain their native semantics and interaction behavior.",{"name":1062,"tagName":1063,"description":1064,"category":893,"status":661,"isNew":164,"lightDom":167,"parts":1065},"Item","nord-item","Item is a flexible, composable row used to display a piece of content such as\na person, a file or a setting. Combine it with Item Media,\nItem Content, Item Title,\nItem Description and Item Actions\nto build rich list rows. Stack several together with Item Group.\n\nTo make a whole Item act as a link, wrap it in an \u003Ca> element. The row\nhighlights on hover when wrapped this way.",[1066,1070,1074,1078,1082,1086,1090,1094,1098],{"name":1067,"tagName":1068,"description":1069},"ItemActions","nord-item-actions","Item Actions holds the trailing controls of an Item,\nsuch as buttons or a chevron.",{"name":1071,"tagName":1072,"description":1073},"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":1075,"tagName":1076,"description":1077},"ItemDescription","nord-item-description","Item Description is the secondary, muted line of text in an\nItem. It is clamped to two lines.",{"name":1079,"tagName":1080,"description":1081},"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":1083,"tagName":1084,"description":1085},"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":1087,"tagName":1088,"description":1089},"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":1091,"tagName":1092,"description":1093},"ItemMedia","nord-item-media","Item Media holds the leading visual of an Item, such as\nan icon, an avatar or an image.",{"name":1095,"tagName":1096,"description":1097},"ItemSeparator","nord-item-separator","Item Separator draws a horizontal divider between Item\nrows inside an Item Group.",{"name":1099,"tagName":1100,"description":1101},"ItemTitle","nord-item-title","Item Title is the primary line of text in an Item.",{"name":1103,"tagName":1104,"description":1105,"category":702,"status":661,"isNew":164,"lightDom":167,"parts":1106},"Kbd","nord-kbd","Kbd is used to display a keyboard key, such as a shortcut or a key the user\nshould press. Group related keys together with Kbd Group.",[1107],{"name":1108,"tagName":1109,"description":1110},"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":1112,"tagName":1113,"description":1114,"category":683,"status":661,"isNew":164,"lightDom":164},"Layout","nord-layout","Layout component is used to create the main layout of an app. Layout\ncurrently comes with one main configuration: two-column.",{"name":1116,"tagName":1117,"description":1118,"category":716,"status":661,"isNew":164,"lightDom":164},"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":1120,"tagName":1121,"description":1122,"category":707,"status":661,"isNew":164,"lightDom":167},"Meter","nord-meter","Meter is a graphical display of a numeric value within a known range,\nsuch as disk usage, a battery level or a score. Unlike Progress Bar, it\nrepresents a static measurement rather than the completion of a task.",{"name":1124,"tagName":1125,"description":1126,"category":940,"status":661,"isNew":164,"lightDom":164,"parts":1127},"Modal","nord-modal","Modal component is used to display content that temporarily blocks interactions\nwith the main view of an application. Modal should be used sparingly and\nonly when necessary.",[1128,1132,1136,1140],{"name":1129,"tagName":1130,"description":1131},"ModalBody","nord-modal-body","The main content region of a composed Modal. This is the\nscrolling zone (when the modal is scrollable) between the fixed header and\nfooter, and carries the modal's body padding.\n\nIt occupies the modal's default slot, so place it as a direct child of\nnord-modal (no slot attribute).",{"name":1133,"tagName":1134,"description":1135},"ModalClose","nord-modal-close","A standalone close control for a composed Modal.\n\nUnlike the modal's built-in close button (which is locked into the header\nzone), this part can be placed **anywhere** inside nord-modal — floated over\ncompletely custom content, dropped into a footer as a \"Cancel\" button, or\nnested inside your own layout. Clicking it dismisses the nearest\nnord-modal through the same cancelable flow as the built-in button (the\nmodal's cancel event still fires and can be prevented).\n\nWhen left empty it renders the default close \"✕\" icon button. Give it your own\ncontrol (a nord-button, button, or link) and it becomes a transparent\nwrapper that turns that control into a close trigger:\n\nThe part is unpositioned by default — place it with your own styles (the\nmodal frame is position: relative, so it is the positioning context):\n\n``html\n\u003C!-- floating icon button over custom content -->\n\u003Cnord-modal-close\n  style=\"position: absolute; inset-block-start: var(--n-space-s); inset-inline-end: var(--n-space-s)\"\n>\u003C\u002Fnord-modal-close>\n\n\u003C!-- any control becomes a close trigger -->\n\u003Cnord-modal-close>\u003Cnord-button>Cancel\u003C\u002Fnord-button>\u003C\u002Fnord-modal-close>\n``",{"name":1137,"tagName":1138,"description":1139},"ModalFooter","nord-modal-footer","The footer region of a composed Modal. A fixed zone at\nthe bottom for call-to-action buttons; stacks on narrow viewports and lays\nout as an end-aligned row on wider ones.\n\nAuto-assigns itself to the modal's footer slot, so place it as a direct\nchild of nord-modal (no slot attribute needed).",{"name":1141,"tagName":1142,"description":1143},"ModalHeader","nord-modal-header","The header region of a composed Modal. A fixed zone that\nsits beside the modal's close button; bring your own heading element.\n\nAuto-assigns itself to the modal's header slot, so place it as a direct\nchild of nord-modal (no slot attribute needed).",{"name":1145,"tagName":1146,"description":1147,"category":1148,"status":661,"isNew":164,"lightDom":164,"parts":1149},"Navigation","nord-navigation","Navigation is used to display the primary navigation in the sidebar\nof an application. Navigation includes a list of links that users\nuse to move between sections of the application.","navigation",[1150,1154,1158],{"name":1151,"tagName":1152,"description":1153},"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":1155,"tagName":1156,"description":1157},"NavItem","nord-nav-item","Navigation item populates sidebar navigation with links.\nEvery item should be placed inside a navigation group.",{"name":1159,"tagName":1160,"description":1161},"NavToggle","nord-nav-toggle","Nav toggle hides and shows the primary navigation inside \u003Cnord-layout>.",{"name":1163,"tagName":1164,"description":1165,"category":707,"status":661,"isNew":164,"lightDom":164,"parts":1166},"Notification","nord-notification","Notifications provide important information that requires action or acknowledgement.\nA notification is displayed until the user dismisses it.",[1167],{"name":1168,"tagName":1169,"description":1170},"NotificationGroup","nord-notification-group","Notification group is used to position and style a group of notifications.",{"name":1172,"tagName":1173,"description":1174,"category":697,"status":661,"isNew":164,"lightDom":167},"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":1176,"tagName":1177,"description":1178,"category":697,"status":661,"isNew":164,"lightDom":167},"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":1180,"tagName":1181,"description":1182,"category":1148,"status":661,"isNew":164,"lightDom":164,"parts":1183},"Outline","nord-outline","Outline is an in-page table of contents that lists a page's headings and\nhighlights the section currently in view as you scroll.\n\nProvide Outline Item children, or point for at\na container to build the list from its headings.",[1184],{"name":1185,"tagName":1186,"description":1187},"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":1189,"tagName":1190,"description":1191,"category":683,"status":661,"isNew":164,"lightDom":167,"parts":1192},"OverflowList","nord-overflow-list","Overflow List shows the contiguous set of direct child items that fits in\nthe available inline size and exposes the remaining items to a consumer-owned\noverflow affordance.",[1193,1197],{"name":1194,"tagName":1195,"description":1196},"OverflowListCount","nord-overflow-list-count","Displays the number of items currently hidden by the nearest Overflow List.",{"name":1198,"tagName":1199,"description":1200},"OverflowListMenu","nord-overflow-list-menu","Provides a declarative menu for actions hidden by the nearest Overflow List.",{"name":1202,"tagName":1203,"description":1204,"category":1148,"status":661,"isNew":164,"lightDom":167,"parts":1205},"Pagination","nord-pagination","Pagination is the navigation root for a paginated collection. It is\ncomposition-first: it owns no page state, renders no controls, and emits no\nevents. Your app owns the page state, URL\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.",[1206,1210,1214,1218,1222,1226],{"name":1207,"tagName":1208,"description":1209},"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":1211,"tagName":1212,"description":1213},"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":1215,"tagName":1216,"description":1217},"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":1219,"tagName":1220,"description":1221},"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":1223,"tagName":1224,"description":1225},"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":1227,"tagName":1228,"description":1229},"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":1231,"tagName":1232,"description":1233,"category":940,"status":661,"isNew":164,"lightDom":164},"Popout","nord-popout","Popouts are small overlays that open on demand. They let users access additional content and actions without cluttering the page.",{"name":1235,"tagName":1236,"description":1237,"category":707,"status":661,"isNew":164,"lightDom":164},"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":1239,"tagName":1240,"description":1241,"category":707,"status":661,"isNew":164,"lightDom":164},"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":1243,"tagName":1244,"description":1245,"category":702,"status":661,"isNew":164,"lightDom":164},"Qrcode","nord-qrcode","QR Code component is used for providing information or links\nto users which they can quickly scan with their smartphone.",{"name":1247,"tagName":1248,"description":1249,"category":697,"status":661,"isNew":164,"lightDom":164},"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":1251,"tagName":1252,"description":1253,"category":697,"status":661,"isNew":164,"lightDom":164},"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":121,"tagName":1255,"description":1256,"category":683,"status":661,"isNew":164,"lightDom":167,"parts":1257},"nord-resizable","Resizable coordinates an alternating sequence of panels and handles using\nimmutable percentage layouts and native pointer\u002Fkeyboard interactions.",[1258,1262],{"name":1259,"tagName":1260,"description":1261},"ResizableHandle","nord-resizable-handle","Resizable Handle is an accessible window splitter placed between two direct\nResizable Panels.",{"name":1263,"tagName":1264,"description":1265},"ResizablePanel","nord-resizable-panel","Resizable Panel contains consumer-owned content whose percentage size is\ncoordinated by its direct Resizable parent.",{"name":1267,"tagName":1268,"description":1269,"category":697,"status":661,"isNew":164,"lightDom":164,"parts":1270},"RichTextEditor","nord-rich-text-editor","Rich text editor lets users create structured, formatted HTML content.",[1271,1275,1279,1283],{"name":1272,"tagName":1273,"description":1274},"RichTextEditorCommand","nord-rich-text-editor-command","Command renders one formatting control for the nearest Rich Text Editor.",{"name":1276,"tagName":1277,"description":1278},"RichTextEditorContent","nord-rich-text-editor-content","Content provides the editable surface within a composed Rich Text Editor.\n\nPlace it before or after a Rich Text Editor Toolbar to control the visual order.",{"name":1280,"tagName":1281,"description":1282},"RichTextEditorToolbar","nord-rich-text-editor-toolbar","Toolbar composes formatting commands and application controls for a Rich Text Editor.",{"name":1284,"tagName":1285,"description":1286},"RichTextEditorToolbarGroup","nord-rich-text-editor-toolbar-group","Toolbar Group groups related Rich Text Editor commands.",{"name":1288,"tagName":1289,"description":1290,"category":683,"status":661,"isNew":164,"lightDom":164},"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":1292,"tagName":1293,"description":1294,"category":716,"status":661,"isNew":164,"lightDom":164,"parts":1295},"SegmentedControl","nord-segmented-control","Segmented control is used to pick one choice from a set of\nclosely related choices, and immediately apply that selection.",[1296],{"name":1297,"tagName":1298,"description":1299},"SegmentedControlItem","nord-segmented-control-item","Segmented control items populate a segmented control with options.\nEvery item should be placed inside a segmented control.",{"name":1301,"tagName":1302,"description":1303,"category":697,"status":661,"isNew":164,"lightDom":164},"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":1305,"tagName":1306,"description":1307,"category":707,"status":661,"isNew":164,"lightDom":164},"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":1309,"tagName":1310,"description":1311,"category":707,"status":661,"isNew":164,"lightDom":164},"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":1313,"tagName":1314,"description":1315,"category":683,"status":661,"isNew":164,"lightDom":164},"Stack","nord-stack","Stack component manages layout of immediate children along the\nvertical or horizontal axis with optional spacing between each child.",{"name":1317,"tagName":1318,"description":1319,"category":1148,"status":661,"isNew":164,"lightDom":164,"parts":1320},"Tab","nord-tab","The interactive tab button for use within the tab group component.",[1321,1325],{"name":1322,"tagName":1323,"description":1324},"TabGroup","nord-tab-group","Tab Group allows multiple panels to be contained within a single window,\nusing tabs as a navigational element.",{"name":1326,"tagName":1327,"description":1328},"TabPanel","nord-tab-panel","The panel which contains content that can be revealed using a tab\nin the tab group component.",{"name":1330,"tagName":1331,"description":1332,"category":893,"status":661,"isNew":164,"lightDom":164},"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":1334,"tagName":1335,"description":1336,"category":702,"status":661,"isNew":164,"lightDom":164,"parts":1337},"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.",[1338],{"name":1339,"tagName":1340,"description":1341},"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":1343,"tagName":1344,"description":1345,"category":697,"status":661,"isNew":164,"lightDom":164},"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":1347,"tagName":1348,"description":1349,"category":697,"status":661,"isNew":164,"lightDom":164},"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":132,"tagName":1351,"description":1352,"category":702,"status":661,"isNew":164,"lightDom":167},"nord-timestamp","Timestamp presents an instant as localized, stable system, relative, or\nautomatically selected text while retaining native date-time semantics.",{"name":1354,"tagName":1355,"description":1356,"category":707,"status":661,"isNew":164,"lightDom":164,"parts":1357},"Toast","nord-toast","Toasts are non-disruptive messages that appear in the interface\nto provide quick, at-a-glance feedback on the outcome of an action.",[1358],{"name":1359,"tagName":1360,"description":1361},"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":1363,"tagName":1364,"description":1365,"category":697,"status":661,"isNew":164,"lightDom":164},"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":1367,"tagName":1368,"description":1369,"category":940,"status":661,"isNew":164,"lightDom":164},"Tooltip","nord-tooltip","Tooltips are floating containers for displaying additional information\nfor the currently focused element. A tooltip can be useful when you want\nto e.g. give a hint about an existing Command Menu shortcut.",{"name":1371,"tagName":1372,"description":1373,"category":683,"status":661,"isNew":164,"lightDom":164},"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":1375,"tagName":1376,"description":1377,"category":702,"status":661,"isNew":164,"lightDom":164},"Truncate","nord-truncate","Truncate clips text with a single- or multi-line ellipsis and reveals a tooltip with the full text when the content overflows.",{"name":1379,"tagName":1380,"description":1381,"category":702,"status":661,"isNew":164,"lightDom":164},"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":167,"playgroundId":1383,"stories":1384},"components-data-table-filter-bar--playground",[1385,1389,1394,1399],{"id":1386,"name":50,"exportName":50,"html":1387,"js":1388},"components-data-table-filter-bar--overview","\u003Cnord-data-table-filter-bar>\u003C\u002Fnord-data-table-filter-bar>","const bar = document.querySelector('nord-data-table-filter-bar')\n    bar.filters = [\n      { type: 'search', key: 'q', label: 'Search', placeholder: 'Search patients' },\n      {\n        type: 'dropdown',\n        key: 'species',\n        label: 'Species',\n        options: [\n          { value: 'dog', label: 'Dog' },\n          { value: 'cat', label: 'Cat' },\n          { value: 'rabbit', label: 'Rabbit' },\n        ],\n      },\n      { type: 'date-range', key: 'visited', label: 'Last visit' },\n    ]\n    bar.addEventListener('filters-change', (e             ) => {\n      console.log('filters', e.detail.values)\n    })",{"id":1390,"name":1391,"exportName":1392,"html":1387,"js":1393},"components-data-table-filter-bar--all-filter-types","All Filter Types","AllFilterTypes","const bar = document.querySelector('nord-data-table-filter-bar')\n    bar.filters = [\n      { type: 'search', key: 'q', label: 'Search', placeholder: 'Search patients' },\n      {\n        type: 'dropdown',\n        key: 'species',\n        label: 'Species',\n        searchable: true,\n        options: [\n          { value: 'dog', label: 'Dog' },\n          { value: 'cat', label: 'Cat' },\n          { value: 'rabbit', label: 'Rabbit' },\n        ],\n      },\n      {\n        type: 'dropdown',\n        key: 'status',\n        label: 'Status',\n        multiple: true,\n        options: [\n          { value: 'active', label: 'Active' },\n          { value: 'inactive', label: 'Inactive' },\n          { value: 'archived', label: 'Archived' },\n        ],\n      },\n      { type: 'boolean', key: 'insured', label: 'Insured', trueLabel: 'Yes', falseLabel: 'No' },\n      { type: 'date', key: 'dob', label: 'Date of birth' },\n      { type: 'date-range', key: 'visited', label: 'Last visit' },\n      {\n        type: 'segmented',\n        key: 'size',\n        label: 'Size',\n        options: [\n          { value: 's', label: 'Small' },\n          { value: 'm', label: 'Medium' },\n          { value: 'l', label: 'Large' },\n        ],\n      },\n      {\n        type: 'tag-group',\n        key: 'tags',\n        label: 'Tags',\n        options: [\n          { value: 'vip', label: 'VIP' },\n          { value: 'senior', label: 'Senior' },\n          { value: 'new', label: 'New' },\n        ],\n      },\n    ]\n    bar.addEventListener('filters-change', (e             ) => {\n      console.log('filters', e.detail.values)\n    })",{"id":1395,"name":1396,"exportName":1397,"html":1387,"js":1398},"components-data-table-filter-bar--optional-filters","Optional Filters","OptionalFilters","const bar = document.querySelector('nord-data-table-filter-bar')\n    bar.filters = [\n      { type: 'search', key: 'q', label: 'Search', placeholder: 'Search patients' },\n      {\n        type: 'dropdown',\n        key: 'species',\n        label: 'Species',\n        options: [\n          { value: 'dog', label: 'Dog' },\n          { value: 'cat', label: 'Cat' },\n          { value: 'rabbit', label: 'Rabbit' },\n        ],\n      },\n      {\n        type: 'dropdown',\n        key: 'status',\n        label: 'Status',\n        optional: true,\n        removable: true,\n        options: [\n          { value: 'active', label: 'Active' },\n          { value: 'inactive', label: 'Inactive' },\n        ],\n      },\n      { type: 'date-range', key: 'visited', label: 'Last visit', optional: true, removable: true },\n      { type: 'boolean', key: 'insured', label: 'Insured', optional: true, removable: true },\n    ]\n    bar.addEventListener('filter-add', (e             ) => {\n      console.log('added', e.detail)\n    })\n    bar.addEventListener('filter-reset', () => {\n      console.log('reset')\n    })",{"id":1400,"name":1401,"exportName":1401,"html":1402,"js":1403},"components-data-table-filter-bar--standalone","Standalone","\u003Cnord-data-table-filter-bar for=\"patients-table\">\u003C\u002Fnord-data-table-filter-bar>\n      \u003Cnord-data-table id=\"patients-table\" caption=\"Patients\">\u003C\u002Fnord-data-table>","const bar = document.querySelector('nord-data-table-filter-bar')\n    bar.filters = [\n      { type: 'search', key: 'q', label: 'Search', placeholder: 'Search patients' },\n      {\n        type: 'dropdown',\n        key: 'species',\n        label: 'Species',\n        options: [\n          { value: 'Dog', label: 'Dog' },\n          { value: 'Cat', label: 'Cat' },\n          { value: 'Rabbit', label: 'Rabbit' },\n        ],\n      },\n    ]\n\n    const table = document.querySelector('nord-data-table')\n    const columns                            = [\n      { accessorKey: 'name', header: 'Name', cell: info => String(info.getValue()) },\n      { accessorKey: 'species', header: 'Species', cell: info => String(info.getValue()) },\n      { accessorKey: 'breed', header: 'Breed', cell: info => String(info.getValue()) },\n      { accessorKey: 'owner', header: 'Owner', cell: info => String(info.getValue()) },\n      {\n        accessorKey: 'status',\n        header: 'Status',\n        cell: (info) => {\n          const badge = document.createElement('nord-badge')\n          const value = String(info.getValue())\n          badge.setAttribute('variant', value === 'active' ? 'success' : 'warning')\n          badge.textContent = value === 'active' ? 'Active' : 'Inactive'\n          return badge\n        },\n      },\n    ]\n    table.columns = columns\n    const rows            = [\n      { id: 101, name: 'Bella', species: 'Dog', breed: 'Golden Retriever', owner: 'Sofia Nieminen', status: 'active' },\n      { id: 102, name: 'Milo', species: 'Cat', breed: 'British Shorthair', owner: 'Aleksi Korhonen', status: 'active' },\n      { id: 103, name: 'Coco', species: 'Rabbit', breed: 'Lionhead', owner: 'Emma Virtanen', status: 'inactive' },\n      { id: 104, name: 'Rex', species: 'Dog', breed: 'German Shepherd', owner: 'Juho Mäkinen', status: 'active' },\n      { id: 105, name: 'Luna', species: 'Cat', breed: 'Maine Coon', owner: 'Noora Laine', status: 'inactive' },\n    ]\n    table.data = rows",{"hasPlayground":167,"playgroundId":1405,"stories":1406},"components-chat--playground",[1407,1411,1416,1421,1426,1431,1436,1441,1446,1451,1456,1461,1466,1471,1476,1481,1486,1491,1496,1502,1507,1512,1517,1522,1527,1532,1537,1542,1547,1552,1557,1562,1568,1573,1579,1584,1590,1595,1601,1607,1613,1619,1624,1629,1634,1640,1646,1651,1656,1662,1667,1672,1677,1682,1687,1692,1697,1702,1708,1714,1720,1725,1729,1733,1738,1744,1749,1754],{"id":1408,"name":1409,"exportName":89,"html":1410},"components-chat--chat-panel-view","Chat Panel View","\u003Cnord-chat aria-label=\"Care plan assistant\">\n      \u003Cnord-chat-message-list aria-label=\"Care plan conversation\">\n        \u003Cnord-chat-system-message variant=\"divider\" announce=\"off\"\n          >Today\u003C\u002Fnord-chat-system-message\n        >\n        \u003Cnord-chat-message sender=\"user\">\n          \u003Cnord-chat-message-bubble>\n            Can you review Bella’s care plan and check the follow-up timing?\n          \u003C\u002Fnord-chat-message-bubble>\n        \u003C\u002Fnord-chat-message>\n        \u003Cnord-chat-message sender=\"assistant\">\n          \u003Cnord-chat-message-bubble variant=\"ghost\">\n            \u003Cp>I’ll review the care plan now.\u003C\u002Fp>\n            \u003Cp>\n              The follow-up is currently scheduled for two weeks after the\n              medication change.\n            \u003C\u002Fp>\n          \u003C\u002Fnord-chat-message-bubble>\n        \u003C\u002Fnord-chat-message>\n        \u003Cnord-chat-message sender=\"user\">\n          \u003Cnord-chat-message-bubble\n            >Can you also check the latest laboratory\n            results?\u003C\u002Fnord-chat-message-bubble\n          >\n        \u003C\u002Fnord-chat-message>\n        \u003Cnord-chat-message sender=\"assistant\">\n          \u003Cnord-chat-message-bubble variant=\"ghost\">\n            \u003Cp>Checking the laboratory summary now.\u003C\u002Fp>\n            \u003Cp>\n              One value remains mildly elevated, so repeating the panel at the\n              follow-up is appropriate.\n            \u003C\u002Fp>\n          \u003C\u002Fnord-chat-message-bubble>\n        \u003C\u002Fnord-chat-message>\n      \u003C\u002Fnord-chat-message-list>\n      \u003Cnord-chat-composer\n        slot=\"composer\"\n        placeholder=\"Ask something…\"\n        aria-label=\"Care plan assistant composer\"\n      >\u003C\u002Fnord-chat-composer>\n      \u003Cnord-chat-layout-scroll-button\n        slot=\"scroll\"\n      >\u003C\u002Fnord-chat-layout-scroll-button>\n    \u003C\u002Fnord-chat>",{"id":1412,"name":1413,"exportName":1414,"html":1415},"components-chat--scroll-button-labels","ScrollButton Labels","ScrollButtonLabels","\u003Cdiv\n      style=\"display: grid; justify-items: center; gap: var(--n-space-l); max-inline-size: 44rem\"\n    >\n      \u003Cp>Labels expand the button to give context\u003C\u002Fp>\n      \u003Cnord-chat-layout-scroll-button visibility=\"always\">\u003C\u002Fnord-chat-layout-scroll-button>\n      \u003Cnord-chat-layout-scroll-button\n        visibility=\"always\"\n        label=\"3 new messages\"\n      >\u003C\u002Fnord-chat-layout-scroll-button>\n    \u003C\u002Fdiv>",{"id":1417,"name":1418,"exportName":1419,"html":1420},"components-chat--message-avatar-and-name","Message Avatar & Name","MessageAvatarAndName","\u003Cnord-chat-message-list style=\"max-inline-size: 38rem\">\n      \u003Cnord-chat-message sender=\"assistant\" name=\"Agent\">\n        \u003Cnord-avatar slot=\"avatar\" name=\"Agent\" size=\"s\">\u003C\u002Fnord-avatar>\n        \u003Cnord-chat-message-bubble>\n          I reviewed the care plan. The medication schedule is clear and the\n          follow-up is documented.\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata\n          timestamp=\"10:15\"\n        >\u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n      \u003Cnord-chat-message sender=\"user\">\n        \u003Cnord-chat-message-bubble>\n          Thanks! I’ll confirm the appointment now.\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata\n          timestamp=\"10:16\"\n          status=\"read\"\n        >\u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n      \u003Cnord-chat-message sender=\"assistant\" name=\"Agent\">\n        \u003Cnord-avatar slot=\"avatar\" name=\"Agent\" size=\"s\">\u003C\u002Fnord-avatar>\n        \u003Cnord-chat-message-bubble>\n          I can prepare the reminder once it is booked.\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata\n          timestamp=\"10:17\"\n        >\u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n    \u003C\u002Fnord-chat-message-list>",{"id":1422,"name":1423,"exportName":1424,"html":1425},"components-chat--message-ghost","Message Ghost","MessageGhost","\u003Cnord-chat-message-list style=\"max-inline-size: 38rem\">\n      \u003Cnord-chat-message sender=\"assistant\">\n        \u003Cnord-chat-message-bubble variant=\"ghost\">\n          Bella’s recovery has been steady this week. Appetite and activity are\n          improving, and no new concerns were recorded.\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata timestamp=\"09:45\">\n          \u003Cspan slot=\"footer\">Care assistant\u003C\u002Fspan>\n        \u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n      \u003Cnord-chat-message sender=\"user\">\n        \u003Cnord-chat-message-bubble\n          >Can you compare that with last week?\u003C\u002Fnord-chat-message-bubble\n        >\n      \u003C\u002Fnord-chat-message>\n      \u003Cnord-chat-message sender=\"assistant\">\n        \u003Cnord-chat-message-bubble variant=\"ghost\">\n          Activity is up and the discomfort score is lower than the previous\n          review.\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata timestamp=\"09:46\">\n          \u003Cspan slot=\"footer\">Care assistant\u003C\u002Fspan>\n        \u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n    \u003C\u002Fnord-chat-message-list>",{"id":1427,"name":1428,"exportName":1429,"html":1430},"components-chat--bubble-density","Bubble Density","BubbleDensity","\u003Cdiv>\n      \u003Csection>\n        \u003Cp>Compact\u003C\u002Fp>\n        \u003Cnord-chat-message-list density=\"compact\">\n          \u003Cnord-chat-message sender=\"assistant\"\n            >\u003Cnord-chat-message-bubble\n              >The care-plan review is complete.\u003C\u002Fnord-chat-message-bubble\n            >\u003C\u002Fnord-chat-message\n          >\n          \u003Cnord-chat-message sender=\"user\"\n            >\u003Cnord-chat-message-bubble\n              >Share it with the care team.\u003C\u002Fnord-chat-message-bubble\n            >\u003C\u002Fnord-chat-message\n          >\n        \u003C\u002Fnord-chat-message-list>\n      \u003C\u002Fsection>\n      \u003Csection>\n        \u003Cp>Balanced\u003C\u002Fp>\n        \u003Cnord-chat-message-list density=\"balanced\">\n          \u003Cnord-chat-message sender=\"assistant\"\n            >\u003Cnord-chat-message-bubble\n              >The care-plan review is complete.\u003C\u002Fnord-chat-message-bubble\n            >\u003C\u002Fnord-chat-message\n          >\n          \u003Cnord-chat-message sender=\"user\"\n            >\u003Cnord-chat-message-bubble\n              >Share it with the care team.\u003C\u002Fnord-chat-message-bubble\n            >\u003C\u002Fnord-chat-message\n          >\n        \u003C\u002Fnord-chat-message-list>\n      \u003C\u002Fsection>\n      \u003Csection>\n        \u003Cp>Spacious\u003C\u002Fp>\n        \u003Cnord-chat-message-list density=\"spacious\">\n          \u003Cnord-chat-message sender=\"assistant\"\n            >\u003Cnord-chat-message-bubble\n              >The care-plan review is complete.\u003C\u002Fnord-chat-message-bubble\n            >\u003C\u002Fnord-chat-message\n          >\n          \u003Cnord-chat-message sender=\"user\"\n            >\u003Cnord-chat-message-bubble\n              >Share it with the care team.\u003C\u002Fnord-chat-message-bubble\n            >\u003C\u002Fnord-chat-message\n          >\n        \u003C\u002Fnord-chat-message-list>\n      \u003C\u002Fsection>\n    \u003C\u002Fdiv>",{"id":1432,"name":1433,"exportName":1434,"html":1435},"components-chat--bubble-grouping","Bubble Grouping","BubbleGrouping","\u003Cnord-chat-message-list style=\"max-inline-size: 38rem\">\n      \u003Cnord-chat-message sender=\"assistant\" name=\"Agent\">\n        \u003Cnord-avatar slot=\"avatar\" name=\"Agent\" size=\"s\">\u003C\u002Fnord-avatar>\n        \u003Cnord-chat-message-bubble group=\"first\"\n          >I reviewed the three documents you shared.\u003C\u002Fnord-chat-message-bubble\n        >\n        \u003Cnord-chat-message-bubble group=\"middle\"\n          >The care plan is clear, but the follow-up date needs\n          confirmation.\u003C\u002Fnord-chat-message-bubble\n        >\n        \u003Cnord-chat-message-bubble group=\"last\">\n          I can prepare a reminder if you want.\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata\n          timestamp=\"10:45\"\n        >\u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n      \u003Cnord-chat-message sender=\"user\">\n        \u003Cnord-chat-message-bubble group=\"first\"\n          >Yes please!\u003C\u002Fnord-chat-message-bubble\n        >\n        \u003Cnord-chat-message-bubble group=\"last\">\n          Also notify the care team.\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata\n          timestamp=\"10:46\"\n          status=\"delivered\"\n        >\u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n    \u003C\u002Fnord-chat-message-list>",{"id":1437,"name":1438,"exportName":1439,"html":1440},"components-chat--bubble-metadata","Bubble Metadata","BubbleMetadata","\u003Cnord-chat-message-list style=\"max-inline-size: 38rem\">\n      \u003Cnord-chat-message sender=\"assistant\" name=\"Agent\">\n        \u003Cnord-avatar slot=\"avatar\" name=\"Agent\" size=\"s\">\u003C\u002Fnord-avatar>\n        \u003Cnord-chat-message-bubble>\n          Bella’s discharge plan is ready. All 14 checks passed.\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata timestamp=\"09:15\">\n          \u003Cspan slot=\"footer\">Care assistant\u003C\u002Fspan>\n          \u003Cnord-button slot=\"actions\" type=\"button\" size=\"s\" variant=\"plain\"\n            >Copy\u003C\u002Fnord-button\n          >\n        \u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n      \u003Cnord-chat-message sender=\"user\">\n        \u003Cnord-chat-message-bubble>\n          Great, can you send me the follow-up instructions?\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata\n          timestamp=\"09:16\"\n          status=\"read\"\n        >\u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n    \u003C\u002Fnord-chat-message-list>",{"id":1442,"name":1443,"exportName":1444,"html":1445},"components-chat--bubble-variants","Bubble Variants","BubbleVariants","\u003Cdiv>\n      \u003Csection>\n        \u003Cp>Filled — sender-colored background (default)\u003C\u002Fp>\n        \u003Cnord-chat-message-list>\n          \u003Cnord-chat-message sender=\"user\">\n            \u003Cnord-chat-message-bubble\n              >Can you summarize the latest care\n              notes?\u003C\u002Fnord-chat-message-bubble\n            >\n          \u003C\u002Fnord-chat-message>\n        \u003C\u002Fnord-chat-message-list>\n      \u003C\u002Fsection>\n      \u003Csection>\n        \u003Cp>\n          Ghost — transparent background, keeps alignment padding\n        \u003C\u002Fp>\n        \u003Cnord-chat-message-list>\n          \u003Cnord-chat-message sender=\"assistant\">\n            \u003Cnord-chat-message-bubble variant=\"ghost\"\n              >The latest review found no new\n              concerns.\u003C\u002Fnord-chat-message-bubble\n            >\n          \u003C\u002Fnord-chat-message>\n        \u003C\u002Fnord-chat-message-list>\n      \u003C\u002Fsection>\n    \u003C\u002Fdiv>",{"id":1447,"name":1448,"exportName":1449,"html":1450},"components-chat--message-attachments","Message Attachments","MessageAttachments","\u003Cnord-chat-message-list>\n      \u003Cnord-chat-message sender=\"user\" name=\"Einar Veselý\">\n        \u003Cnord-chat-message-bubble>\n          \u003Cspan class=\"n:flex n:flex-col n:gap-xs\">\n            \u003Cnord-chat-attachment\n              src=\"\u002Fimg\u002Fpet.jpg\"\n              name=\"milo-recovery.jpg\"\n            >\u003C\u002Fnord-chat-attachment>\n            \u003Cspan\n              >Thank you. Thursday morning works well for us. I’ve also attached\n              a photo from today.\u003C\u002Fspan\n            >\n          \u003C\u002Fspan>\n        \u003C\u002Fnord-chat-message-bubble>\n      \u003C\u002Fnord-chat-message>\n      \u003Cnord-chat-message sender=\"assistant\" name=\"Dr. Williams\">\n        \u003Cnord-chat-message-bubble variant=\"ghost\">\n          \u003Cspan class=\"n:flex n:flex-col n:gap-xs\">\n            \u003Cspan>I’ve attached the updated care summary.\u003C\u002Fspan>\n            \u003Cnord-chat-attachment\n              name=\"milo-care-summary.pdf\"\n            >\u003C\u002Fnord-chat-attachment>\n          \u003C\u002Fspan>\n        \u003C\u002Fnord-chat-message-bubble>\n      \u003C\u002Fnord-chat-message>\n    \u003C\u002Fnord-chat-message-list>",{"id":1452,"name":1453,"exportName":1454,"html":1455},"components-chat--message-attachment-kinds","Message Attachment Kinds","MessageAttachmentKinds","\u003Cnord-chat-message-list>\n      \u003Cnord-chat-message sender=\"user\">\n        \u003Cnord-chat-message-bubble>\n          \u003Cspan class=\"n:flex n:flex-col n:gap-xs\">\n            \u003Cnord-chat-attachment\n              src=\"\u002Fimg\u002Fpet.jpg\"\n              name=\"a-very-long-attachment-filename-that-truncates.jpg\"\n            >\u003C\u002Fnord-chat-attachment>\n            \u003Cnord-chat-attachment\n              name=\"consent-form.pdf\"\n            >\u003C\u002Fnord-chat-attachment>\n          \u003C\u002Fspan>\n        \u003C\u002Fnord-chat-message-bubble>\n      \u003C\u002Fnord-chat-message>\n    \u003C\u002Fnord-chat-message-list>",{"id":1457,"name":1458,"exportName":1459,"html":1460},"components-chat--message-list-density","MessageList Density","MessageListDensity","\u003Cdiv>\n      \u003Csection>\n        \u003Cp>Compact\u003C\u002Fp>\n        \u003Cnord-chat-message-list density=\"compact\">\n          \u003Cnord-chat-message sender=\"user\"\n            >\u003Cnord-chat-message-bubble\n              >How does density work?\u003C\u002Fnord-chat-message-bubble\n            >\u003C\u002Fnord-chat-message\n          >\n          \u003Cnord-chat-message sender=\"assistant\" name=\"Agent\"\n            >\u003Cnord-avatar slot=\"avatar\" name=\"Agent\" size=\"s\">\u003C\u002Fnord-avatar\n            >\u003Cnord-chat-message-bubble\n              >Density sets message spacing and bubble padding. Use gap to tune\n              row spacing independently.\u003C\u002Fnord-chat-message-bubble\n            >\u003C\u002Fnord-chat-message\n          >\n        \u003C\u002Fnord-chat-message-list>\n      \u003C\u002Fsection>\n      \u003Csection>\n        \u003Cp>Balanced\u003C\u002Fp>\n        \u003Cnord-chat-message-list density=\"balanced\">\n          \u003Cnord-chat-message sender=\"user\"\n            >\u003Cnord-chat-message-bubble\n              >How does density work?\u003C\u002Fnord-chat-message-bubble\n            >\u003C\u002Fnord-chat-message\n          >\n          \u003Cnord-chat-message sender=\"assistant\" name=\"Agent\"\n            >\u003Cnord-avatar slot=\"avatar\" name=\"Agent\" size=\"s\">\u003C\u002Fnord-avatar\n            >\u003Cnord-chat-message-bubble\n              >Density sets message spacing and bubble padding. Use gap to tune\n              row spacing independently.\u003C\u002Fnord-chat-message-bubble\n            >\u003C\u002Fnord-chat-message\n          >\n        \u003C\u002Fnord-chat-message-list>\n      \u003C\u002Fsection>\n      \u003Csection>\n        \u003Cp>Spacious\u003C\u002Fp>\n        \u003Cnord-chat-message-list density=\"spacious\">\n          \u003Cnord-chat-message sender=\"user\"\n            >\u003Cnord-chat-message-bubble\n              >How does density work?\u003C\u002Fnord-chat-message-bubble\n            >\u003C\u002Fnord-chat-message\n          >\n          \u003Cnord-chat-message sender=\"assistant\" name=\"Agent\"\n            >\u003Cnord-avatar slot=\"avatar\" name=\"Agent\" size=\"s\">\u003C\u002Fnord-avatar\n            >\u003Cnord-chat-message-bubble\n              >Density sets message spacing and bubble padding. Use gap to tune\n              row spacing independently.\u003C\u002Fnord-chat-message-bubble\n            >\u003C\u002Fnord-chat-message\n          >\n        \u003C\u002Fnord-chat-message-list>\n      \u003C\u002Fsection>\n    \u003C\u002Fdiv>",{"id":1462,"name":1463,"exportName":1464,"html":1465},"components-chat--message-list-full-featured","MessageList Full Featured","MessageListFullFeatured","\u003Cnord-chat-message-list\n      aria-label=\"Full conversation example\"\n      style=\"max-inline-size: 44rem\"\n    >\n      \u003Cnord-chat-system-message variant=\"divider\" announce=\"off\"\n        >Today\u003C\u002Fnord-chat-system-message\n      >\n      \u003Cnord-chat-message sender=\"user\">\n        \u003Cdiv style=\"display: flex; flex-wrap: wrap; gap: var(--n-space-s)\">\n          \u003Cnord-chat-token\n            value=\"care-plan.pdf\"\n            label=\"care-plan.pdf\"\n          >\u003C\u002Fnord-chat-token>\n          \u003Cnord-chat-token\n            value=\"lab-results.csv\"\n            label=\"lab-results.csv\"\n          >\u003C\u002Fnord-chat-token>\n        \u003C\u002Fdiv>\n        \u003Cnord-chat-message-bubble>\n          Can you review these documents?\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata status=\"read\">\n          \u003Cnord-timestamp\n            slot=\"timestamp\"\n            value=\"2026-03-15T14:30:00\"\n            format=\"time\"\n          >\u003C\u002Fnord-timestamp>\n        \u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n      \u003Cnord-chat-message sender=\"assistant\" name=\"Agent\">\n        \u003Cnord-avatar slot=\"avatar\" name=\"Agent\" size=\"s\">\u003C\u002Fnord-avatar>\n        \u003Cnord-chat-message-bubble group=\"first\">\n          \u003Cp style=\"margin: 0\">\n            Sure! Here's the key follow-up from \u003Cstrong>care-plan.pdf\u003C\u002Fstrong>:\n          \u003C\u002Fp>\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-bubble group=\"last\">\n          \u003Cp style=\"margin: 0\">\n            Bella should continue the current medication and return for a\n            \u003Cstrong>follow-up review in two weeks\u003C\u002Fstrong>.\n          \u003C\u002Fp>\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-bubble variant=\"ghost\" group=\"middle\">\n          \u003Cp style=\"margin: 0\">\n            The laboratory summary is stable overall. One result remains mildly\n            elevated, so the follow-up review should include a repeat panel.\n          \u003C\u002Fp>\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata>\n          \u003Cnord-timestamp\n            slot=\"timestamp\"\n            value=\"2026-03-15T14:30:30\"\n            format=\"time\"\n          >\u003C\u002Fnord-timestamp>\n        \u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n      \u003Cnord-chat-system-message\n        >Agent shared a document summary\u003C\u002Fnord-chat-system-message\n      >\n      \u003Cnord-chat-message sender=\"user\">\n        \u003Cnord-chat-message-bubble>\n          That's clear, thanks!\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata status=\"delivered\">\n          \u003Cnord-timestamp\n            slot=\"timestamp\"\n            value=\"2026-03-15T14:31:00\"\n            format=\"time\"\n          >\u003C\u002Fnord-timestamp>\n        \u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n    \u003C\u002Fnord-chat-message-list>",{"id":1467,"name":1468,"exportName":1469,"html":1470},"components-chat--metadata-footer-actions","Metadata Footer Actions","MetadataFooterActions","\u003Cnord-chat-message-list style=\"max-inline-size: 38rem\">\n      \u003Cnord-chat-message sender=\"user\">\n        \u003Cnord-chat-message-bubble>\n          Summarize Bella’s recent care notes.\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata\n          timestamp=\"09:41\"\n          status=\"read\"\n        >\u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n      \u003Cnord-chat-message sender=\"assistant\">\n        \u003Cnord-chat-message-bubble>\n          Bella’s appetite and activity improved this week. Continue the current\n          plan and review again in two weeks.\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata timestamp=\"09:42\">\n          \u003Cspan slot=\"footer\">Care assistant\u003C\u002Fspan>\n          \u003Cnord-button slot=\"actions\" type=\"button\" size=\"s\" variant=\"plain\"\n            >Copy\u003C\u002Fnord-button\n          >\n          \u003Cnord-button slot=\"actions\" type=\"button\" size=\"s\" variant=\"plain\"\n            >Retry\u003C\u002Fnord-button\n          >\n          \u003Cnord-button slot=\"actions\" type=\"button\" size=\"s\" variant=\"plain\"\n            >Good response\u003C\u002Fnord-button\n          >\n          \u003Cnord-button slot=\"actions\" type=\"button\" size=\"s\" variant=\"plain\"\n            >Bad response\u003C\u002Fnord-button\n          >\n        \u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n    \u003C\u002Fnord-chat-message-list>",{"id":1472,"name":1473,"exportName":1474,"html":1475},"components-chat--metadata-status","Metadata Status","MetadataStatus","\u003Cnord-chat-message-list style=\"max-inline-size: 32rem\">\n      \u003Cnord-chat-message sender=\"user\">\n        \u003Cnord-chat-message-bubble>Sending the appointment update…\u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata timestamp=\"10:15\" status=\"sending\">\u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n      \u003Cnord-chat-message sender=\"user\">\n        \u003Cnord-chat-message-bubble>Appointment update sent.\u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata timestamp=\"10:15\" status=\"sent\">\u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n      \u003Cnord-chat-message sender=\"user\">\n        \u003Cnord-chat-message-bubble>Reminder delivered to the client.\u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata timestamp=\"10:15\" status=\"delivered\">\u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n      \u003Cnord-chat-message sender=\"user\">\n        \u003Cnord-chat-message-bubble>The client read the reminder.\u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata timestamp=\"10:15\" status=\"read\">\u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n      \u003Cnord-chat-message sender=\"user\">\n        \u003Cnord-chat-message-bubble>The reminder could not be delivered.\u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata timestamp=\"10:15\" status=\"error\">\u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n    \u003C\u002Fnord-chat-message-list>",{"id":1477,"name":1478,"exportName":1479,"html":1480},"components-chat--metadata-timestamps","Metadata Timestamps","MetadataTimestamps","\u003Cnord-chat-message-list style=\"max-inline-size: 38rem\">\n      \u003Cnord-chat-message sender=\"user\">\n        \u003Cnord-chat-message-bubble>\n          Thanks — any follow-up concerns I should know about?\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata\n          >\u003Cnord-timestamp\n            slot=\"timestamp\"\n            value=\"2026-04-29T14:30:00\"\n            format=\"time\"\n          >\u003C\u002Fnord-timestamp\n        >\u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n      \u003Cnord-chat-message sender=\"assistant\">\n        \u003Cnord-chat-message-bubble>\n          Relative timestamps are useful for older care notes where recency\n          matters most.\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata\n          >\u003Cnord-timestamp\n            slot=\"timestamp\"\n            value=\"2026-04-28T16:45:00\"\n            format=\"relative\"\n          >\u003C\u002Fnord-timestamp\n        >\u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n    \u003C\u002Fnord-chat-message-list>",{"id":1482,"name":1483,"exportName":1484,"html":1485},"components-chat--system-message-status-updates","SystemMessage Status Updates","SystemMessageStatusUpdates","\u003Cnord-chat-message-list style=\"max-inline-size: 38rem\">\n      \u003Cnord-chat-system-message variant=\"divider\" announce=\"off\"\n        >March 14, 2026\u003C\u002Fnord-chat-system-message\n      >\n      \u003Cnord-chat-system-message\n        >\u003Cnord-icon slot=\"icon\" name=\"user-add\" size=\"s\">\u003C\u002Fnord-icon>Sarah Chen\n        joined the conversation\u003C\u002Fnord-chat-system-message\n      >\n      \u003Cnord-chat-system-message\n        >Topic changed to “Bella’s recovery plan”\u003C\u002Fnord-chat-system-message\n      >\n      \u003Cnord-chat-system-message variant=\"divider\" announce=\"off\"\n        >March 15, 2026\u003C\u002Fnord-chat-system-message\n      >\n      \u003Cnord-chat-system-message\n        >\u003Cnord-icon slot=\"icon\" name=\"user-delete\" size=\"s\">\u003C\u002Fnord-icon>Alex\n        Rivera left the conversation\u003C\u002Fnord-chat-system-message\n      >\n      \u003Cnord-chat-system-message variant=\"divider\" announce=\"off\"\n        >Today\u003C\u002Fnord-chat-system-message\n      >\n      \u003Cnord-chat-system-message\n        >\u003Cnord-icon\n          slot=\"icon\"\n          name=\"interface-checked-circle\"\n          size=\"s\"\n        >\u003C\u002Fnord-icon\n        >Conversation marked as resolved\u003C\u002Fnord-chat-system-message\n      >\n    \u003C\u002Fnord-chat-message-list>",{"id":1487,"name":1488,"exportName":1489,"html":1490},"components-chat--system-message-variants","SystemMessage Variants","SystemMessageVariants","\u003Cdiv>\n      \u003Csection>\n        \u003Cp>Default\u003C\u002Fp>\n        \u003Cnord-chat-message-list>\n          \u003Cnord-chat-system-message\n            >Alex joined the conversation\u003C\u002Fnord-chat-system-message\n          >\n          \u003Cnord-chat-system-message\n            >Conversation marked as resolved\u003C\u002Fnord-chat-system-message\n          >\n        \u003C\u002Fnord-chat-message-list>\n      \u003C\u002Fsection>\n      \u003Csection>\n        \u003Cp>Divider\u003C\u002Fp>\n        \u003Cnord-chat-message-list>\n          \u003Cnord-chat-system-message variant=\"divider\" announce=\"off\"\n            >March 15, 2026\u003C\u002Fnord-chat-system-message\n          >\n          \u003Cnord-chat-system-message variant=\"divider\" announce=\"off\"\n            >Today\u003C\u002Fnord-chat-system-message\n          >\n        \u003C\u002Fnord-chat-message-list>\n      \u003C\u002Fsection>\n    \u003C\u002Fdiv>",{"id":1492,"name":1493,"exportName":1494,"html":1495},"components-chat--system-message-icon","SystemMessage Icon","SystemMessageIcon","\u003Cdiv>\n      \u003Cp>Icons reinforce the message type\u003C\u002Fp>\n      \u003Cnord-chat-message-list>\n        \u003Cnord-chat-system-message\n          >\u003Cnord-icon slot=\"icon\" name=\"user-add\" size=\"s\">\u003C\u002Fnord-icon>Jordan\n          was added to the conversation\u003C\u002Fnord-chat-system-message\n        >\n        \u003Cnord-chat-system-message\n          >\u003Cnord-icon slot=\"icon\" name=\"interface-lock\" size=\"s\">\u003C\u002Fnord-icon\n          >Messages are private to the care team\u003C\u002Fnord-chat-system-message\n        >\n        \u003Cnord-chat-system-message\n          >\u003Cnord-icon slot=\"icon\" name=\"interface-ai\" size=\"s\">\u003C\u002Fnord-icon\n          >Assistant is preparing a response…\u003C\u002Fnord-chat-system-message\n        >\n        \u003Cnord-chat-system-message\n          >\u003Cnord-icon slot=\"icon\" name=\"interface-shield\" size=\"s\">\u003C\u002Fnord-icon\n          >Conversation verified by an administrator\u003C\u002Fnord-chat-system-message\n        >\n      \u003C\u002Fnord-chat-message-list>\n    \u003C\u002Fdiv>",{"id":1497,"name":1498,"exportName":1499,"html":1500,"js":1501},"components-chat--chat-showcase","Chat Showcase","ChatShowcase","\u003Cnord-chat aria-label=\"Care plan chat\">\n      \u003Cnord-chat-message-list aria-label=\"Care plan conversation\">\n        \u003Cnord-chat-message sender=\"user\">\n          \u003Cnord-chat-message-bubble>\n            \u003Cnord-chat-tokenized-text\n              id=\"chat-showcase-tokenized-text\"\n            >\u003C\u002Fnord-chat-tokenized-text>\n          \u003C\u002Fnord-chat-message-bubble>\n        \u003C\u002Fnord-chat-message>\n        \u003Cnord-chat-message sender=\"assistant\">\n          \u003Cnord-chat-message-bubble variant=\"ghost\"\n            >Reviewing the care plan now…\u003C\u002Fnord-chat-message-bubble\n          >\n        \u003C\u002Fnord-chat-message>\n      \u003C\u002Fnord-chat-message-list>\n      \u003Cnord-chat-composer\n        slot=\"composer\"\n        placeholder=\"Ask something…\"\n        aria-label=\"Care plan composer\"\n      >\u003C\u002Fnord-chat-composer>\n      \u003Cnord-chat-layout-scroll-button\n        slot=\"scroll\"\n      >\u003C\u002Fnord-chat-layout-scroll-button>\n    \u003C\u002Fnord-chat>","const text = document.getElementById(\"chat-showcase-tokenized-text\")\ntext.tokens = [{ value: \"@care-team\", label: \"@Care team\", variant: \"info\" }]\ntext.value = \"@care-team review Bella’s care plan\"",{"id":1503,"name":1504,"exportName":1505,"html":1506},"components-chat--chat-layout-scroll-button-states","ChatLayout Scroll Button States","ChatLayoutScrollButtonStates","\u003Cdiv style=\"display: grid; gap: var(--n-space-l); max-inline-size: 44rem\">\n      \u003Csection>\n        \u003Cp\n          style=\"margin: 0 0 var(--n-space-s); color: var(--n-color-text-weaker); font-size: var(--n-font-size-s)\"\n        >\n          Hidden (user is at bottom)\n        \u003C\u002Fp>\n        \u003Cnord-chat-layout-scroll-button>\u003C\u002Fnord-chat-layout-scroll-button>\n      \u003C\u002Fsection>\n      \u003Csection>\n        \u003Cp\n          style=\"margin: 0 0 var(--n-space-s); color: var(--n-color-text-weaker); font-size: var(--n-font-size-s)\"\n        >\n          Visible (user scrolled up)\n        \u003C\u002Fp>\n        \u003Cnord-chat-layout-scroll-button visibility=\"always\"\n        >\u003C\u002Fnord-chat-layout-scroll-button>\n      \u003C\u002Fsection>\n      \u003Csection>\n        \u003Cp\n          style=\"margin: 0 0 var(--n-space-s); color: var(--n-color-text-weaker); font-size: var(--n-font-size-s)\"\n        >\n          Expanded with label (new messages arrived)\n        \u003C\u002Fp>\n        \u003Cnord-chat-layout-scroll-button\n          visibility=\"always\"\n          label=\"New messages\"\n        >\u003C\u002Fnord-chat-layout-scroll-button>\n      \u003C\u002Fsection>\n    \u003C\u002Fdiv>",{"id":1508,"name":1509,"exportName":1510,"html":1511},"components-chat--chat-message-multi-bubble","ChatMessage Multi Bubble","ChatMessageMultiBubble","\u003Cnord-chat-message-list style=\"max-inline-size: 42rem\">\n      \u003Cnord-chat-message sender=\"user\">\n        \u003Cnord-chat-message-bubble group=\"first\">\n          I have a couple of questions about Bella’s follow-up.\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-bubble group=\"middle\">\n          First, when should we repeat the laboratory panel?\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-bubble group=\"last\">\n          And second, should the medication continue?\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata\n          timestamp=\"11:00\"\n          status=\"delivered\"\n        >\u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n      \u003Cnord-chat-message sender=\"assistant\" name=\"Agent\">\n        \u003Cnord-avatar slot=\"avatar\" name=\"Agent\" size=\"s\">\u003C\u002Fnord-avatar>\n        \u003Cnord-chat-message-bubble group=\"first\">\n          Repeat the panel at the two-week follow-up.\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-bubble group=\"last\">\n          Continue the current medication unless symptoms change.\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata\n          timestamp=\"11:01\"\n        >\u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n    \u003C\u002Fnord-chat-message-list>",{"id":1513,"name":1514,"exportName":1515,"html":1516},"components-chat--chat-message-showcase","ChatMessage Showcase","ChatMessageShowcase","\u003Cnord-chat-message-list style=\"max-inline-size: 38rem\">\n      \u003Cnord-chat-message sender=\"user\">\n        \u003Cnord-chat-message-bubble\n          >I added the updated care plan.\u003C\u002Fnord-chat-message-bubble\n        >\n        \u003Cnord-chat-message-bubble>\n          Can you review the follow-up timing?\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata\n          timestamp=\"14:30\"\n          status=\"read\"\n        >\u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n      \u003Cnord-chat-message sender=\"assistant\">\n        \u003Cnord-chat-message-bubble variant=\"ghost\">\n          The two-week follow-up timing is appropriate.\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata timestamp=\"14:31\">\n          \u003Cspan slot=\"footer\">Care assistant\u003C\u002Fspan>\n        \u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n    \u003C\u002Fnord-chat-message-list>",{"id":1518,"name":1519,"exportName":1520,"html":1521},"components-chat--chat-message-bubble-showcase","ChatMessageBubble Showcase","ChatMessageBubbleShowcase","\u003Cnord-chat-message-list style=\"max-inline-size: 38rem\">\n      \u003Cnord-chat-message sender=\"user\">\n        \u003Cnord-chat-message-bubble\n          >I added the latest care notes.\u003C\u002Fnord-chat-message-bubble\n        >\n        \u003Cnord-chat-message-bubble>\n          Can you review them when you have a chance?\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata\n          timestamp=\"09:15\"\n          status=\"read\"\n        >\u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n      \u003Cnord-chat-message sender=\"assistant\">\n        \u003Cnord-chat-message-bubble variant=\"ghost\">\n          The notes look complete. The follow-up plan is clear.\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata\n          timestamp=\"09:16\"\n        >\u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n    \u003C\u002Fnord-chat-message-list>",{"id":1523,"name":1524,"exportName":1525,"html":1526},"components-chat--chat-message-list-showcase","ChatMessageList Showcase","ChatMessageListShowcase","\u003Cnord-chat-message-list style=\"max-inline-size: 44rem\">\n      \u003Cnord-chat-system-message variant=\"divider\" announce=\"off\"\n        >March 15, 2026\u003C\u002Fnord-chat-system-message\n      >\n      \u003Cnord-chat-message sender=\"user\">\n        \u003Cnord-chat-message-bubble>\n          Can you summarize Bella’s care plan?\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata\n          timestamp=\"14:30\"\n          status=\"read\"\n        >\u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n      \u003Cnord-chat-message sender=\"assistant\" name=\"Agent\">\n        \u003Cnord-avatar slot=\"avatar\" name=\"Agent\" size=\"s\">\u003C\u002Fnord-avatar>\n        \u003Cnord-chat-message-bubble>\n          Continue the current medication and repeat the laboratory panel at the\n          two-week follow-up.\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata\n          timestamp=\"14:31\"\n        >\u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n      \u003Cnord-chat-message sender=\"user\">\n        \u003Cnord-chat-message-bubble>\n          Thanks, I’ll confirm the appointment.\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata\n          timestamp=\"14:32\"\n          status=\"delivered\"\n        >\u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n    \u003C\u002Fnord-chat-message-list>",{"id":1528,"name":1529,"exportName":1530,"html":1531},"components-chat--chat-message-metadata-showcase","ChatMessageMetadata Showcase","ChatMessageMetadataShowcase","\u003Cnord-chat-message-list style=\"max-inline-size: 44rem\">\n      \u003Cnord-chat-message sender=\"assistant\" name=\"Agent\">\n        \u003Cnord-avatar slot=\"avatar\" name=\"Agent\" size=\"s\">\u003C\u002Fnord-avatar>\n        \u003Cnord-chat-message-bubble>\n          I couldn’t load the latest laboratory summary.\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata timestamp=\"10:42\" status=\"error\">\n          \u003Cnord-button slot=\"actions\" type=\"button\" size=\"s\" variant=\"plain\"\n            >Retry\u003C\u002Fnord-button\n          >\n        \u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n      \u003Cnord-chat-message sender=\"user\">\n        \u003Cnord-chat-message-bubble>\n          Please use the results from yesterday’s visit.\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata\n          timestamp=\"10:43\"\n          status=\"read\"\n        >\u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n      \u003Cnord-chat-message sender=\"assistant\" name=\"Agent\">\n        \u003Cnord-avatar slot=\"avatar\" name=\"Agent\" size=\"s\">\u003C\u002Fnord-avatar>\n        \u003Cnord-chat-message-bubble variant=\"ghost\">\n          The results are stable overall. Repeat the panel at the two-week\n          follow-up.\n        \u003C\u002Fnord-chat-message-bubble>\n        \u003Cnord-chat-message-metadata timestamp=\"10:44\">\n          \u003Cspan slot=\"footer\">Care assistant\u003C\u002Fspan>\n          \u003Cnord-button slot=\"actions\" type=\"button\" size=\"s\" variant=\"plain\"\n            >Copy\u003C\u002Fnord-button\n          >\n          \u003Cnord-button slot=\"actions\" type=\"button\" size=\"s\" variant=\"plain\"\n            >Retry\u003C\u002Fnord-button\n          >\n          \u003Cnord-button slot=\"actions\" type=\"button\" size=\"s\" variant=\"plain\"\n            >Good response\u003C\u002Fnord-button\n          >\n          \u003Cnord-button slot=\"actions\" type=\"button\" size=\"s\" variant=\"plain\"\n            >Bad response\u003C\u002Fnord-button\n          >\n        \u003C\u002Fnord-chat-message-metadata>\n      \u003C\u002Fnord-chat-message>\n    \u003C\u002Fnord-chat-message-list>",{"id":1533,"name":1534,"exportName":1535,"html":1536},"components-chat--chat-system-message-showcase","ChatSystemMessage Showcase","ChatSystemMessageShowcase","\u003Cnord-chat-message-list style=\"max-inline-size: 44rem\">\n      \u003Cnord-chat-system-message variant=\"divider\" announce=\"off\"\n        >March 15, 2026\u003C\u002Fnord-chat-system-message\n      >\n      \u003Cnord-chat-system-message\n        >Alex joined the conversation\u003C\u002Fnord-chat-system-message\n      >\n      \u003Cnord-chat-system-message\n        >Assistant is reviewing Bella’s care plan…\u003C\u002Fnord-chat-system-message\n      >\n      \u003Cnord-chat-system-message variant=\"divider\" announce=\"off\"\n        >Today\u003C\u002Fnord-chat-system-message\n      >\n      \u003Cnord-chat-system-message\n        >Conversation marked as resolved\u003C\u002Fnord-chat-system-message\n      >\n    \u003C\u002Fnord-chat-message-list>",{"id":1538,"name":1539,"exportName":1540,"html":1541},"components-chat--chat-streaming","Chat Streaming","ChatStreaming","\u003Cnord-chat\n      data-streaming-layout\n      aria-label=\"Streaming chat example\"\n    >\n      \u003Cnord-chat-message-list aria-label=\"Streaming conversation\">\n        \u003Cnord-chat-message sender=\"user\">\n          \u003Cnord-chat-message-bubble\n            >Summarize the follow-up plan.\u003C\u002Fnord-chat-message-bubble\n          >\n        \u003C\u002Fnord-chat-message>\n      \u003C\u002Fnord-chat-message-list>\n      \u003Cdiv slot=\"composer\">\n        \u003Cnord-button data-stream-action type=\"button\" variant=\"primary\"\n          >Stream response\u003C\u002Fnord-button\n        >\n      \u003C\u002Fdiv>\n    \u003C\u002Fnord-chat>",{"id":1543,"name":1544,"exportName":1545,"html":1546},"components-chat--chat-unread","Chat Unread Messages","ChatUnread","\u003Cnord-chat\n      data-unread-layout\n      aria-label=\"Unread message example\"\n    >\n      \u003Cnord-chat-message-list aria-label=\"Unread conversation\">\n        \n      \u003C\u002Fnord-chat-message-list>\n      \u003Cdiv\n        slot=\"composer\"\n        style=\"display: flex; justify-content: space-between; align-items: center; gap: var(--n-space-m)\"\n      >\n        \u003Coutput data-unread-state>At latest message\u003C\u002Foutput>\n        \u003Cnord-button data-unread-action type=\"button\"\n          >Add incoming message\u003C\u002Fnord-button\n        >\n      \u003C\u002Fdiv>\n    \u003C\u002Fnord-chat>",{"id":1548,"name":1549,"exportName":1550,"html":1551},"components-chat--chat-message-list-long-history","ChatMessageList Long History","ChatMessageListLongHistory","\u003Cnord-chat aria-label=\"Long chat history\">\n      \u003Cnord-chat-message-list load-older aria-label=\"Long conversation\">\n        \u003Cnord-chat-system-message variant=\"divider\" announce=\"off\"\n          >Earlier\u003C\u002Fnord-chat-system-message\n        >\n        \n      \u003C\u002Fnord-chat-message-list>\n    \u003C\u002Fnord-chat>",{"id":1553,"name":1554,"exportName":1555,"html":1556},"components-chat--chat-nord-button-override","Chat Nord Button Override","ChatNordButtonOverride","\u003Cnord-chat\n      aria-label=\"Nord Button override example\"\n    >\n      \u003Cnord-chat-message-list>\n        \u003Cnord-chat-message sender=\"assistant\">\n          \u003Cnord-chat-message-bubble>\n            Chat also accepts a consumer-owned Nord Button in the scroll\n            slot.\n          \u003C\u002Fnord-chat-message-bubble>\n        \u003C\u002Fnord-chat-message>\n      \u003C\u002Fnord-chat-message-list>\n      \u003Cnord-button slot=\"scroll\" type=\"button\">\n        \u003Cnord-icon slot=\"start\" name=\"arrow-down-small\" size=\"s\">\u003C\u002Fnord-icon>\n        Return to latest\n      \u003C\u002Fnord-button>\n    \u003C\u002Fnord-chat>",{"id":1558,"name":1559,"exportName":1560,"html":1561},"components-chat--composer-overview","Composer Overview","ComposerOverview","\u003Cnord-chat-composer\n      placeholder=\"Type a message…\"\n      aria-label=\"Message composer\"\n    >\u003C\u002Fnord-chat-composer>",{"id":1563,"name":1564,"exportName":1565,"html":1566,"js":1567},"components-chat--composer-attachments","Composer — Attachments","ComposerAttachments","\u003Cdiv\n      style=\"display: flex; flex-direction: column; gap: var(--n-space-s); inline-size: 28rem; max-inline-size: 100%\"\n    >\n      \u003Cnord-chat-composer-drawer role=\"group\" aria-label=\"Attachments\">\n        \u003Cspan\n          style=\"display: inline-flex; align-items: center; gap: var(--n-space-xs); color: var(--n-color-text-weaker); font-size: var(--n-font-size-s)\"\n        >\n          \u003Cnord-icon name=\"interface-attachment\" size=\"s\">\u003C\u002Fnord-icon>\n          Attachments\n        \u003C\u002Fspan>\n        \u003Cnord-chat-attachment name=\"care-plan.docx\" removable>\u003C\u002Fnord-chat-attachment>\n        \u003Cnord-chat-attachment name=\"lab-results.pdf\" removable>\u003C\u002Fnord-chat-attachment>\n        \u003Cnord-chat-attachment name=\"consent-form.pdf\" removable>\u003C\u002Fnord-chat-attachment>\n        \u003Cnord-chat-attachment name=\"visit-notes.docx\" removable>\u003C\u002Fnord-chat-attachment>\n        \u003Cnord-chat-attachment name=\"medication-history.csv\" removable>\u003C\u002Fnord-chat-attachment>\n        \u003Cnord-chat-attachment name=\"discharge-guide.pdf\" removable>\u003C\u002Fnord-chat-attachment>\n      \u003C\u002Fnord-chat-composer-drawer>\n      \u003Cnord-chat-composer aria-label=\"Composer with attachments\">\n        \u003Cnord-button slot=\"header-actions\" type=\"button\" variant=\"plain\" size=\"s\">\n          \u003Cnord-icon name=\"interface-attachment\" size=\"s\">\u003C\u002Fnord-icon>\n          Attach\n        \u003C\u002Fnord-button>\n      \u003C\u002Fnord-chat-composer>\n    \u003C\u002Fdiv>","document.querySelectorAll(\"nord-chat-attachment[removable], nord-chat-token[removable]\").forEach((item) => {\n  const eventName = item.matches(\"nord-chat-attachment\")\n    ? \"nord-attachment-remove\"\n    : \"nord-token-remove\"\n  item.addEventListener(eventName, () => {\n    const drawer = item.closest(\"nord-chat-composer-drawer\")\n    item.remove()\n    if (drawer && Number.isFinite(drawer.count)) {\n      drawer.count = drawer.querySelectorAll(\n        \"nord-chat-attachment, nord-chat-token\",\n      ).length\n    }\n  })\n})",{"id":1569,"name":1570,"exportName":1571,"html":1572},"components-chat--composer-footer-actions","Composer — Footer Actions","ComposerFooterActions","\u003Cdiv>\n      \u003Cp>Model selector and settings dropdowns\u003C\u002Fp>\n      \u003Cnord-chat-composer\n        aria-label=\"Composer with footer actions\"\n      >\n        \u003Cnord-dropdown slot=\"footer-actions\" size=\"s\">\n          \u003Cnord-button slot=\"toggle\" type=\"button\" variant=\"plain\" size=\"s\">\n            \u003Cnord-icon name=\"interface-ai\" size=\"s\">\u003C\u002Fnord-icon>\n            Auto\n          \u003C\u002Fnord-button>\n          \u003Cnord-dropdown-item>Auto\u003C\u002Fnord-dropdown-item>\n          \u003Cnord-dropdown-item>Model A\u003C\u002Fnord-dropdown-item>\n          \u003Cnord-dropdown-item>Model B\u003C\u002Fnord-dropdown-item>\n          \u003Cnord-dropdown-item>Model C\u003C\u002Fnord-dropdown-item>\n        \u003C\u002Fnord-dropdown>\n        \u003Cnord-dropdown slot=\"footer-actions\" size=\"s\">\n          \u003Cnord-button slot=\"toggle\" type=\"button\" variant=\"plain\" size=\"s\">\n            \u003Cnord-icon name=\"interface-setting-slider\" size=\"s\">\u003C\u002Fnord-icon>\n            Settings\n          \u003C\u002Fnord-button>\n          \u003Cnord-dropdown-item>Preferences\u003C\u002Fnord-dropdown-item>\n          \u003Cnord-dropdown-item>Keyboard shortcuts\u003C\u002Fnord-dropdown-item>\n          \u003Cnord-dropdown-item>About\u003C\u002Fnord-dropdown-item>\n        \u003C\u002Fnord-dropdown>\n        \u003Cnord-button\n          slot=\"send-actions\"\n          type=\"button\"\n          variant=\"plain\"\n          size=\"s\"\n          aria-label=\"Microphone\"\n        >\n          \u003Cnord-icon name=\"interface-microphone\" size=\"s\">\u003C\u002Fnord-icon>\n        \u003C\u002Fnord-button>\n      \u003C\u002Fnord-chat-composer>\n    \u003C\u002Fdiv>",{"id":1574,"name":1575,"exportName":1576,"html":1577,"js":1578},"components-chat--composer-full-featured","Composer — Full Featured","ComposerFullFeatured","\u003Cdiv>\n      \u003Cp>All slots populated\u003C\u002Fp>\n      \u003Cdiv style=\"display: flex; flex-direction: column; gap: var(--n-space-s)\">\n        \u003Cnord-chat-composer-drawer role=\"group\" aria-label=\"Attachments\">\n          \u003Cspan style=\"display: inline-flex; align-items: center; gap: var(--n-space-xs); color: var(--n-color-text-weaker); font-size: var(--n-font-size-s)\">\n            \u003Cnord-icon name=\"interface-attachment\" size=\"s\">\u003C\u002Fnord-icon>\n            Attachments\n          \u003C\u002Fspan>\n          \u003Cnord-chat-attachment name=\"care-plan.pdf\" removable>\u003C\u002Fnord-chat-attachment>\n          \u003Cnord-chat-attachment name=\"lab-results.csv\" removable>\u003C\u002Fnord-chat-attachment>\n          \u003Cnord-chat-attachment name=\"consent-form.pdf\" removable>\u003C\u002Fnord-chat-attachment>\n          \u003Cnord-chat-attachment name=\"visit-notes.docx\" removable>\u003C\u002Fnord-chat-attachment>\n          \u003Cnord-chat-attachment name=\"discharge-guide.pdf\" removable>\u003C\u002Fnord-chat-attachment>\n        \u003C\u002Fnord-chat-composer-drawer>\n        \u003Cnord-chat-composer\n          id=\"composer-full-featured\"\n          placeholder=\"Ask about Bella’s care plan…\"\n          aria-label=\"Full featured composer\"\n        >\n        \u003Cnord-button\n          slot=\"header-actions\"\n          type=\"button\"\n          variant=\"plain\"\n          size=\"s\"\n          aria-label=\"Mention\"\n        >\n          \u003Cnord-icon name=\"interface-chat\" size=\"s\">\u003C\u002Fnord-icon>\n        \u003C\u002Fnord-button>\n        \u003Cnord-button\n          slot=\"header-actions\"\n          type=\"button\"\n          variant=\"plain\"\n          size=\"s\"\n          aria-label=\"Attach file\"\n        >\n          \u003Cnord-icon name=\"interface-attachment\" size=\"s\">\u003C\u002Fnord-icon>\n        \u003C\u002Fnord-button>\n        \u003Cnord-progress-bar\n          slot=\"header-context\"\n          value=\"50\"\n          label=\"Context window\"\n          style=\"inline-size: 7rem\"\n        >\u003C\u002Fnord-progress-bar>\n        \u003Cnord-chat-composer-input\n          slot=\"input\"\n          label=\"Message input\"\n          placeholder=\"Ask about Bella’s care plan…\"\n          style=\"min-block-size: 2.75rem\"\n        >\u003C\u002Fnord-chat-composer-input>\n        \u003Cnord-dropdown slot=\"footer-actions\" size=\"s\">\n          \u003Cnord-button slot=\"toggle\" type=\"button\" variant=\"plain\" size=\"s\">\n            \u003Cnord-icon name=\"interface-ai\" size=\"s\">\u003C\u002Fnord-icon>\n            Auto\n          \u003C\u002Fnord-button>\n          \u003Cnord-dropdown-item>Auto\u003C\u002Fnord-dropdown-item>\n          \u003Cnord-dropdown-item>Model A\u003C\u002Fnord-dropdown-item>\n          \u003Cnord-dropdown-item>Model B\u003C\u002Fnord-dropdown-item>\n          \u003Cnord-dropdown-item>Model C\u003C\u002Fnord-dropdown-item>\n        \u003C\u002Fnord-dropdown>\n        \u003Cnord-dropdown slot=\"footer-actions\" size=\"s\">\n          \u003Cnord-button slot=\"toggle\" type=\"button\" variant=\"plain\" size=\"s\">\n            \u003Cnord-icon name=\"interface-setting-slider\" size=\"s\">\u003C\u002Fnord-icon>\n            Settings\n          \u003C\u002Fnord-button>\n          \u003Cnord-dropdown-item>Preferences\u003C\u002Fnord-dropdown-item>\n          \u003Cnord-dropdown-item>Keyboard shortcuts\u003C\u002Fnord-dropdown-item>\n          \u003Cnord-dropdown-item>About\u003C\u002Fnord-dropdown-item>\n        \u003C\u002Fnord-dropdown>\n        \u003Cnord-button\n          slot=\"send-actions\"\n          type=\"button\"\n          variant=\"plain\"\n          size=\"s\"\n          aria-label=\"Microphone\"\n        >\n          \u003Cnord-icon name=\"interface-microphone\" size=\"s\">\u003C\u002Fnord-icon>\n        \u003C\u002Fnord-button>\n        \u003C\u002Fnord-chat-composer>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>","${removeTokensSetupScript}n${fullFeaturedSetupScript}",{"id":1580,"name":1581,"exportName":1582,"html":1583},"components-chat--composer-simple","Composer — Simple","ComposerSimple","\u003Cnord-chat-composer\n      aria-label=\"Message composer\"\n    >\u003C\u002Fnord-chat-composer>",{"id":1585,"name":1586,"exportName":1587,"html":1588,"js":1589},"components-chat--composer-streaming","Composer — Streaming","ComposerStreaming","\u003Cdiv>\n      \u003Cp id=\"composer-streaming-status\">\n        Send a message to start streaming\n      \u003C\u002Fp>\n      \u003Cnord-chat-composer\n        id=\"composer-streaming\"\n        placeholder=\"Send a message to start streaming…\"\n        aria-label=\"Streaming composer\"\n      >\u003C\u002Fnord-chat-composer>\n    \u003C\u002Fdiv>","const composer = document.getElementById(\"composer-streaming\")\nconst status = document.getElementById(\"composer-streaming-status\")\nlet streamingTimer\n\nfunction setStreaming(streaming) {\n  window.clearTimeout(streamingTimer)\n  composer.stopShown = streaming\n  status.textContent = streaming\n    ? \"Streaming — click stop to cancel\"\n    : \"Send a message to start streaming\"\n}\n\ncomposer.addEventListener(\"input\", () => {\n  composer.value = composer.querySelector(\"nord-chat-composer-input\")?.value ?? \"\"\n})\ncomposer.addEventListener(\"nord-submit\", () => {\n  composer.value = \"\"\n  setStreaming(true)\n  streamingTimer = window.setTimeout(() => setStreaming(false), 5000)\n})\ncomposer.addEventListener(\"nord-stop\", () => setStreaming(false))\nsetStreaming(false)",{"id":1591,"name":1592,"exportName":1593,"html":1594},"components-chat--composer-validation","Composer — Validation","ComposerValidation","\u003Cdiv>\n      \u003Cdiv style=\"display: grid; gap: var(--n-space-s)\">\n        \u003Cp>Error message (with top position)\u003C\u002Fp>\n        \u003Cnord-chat-composer\n          aria-label=\"Composer with error\"\n          status-position=\"top\"\n        >\u003C\u002Fnord-chat-composer>\n      \u003C\u002Fdiv>\n      \u003Cdiv style=\"display: grid; gap: var(--n-space-s)\">\n        \u003Cp>Warning message (with bottom position)\u003C\u002Fp>\n        \u003Cnord-chat-composer\n          aria-label=\"Composer with warning\"\n        >\u003C\u002Fnord-chat-composer>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>",{"id":1596,"name":1597,"exportName":1598,"html":1599,"js":1600},"components-chat--composer-workflow-multiline","Composer workflow — Multiline entry","ComposerWorkflowMultiline","\u003Cdiv>\n      \u003Cp\n        id=\"composer-workflow-multiline-status\"\n        aria-live=\"polite\"\n      >\n        1 line · Shift + Enter adds a new line\n      \u003C\u002Fp>\n      \u003Cnord-chat-composer\n        id=\"composer-workflow-multiline\"\n        role=\"group\"\n        aria-label=\"Multiline message composer\"\n      >\n        \u003Cnord-chat-composer-input\n          id=\"composer-workflow-multiline-input\"\n          slot=\"input\"\n          label=\"Message\"\n          max-rows=\"5\"\n          placeholder=\"Write a care update…\"\n        >\u003C\u002Fnord-chat-composer-input>\n      \u003C\u002Fnord-chat-composer>\n    \u003C\u002Fdiv>","const composer = document.getElementById(\"composer-workflow-multiline\")\nconst input = document.getElementById(\"composer-workflow-multiline-input\")\nconst status = document.getElementById(\"composer-workflow-multiline-status\")\n\nfunction updateLineCount() {\n  const count = input.value.length > 0 ? input.value.split(\"\\n\").length : 1\n  status.textContent = String(count) + (count === 1 ? \" line\" : \" lines\") + \" · Shift + Enter adds a new line\"\n}\n\ninput.addEventListener(\"input\", updateLineCount)\ncomposer.addEventListener(\"nord-submit\", (event) => {\n  const count = event.value.split(\"\\n\").length\n  status.textContent = \"Sent \" + String(count) + (count === 1 ? \" line\" : \" lines\")\n})\nupdateLineCount()",{"id":1602,"name":1603,"exportName":1604,"html":1605,"js":1606},"components-chat--composer-workflow-history","Composer workflow — History navigation","ComposerWorkflowHistory","\u003Cdiv>\n      \u003Cnord-chat-composer\n        id=\"composer-workflow-history\"\n        role=\"group\"\n        aria-label=\"Composer with message history\"\n      >\n        \u003Cnord-chat-composer-input\n          id=\"composer-workflow-history-input\"\n          slot=\"input\"\n          label=\"Message\"\n          placeholder=\"Write a draft, then revisit recent messages…\"\n        >\u003C\u002Fnord-chat-composer-input>\n      \u003C\u002Fnord-chat-composer>\n      \u003Cnord-stack direction=\"horizontal\" gap=\"s\" wrap>\n        \u003Cnord-button\n          id=\"composer-workflow-history-previous\"\n          type=\"button\"\n          size=\"s\"\n        >\n          Previous message\n        \u003C\u002Fnord-button>\n        \u003Cnord-button\n          id=\"composer-workflow-history-next\"\n          type=\"button\"\n          size=\"s\"\n        >\n          Next message\n        \u003C\u002Fnord-button>\n      \u003C\u002Fnord-stack>\n      \u003Cp\n        id=\"composer-workflow-history-status\"\n        aria-live=\"polite\"\n      >\n        Write a draft, then revisit recent messages\n      \u003C\u002Fp>\n    \u003C\u002Fdiv>","const input = document.getElementById(\"composer-workflow-history-input\")\nconst previous = document.getElementById(\"composer-workflow-history-previous\")\nconst next = document.getElementById(\"composer-workflow-history-next\")\nconst status = document.getElementById(\"composer-workflow-history-status\")\n\ninput.history = [\n  \"When is Bella’s next follow-up?\",\n  \"Please summarize Bella’s latest visit.\"\n]\n\nfunction updateStatus() {\n  status.textContent = input.value\n    ? \"Current draft: \" + input.value\n    : \"Write a draft, then revisit recent messages\"\n}\n\nfunction navigate(key) {\n  input.focus()\n  const boundary = key === \"ArrowUp\" ? 0 : input.value.length\n  input.setSelectionRange(boundary)\n  input.editor.dispatchEvent(new KeyboardEvent(\"keydown\", { key, bubbles: true }))\n}\n\nprevious.addEventListener(\"click\", () => navigate(\"ArrowUp\"))\nnext.addEventListener(\"click\", () => navigate(\"ArrowDown\"))\ninput.addEventListener(\"input\", updateStatus)\nupdateStatus()",{"id":1608,"name":1609,"exportName":1610,"html":1611,"js":1612},"components-chat--composer-workflow-paste-and-files","Composer workflow — Paste and files","ComposerWorkflowPasteAndFiles","\u003Cdiv>\n      \u003Cnord-chat-composer-drawer\n        id=\"composer-workflow-file-list\"\n        role=\"group\"\n        aria-label=\"Files ready to upload\"\n      >\u003C\u002Fnord-chat-composer-drawer>\n      \u003Cnord-chat-composer\n        id=\"composer-workflow-intake\"\n        role=\"group\"\n        aria-label=\"Composer accepting pasted text and files\"\n      >\n        \u003Cnord-button\n          id=\"composer-workflow-paste-sample\"\n          slot=\"header-actions\"\n          type=\"button\"\n          variant=\"plain\"\n          size=\"s\"\n        >\n          Paste sample\n        \u003C\u002Fnord-button>\n        \u003Cnord-button\n          id=\"composer-workflow-choose-files\"\n          slot=\"header-actions\"\n          type=\"button\"\n          variant=\"plain\"\n          size=\"s\"\n        >\n          \u003Cnord-icon name=\"interface-attachment\" size=\"s\">\u003C\u002Fnord-icon>\n          Choose files\n        \u003C\u002Fnord-button>\n        \u003Cinput\n          id=\"composer-workflow-file-picker\"\n          type=\"file\"\n          accept=\".pdf,image\u002F*\"\n          multiple\n          hidden\n          aria-label=\"Choose files to upload\"\n        \u002F>\n        \u003Cnord-chat-composer-input\n          id=\"composer-workflow-intake-input\"\n          slot=\"input\"\n          label=\"Message\"\n          paste-as-token\n          paste-token-threshold=\"40\"\n          accept=\".pdf,image\u002F*\"\n          max-files=\"3\"\n          max-file-size=\"5242880\"\n          placeholder=\"Paste detailed notes or drop files…\"\n        >\u003C\u002Fnord-chat-composer-input>\n      \u003C\u002Fnord-chat-composer>\n      \u003Cp\n        id=\"composer-workflow-intake-status\"\n        aria-live=\"polite\"\n      >\n        PDF and image files up to 5 MB · maximum 3 files\n      \u003C\u002Fp>\n    \u003C\u002Fdiv>","const input = document.getElementById(\"composer-workflow-intake-input\")\nconst pasteSample = document.getElementById(\"composer-workflow-paste-sample\")\nconst chooseFiles = document.getElementById(\"composer-workflow-choose-files\")\nconst filePicker = document.getElementById(\"composer-workflow-file-picker\")\nconst fileList = document.getElementById(\"composer-workflow-file-list\")\nconst status = document.getElementById(\"composer-workflow-intake-status\")\n\nfunction pasteText(text) {\n  const transfer = new DataTransfer()\n  transfer.setData(\"text\u002Fplain\", text)\n  input.focus()\n  input.setSelectionRange(input.value.length)\n  input.editor.dispatchEvent(new ClipboardEvent(\"paste\", {\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n    clipboardData: transfer\n  }))\n}\n\nfunction shareFiles(files) {\n  const transfer = new DataTransfer()\n  files.forEach((file) => transfer.items.add(file))\n  input.editor.dispatchEvent(new DragEvent(\"drop\", {\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n    dataTransfer: transfer\n  }))\n}\n\npasteSample.addEventListener(\"click\", () => {\n  pasteText(\"Bella’s discharge instructions and follow-up care notes from today’s appointment.\")\n})\nchooseFiles.addEventListener(\"click\", () => filePicker.click())\nfilePicker.addEventListener(\"change\", () => {\n  shareFiles(Array.from(filePicker.files || []))\n  filePicker.value = \"\"\n})\ninput.addEventListener(\"nord-paste-token\", () => {\n  status.textContent = \"Pasted text added as a token\"\n})\ninput.addEventListener(\"nord-files\", (event) => {\n  fileList.replaceChildren()\n  event.files.forEach((file) => {\n    const badge = document.createElement(\"nord-badge\")\n    badge.textContent = file.name\n    fileList.append(badge)\n  })\n  const ready = event.files.length\n  const rejected = event.rejectedFiles.length\n  status.textContent = String(ready) + (ready === 1 ? \" file ready\" : \" files ready\")\n    + (rejected > 0 ? \" · \" + String(rejected) + \" rejected\" : \"\")\n})",{"id":1614,"name":1615,"exportName":1616,"html":1617,"js":1618},"components-chat--composer-workflow-loading","Composer workflow — Loading state","ComposerWorkflowLoading","\u003Cdiv>\n      \u003Cnord-chat-composer\n        id=\"composer-workflow-loading\"\n        role=\"group\"\n        aria-label=\"Loading message composer\"\n        loading\n      >\n        \u003Cnord-chat-composer-input\n          slot=\"input\"\n          label=\"Message\"\n          default-value=\"Review Bella’s latest care notes\"\n        >\u003C\u002Fnord-chat-composer-input>\n      \u003C\u002Fnord-chat-composer>\n      \u003Cnord-stack direction=\"horizontal\" align-items=\"center\" gap=\"s\" wrap>\n        \u003Cnord-button\n          id=\"composer-workflow-loading-toggle\"\n          type=\"button\"\n          size=\"s\"\n          aria-pressed=\"true\"\n          aria-label=\"Mark response ready\"\n        >\n          Toggle loading state\n        \u003C\u002Fnord-button>\n        \u003Cp\n          id=\"composer-workflow-loading-status\"\n          aria-live=\"polite\"\n        >\n          Preparing a response…\n        \u003C\u002Fp>\n      \u003C\u002Fnord-stack>\n    \u003C\u002Fdiv>","const composer = document.getElementById(\"composer-workflow-loading\")\nconst toggle = document.getElementById(\"composer-workflow-loading-toggle\")\nconst status = document.getElementById(\"composer-workflow-loading-status\")\n\nfunction setLoading(loading) {\n  composer.loading = loading\n  toggle.ariaPressed = String(loading)\n  toggle.setAttribute(\"aria-label\", loading ? \"Mark response ready\" : \"Show loading state\")\n  status.textContent = loading ? \"Preparing a response…\" : \"Ready to send\"\n}\n\ntoggle.addEventListener(\"click\", () => setLoading(!composer.loading))\nsetLoading(true)",{"id":1620,"name":1621,"exportName":1622,"html":1623},"components-chat--composer-workflow-compact","Composer workflow — Compact layout","ComposerWorkflowCompact","\u003Cdiv>\n      \u003Cp>\n        Compact spacing preserves the same keyboard and submission behavior\n      \u003C\u002Fp>\n      \u003Cnord-chat-composer\n        id=\"composer-workflow-compact\"\n        density=\"compact\"\n        role=\"group\"\n        aria-label=\"Compact message composer\"\n      >\n        \u003Cnord-chat-composer-input\n          id=\"composer-workflow-compact-input\"\n          slot=\"input\"\n          label=\"Message\"\n          max-rows=\"3\"\n          placeholder=\"Add a concise update…\"\n        >\u003C\u002Fnord-chat-composer-input>\n        \u003Cnord-button\n          slot=\"send-actions\"\n          type=\"button\"\n          variant=\"plain\"\n          size=\"s\"\n          square\n        >\n          \u003Cnord-icon name=\"interface-attachment\" size=\"s\">\u003C\u002Fnord-icon>\n          \u003Cnord-visually-hidden>Attach file\u003C\u002Fnord-visually-hidden>\n        \u003C\u002Fnord-button>\n        \u003Cnord-chat-send-button slot=\"send-button\">\u003C\u002Fnord-chat-send-button>\n      \u003C\u002Fnord-chat-composer>\n    \u003C\u002Fdiv>",{"id":1625,"name":1626,"exportName":1627,"html":1628,"js":1567},"components-chat--composer-drawer-overview","ComposerDrawer Overview","ComposerDrawerOverview","\u003Cdiv>\n      \u003Cnord-chat-composer-drawer\n        count=\"4\"\n        label=\"Attachments\"\n        default-open\n      >\n        \n      \u003C\u002Fnord-chat-composer-drawer>\n      \u003Cnord-chat-composer\n        aria-label=\"Composer drawer showcase\"\n      >\n        \u003Cnord-button slot=\"header-actions\" type=\"button\" variant=\"plain\" size=\"s\">\n          \u003Cnord-icon name=\"interface-attachment\" size=\"s\">\u003C\u002Fnord-icon>\n          Attach\n        \u003C\u002Fnord-button>\n      \u003C\u002Fnord-chat-composer>\n    \u003C\u002Fdiv>",{"id":1630,"name":1631,"exportName":1632,"html":1633,"js":1567},"components-chat--composer-drawer-attachments","Composer — Image Attachments","ComposerDrawerAttachments","\u003Cdiv\n      style=\"display: flex; flex-direction: column; gap: var(--n-space-s); inline-size: 28rem; max-inline-size: 100%\"\n    >\n      \u003Cnord-chat-composer-drawer role=\"group\" aria-label=\"Attachments\">\n        \u003Cdiv\n          style=\"display: flex; gap: var(--n-space-xs); inline-size: 100%; overflow-x: auto\"\n        >\n          \u003Cnord-chat-attachment\n            src=\"\u002Fimg\u002Fpet.jpg\"\n            alt=\"Black pug portrait\"\n            name=\"bella-portrait.jpg\"\n            removable\n          >\u003C\u002Fnord-chat-attachment>\n          \u003Cnord-chat-attachment\n            src=\"\u002Fimg\u002Favatar-animal.jpg\"\n            alt=\"Black pug close-up\"\n            name=\"bella-avatar.jpg\"\n            removable\n          >\u003C\u002Fnord-chat-attachment>\n        \u003C\u002Fdiv>\n        \u003Cdiv\n          style=\"display: flex; flex-wrap: wrap; gap: var(--n-space-xs); inline-size: 100%\"\n        >\n          \u003Cnord-chat-attachment\n            name=\"consent-form.pdf\"\n            removable\n          >\u003C\u002Fnord-chat-attachment>\n          \u003Cnord-chat-attachment\n            name=\"invoice.pdf\"\n            removable\n          >\u003C\u002Fnord-chat-attachment>\n        \u003C\u002Fdiv>\n      \u003C\u002Fnord-chat-composer-drawer>\n      \u003Cnord-chat-composer aria-label=\"Composer with image attachments\">\u003C\u002Fnord-chat-composer>\n    \u003C\u002Fdiv>",{"id":1635,"name":1636,"exportName":1637,"html":1638,"js":1639},"components-chat--composer-drawer-collapsible","ComposerDrawer — Collapsible","ComposerDrawerCollapsible","\u003Cdiv>\n      \u003Cnord-chat-composer-drawer\n        id=\"composer-drawer-collapsible\"\n        count=\"6\"\n        label=\"Files\"\n        default-open\n      >\n        \n      \u003C\u002Fnord-chat-composer-drawer>\n      \u003Cnord-chat-composer\n        aria-label=\"Composer with collapsible files\"\n      >\u003C\u002Fnord-chat-composer>\n    \u003C\u002Fdiv>","const drawer = document.getElementById(\"composer-drawer-collapsible\")\nconst files = [\n  \"care-plan.pdf\",\n  \"lab-results.csv\",\n  \"consent-form.pdf\",\n  \"visit-notes.docx\",\n  \"invoice.pdf\",\n  \"discharge-guide.pdf\",\n]\nfiles.forEach((label) => {\n  const badge = document.createElement(\"nord-badge\")\n  badge.textContent = label\n  drawer.appendChild(badge)\n})",{"id":1641,"name":1642,"exportName":1643,"html":1644,"js":1645},"components-chat--composer-drawer-feedback","Composer — Feedback","ComposerDrawerFeedback","\u003Cdiv\n      id=\"composer-drawer-feedback\"\n      style=\"display: flex; flex-direction: column; gap: var(--n-space-s); inline-size: 28rem; max-inline-size: 100%\"\n    >\n      \u003Cdiv\n        role=\"group\"\n        aria-label=\"User feedback requested\"\n        style=\"display: grid; gap: var(--n-space-xs); inline-size: 100%\"\n      >\n        \u003Cstrong>Do you want to proceed?\u003C\u002Fstrong>\n        \u003Cnord-button\n          data-feedback-option\n          type=\"button\"\n          variant=\"plain\"\n          expand\n          aria-pressed=\"false\"\n          style=\"--n-button-text-align: start\"\n        >\n          \u003Cnord-badge slot=\"start\">A\u003C\u002Fnord-badge>\n          Yes\n        \u003C\u002Fnord-button>\n        \u003Cnord-button\n          data-feedback-option\n          type=\"button\"\n          variant=\"plain\"\n          expand\n          aria-pressed=\"false\"\n          style=\"--n-button-text-align: start\"\n        >\n          \u003Cnord-badge slot=\"start\">B\u003C\u002Fnord-badge>\n          Yes, and remember this choice for this visit\n        \u003C\u002Fnord-button>\n        \u003Cnord-button\n          data-feedback-option\n          type=\"button\"\n          variant=\"plain\"\n          expand\n          aria-pressed=\"false\"\n          style=\"--n-button-text-align: start\"\n        >\n          \u003Cnord-badge slot=\"start\">C\u003C\u002Fnord-badge>\n          No, and tell me what to do differently\n        \u003C\u002Fnord-button>\n      \u003C\u002Fdiv>\n      \u003Cnord-chat-composer aria-label=\"Composer requesting feedback\">\u003C\u002Fnord-chat-composer>\n    \u003C\u002Fdiv>","document.querySelectorAll(\"#composer-drawer-feedback [data-feedback-option]\").forEach((button) => {\n  button.addEventListener(\"click\", () => {\n    document.querySelectorAll(\"#composer-drawer-feedback [data-feedback-option]\").forEach((option) => {\n      const selected = option === button\n      option.ariaPressed = String(selected)\n      option.variant = selected ? \"primary\" : \"plain\"\n      option.querySelector(\"nord-badge\").variant = selected ? \"info\" : \"neutral\"\n    })\n  })\n})",{"id":1647,"name":1648,"exportName":1649,"html":1650,"js":1567},"components-chat--composer-drawer-with-progress","Composer — With Progress","ComposerDrawerWithProgress","\u003Cdiv style=\"display: flex; flex-direction: column; gap: var(--n-space-s); inline-size: 28rem; max-inline-size: 100%\">\n      \u003Cnord-chat-composer-drawer role=\"group\" aria-label=\"Attachments\">\n        \u003Cspan style=\"display: inline-flex; align-items: center; gap: var(--n-space-xs); inline-size: 100%; color: var(--n-color-text-weaker); font-size: var(--n-font-size-s)\">\n          \u003Cnord-icon name=\"interface-attachment\" size=\"s\">\u003C\u002Fnord-icon>\n          Attachments\n        \u003C\u002Fspan>\n        \u003Cdiv style=\"display: flex; gap: var(--n-space-xs); inline-size: 100%; overflow-x: auto\">\n          \u003Cnord-chat-attachment\n            src=\"\u002Fimg\u002Fpet.jpg\"\n            name=\"recovery-photo.jpg\"\n            removable\n          >\u003C\u002Fnord-chat-attachment>\n        \u003C\u002Fdiv>\n        \u003Cdiv style=\"display: flex; flex-wrap: wrap; gap: var(--n-space-xs); inline-size: 100%\">\n          \u003Cnord-chat-attachment name=\"care-plan.pdf\" removable>\u003C\u002Fnord-chat-attachment>\n          \u003Cnord-chat-attachment name=\"lab-results.csv\" removable>\u003C\u002Fnord-chat-attachment>\n        \u003C\u002Fdiv>\n      \u003C\u002Fnord-chat-composer-drawer>\n      \u003Cnord-chat-composer aria-label=\"Composer with context progress\">\n      \u003Cnord-button\n        slot=\"header-actions\"\n        type=\"button\"\n        variant=\"plain\"\n        size=\"s\"\n        aria-label=\"Mention\"\n      >\n        \u003Cnord-icon name=\"interface-chat\" size=\"s\">\u003C\u002Fnord-icon>\n      \u003C\u002Fnord-button>\n      \u003Cnord-button\n        slot=\"header-actions\"\n        type=\"button\"\n        variant=\"plain\"\n        size=\"s\"\n        aria-label=\"Attach\"\n      >\n        \u003Cnord-icon name=\"interface-attachment\" size=\"s\">\u003C\u002Fnord-icon>\n      \u003C\u002Fnord-button>\n      \u003Cnord-progress-bar\n        slot=\"header-context\"\n        value=\"42\"\n        label=\"Context usage\"\n        style=\"inline-size: 7rem\"\n      >\u003C\u002Fnord-progress-bar>\n      \u003C\u002Fnord-chat-composer>\n    \u003C\u002Fdiv>",{"id":1652,"name":1653,"exportName":1654,"html":1655},"components-chat--composer-input-overview","ComposerInput Overview","ComposerInputOverview","\u003Cnord-chat-composer aria-label=\"Rich input composer\">\n      \u003Cnord-chat-composer-input\n        slot=\"input\"\n        label=\"Message input\"\n        placeholder=\"Ask about Bella’s care plan…\"\n      >\u003C\u002Fnord-chat-composer-input>\n    \u003C\u002Fnord-chat-composer>",{"id":1657,"name":1658,"exportName":1659,"html":1660,"js":1661},"components-chat--composer-input-controlled","ComposerInput — Controlled","ComposerInputControlled","\u003Cdiv>\n      \u003Cnord-chat-composer\n        id=\"composer-input-controlled\"\n        aria-label=\"Controlled composer\"\n      >\n        \u003Cnord-chat-composer-input\n          id=\"composer-input-controlled-field\"\n          slot=\"input\"\n          label=\"Message input\"\n          placeholder=\"Type a message…\"\n        >\u003C\u002Fnord-chat-composer-input>\n      \u003C\u002Fnord-chat-composer>\n      \u003Cp id=\"composer-input-controlled-value\">\n        Value: \"\"\n      \u003C\u002Fp>\n    \u003C\u002Fdiv>","const composer = document.getElementById(\"composer-input-controlled\")\nconst input = document.getElementById(\"composer-input-controlled-field\")\nconst output = document.getElementById(\"composer-input-controlled-value\")\n\nfunction sync(value) {\n  composer.value = value\n  input.value = value\n  output.textContent = \"Value: \" + JSON.stringify(value)\n}\n\ninput.addEventListener(\"input\", () => sync(input.value))\ncomposer.addEventListener(\"nord-submit\", () => sync(\"\"))\nsync(\"\")",{"id":1663,"name":1664,"exportName":1665,"html":1666},"components-chat--composer-input-disabled","ComposerInput — Disabled","ComposerInputDisabled","\u003Cnord-chat-composer\n      aria-label=\"Disabled composer\"\n      disabled\n    >\n      \u003Cnord-chat-composer-input\n        slot=\"input\"\n        label=\"Message input\"\n        placeholder=\"Input is disabled\"\n        disabled\n      >\u003C\u002Fnord-chat-composer-input>\n    \u003C\u002Fnord-chat-composer>",{"id":1668,"name":1669,"exportName":1670,"html":1671},"components-chat--composer-input-mentions","ComposerInput — Mentions","ComposerInputMentions","\u003Cnord-chat-composer\n      aria-label=\"Composer with mentions\"\n    >\n      \u003Cnord-chat-composer-input\n        slot=\"input\"\n        label=\"Message input\"\n        placeholder=\"Type @ to mention someone…\"\n      >\u003C\u002Fnord-chat-composer-input>\n    \u003C\u002Fnord-chat-composer>",{"id":1673,"name":1674,"exportName":1675,"html":1676},"components-chat--composer-input-multiple-triggers","ComposerInput — Multiple Triggers","ComposerInputMultipleTriggers","\u003Cdiv>\n      \u003Cp>Type @ for mentions or \u002F for commands\u003C\u002Fp>\n      \u003Cnord-chat-composer\n        aria-label=\"Composer with multiple triggers\"\n      >\n        \u003Cnord-chat-composer-input\n          slot=\"input\"\n          label=\"Message input\"\n          placeholder=\"Type @ or \u002F …\"\n        >\u003C\u002Fnord-chat-composer-input>\n      \u003C\u002Fnord-chat-composer>\n    \u003C\u002Fdiv>",{"id":1678,"name":1679,"exportName":1680,"html":1681},"components-chat--composer-input-slash-commands","ComposerInput — Slash Commands","ComposerInputSlashCommands","\u003Cnord-chat-composer\n      aria-label=\"Composer with slash commands\"\n    >\n      \u003Cnord-chat-composer-input\n        slot=\"input\"\n        label=\"Message input\"\n        placeholder=\"Type \u002F for commands…\"\n      >\u003C\u002Fnord-chat-composer-input>\n    \u003C\u002Fnord-chat-composer>",{"id":1683,"name":1684,"exportName":1685,"html":1686},"components-chat--composer-send-button-overview","ChatSendButton — Overview","ComposerSendButtonOverview","\u003Cdiv style=\"display: flex; align-items: center; gap: var(--n-space-m)\">\n      \u003Cnord-chat-send-button>\u003C\u002Fnord-chat-send-button>\n      \u003Cnord-chat-send-button send-label=\"Generate response\">\n        \u003Cnord-icon slot=\"send-icon\" name=\"interface-ai\" size=\"s\">\u003C\u002Fnord-icon>\n      \u003C\u002Fnord-chat-send-button>\n      \u003Cnord-chat-send-button stop-shown>\u003C\u002Fnord-chat-send-button>\n    \u003C\u002Fdiv>",{"id":1688,"name":1689,"exportName":1690,"html":1691},"components-chat--composer-send-button-custom-icon","ChatSendButton — Custom Icon","ComposerSendButtonCustomIcon","\u003Cdiv>\n      \u003Cp>Custom icons for send and stop states\u003C\u002Fp>\n      \u003Cdiv style=\"display: flex; align-items: center; gap: var(--n-space-l)\">\n        \u003Cnord-chat-send-button send-label=\"Send message\">\n          \u003Cnord-icon\n            slot=\"send-icon\"\n            name=\"interface-send\"\n            size=\"s\"\n          >\u003C\u002Fnord-icon>\n        \u003C\u002Fnord-chat-send-button>\n        \u003Cnord-chat-send-button send-label=\"Confirm\">\n          \u003Cnord-icon\n            slot=\"send-icon\"\n            name=\"interface-checked\"\n            size=\"s\"\n          >\u003C\u002Fnord-icon>\n        \u003C\u002Fnord-chat-send-button>\n        \u003Cnord-chat-send-button send-label=\"Generate response\">\n          \u003Cnord-icon slot=\"send-icon\" name=\"interface-ai\" size=\"s\">\u003C\u002Fnord-icon>\n        \u003C\u002Fnord-chat-send-button>\n        \u003Cnord-chat-send-button stop-shown stop-label=\"Cancel generation\">\n          \u003Cnord-icon\n            slot=\"stop-icon\"\n            name=\"interface-close-small\"\n            size=\"s\"\n          >\u003C\u002Fnord-icon>\n        \u003C\u002Fnord-chat-send-button>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>",{"id":1693,"name":1694,"exportName":1695,"html":1696},"components-chat--composer-send-button-in-composer","ChatSendButton — In Composer","ComposerSendButtonInComposer","\u003Cnord-chat-composer\n      aria-label=\"Composer with enabled send button\"\n    >\u003C\u002Fnord-chat-composer>",{"id":1698,"name":1699,"exportName":1700,"html":1701},"components-chat--composer-send-button-states","ChatSendButton — States","ComposerSendButtonStates","\u003Cdiv>\n      \u003Cp>Disabled → Ready → Streaming\u003C\u002Fp>\n      \u003Cdiv style=\"display: flex; align-items: center; gap: var(--n-space-m)\">\n        \u003Cnord-chat-send-button\n          disabled\n          send-label=\"Send unavailable\"\n        >\u003C\u002Fnord-chat-send-button>\n        \u003Cnord-chat-send-button\n          send-label=\"Send message\"\n        >\u003C\u002Fnord-chat-send-button>\n        \u003Cnord-chat-send-button\n          stop-shown\n          stop-label=\"Stop streaming\"\n        >\u003C\u002Fnord-chat-send-button>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>",{"id":1703,"name":1704,"exportName":1705,"html":1706,"js":1707},"components-chat--composer-tokenized-text-overview","ChatTokenizedText — Overview","ComposerTokenizedTextOverview","\u003Cnord-chat-message-list\n      aria-label=\"Tokenized message example\"\n    >\n      \u003Cnord-chat-message sender=\"system\">\n        \u003Cnord-chat-message-bubble>\n          \u003Cnord-chat-tokenized-text\n            id=\"tokenized-text-overview\"\n          >\u003C\u002Fnord-chat-tokenized-text>\n        \u003C\u002Fnord-chat-message-bubble>\n      \u003C\u002Fnord-chat-message>\n    \u003C\u002Fnord-chat-message-list>","const text = document.getElementById(\"tokenized-text-overview\")\ntext.tokens = [\n  { value: \"@cindy\", label: \"@Cindy\", variant: \"info\" },\n  { value: \"#urgent\", label: \"#urgent\", variant: \"danger\" },\n  { value: \"#followup\", label: \"#follow-up\", variant: \"success\" },\n]\ntext.value = \"@cindy marked #urgent and #followup for Bella’s care plan\"",{"id":1709,"name":1710,"exportName":1711,"html":1712,"js":1713},"components-chat--composer-tokenized-text-basic","ChatTokenizedText — Basic","ComposerTokenizedTextBasic","\u003Cnord-chat-message-list\n      aria-label=\"Mention token example\"\n    >\n      \u003Cnord-chat-message sender=\"system\">\n        \u003Cnord-chat-message-bubble>\n          \u003Cnord-chat-tokenized-text\n            id=\"tokenized-text-basic\"\n          >\u003C\u002Fnord-chat-tokenized-text>\n        \u003C\u002Fnord-chat-message-bubble>\n      \u003C\u002Fnord-chat-message>\n    \u003C\u002Fnord-chat-message-list>","const text = document.getElementById(\"tokenized-text-basic\")\ntext.tokens = [\n  { value: \"@cindy\", label: \"@Cindy\", variant: \"info\" },\n  { value: \"@alex\", label: \"@Alex\", variant: \"info\" },\n]\ntext.value = \"Ask @cindy and @alex to review Bella’s care plan.\"",{"id":1715,"name":1716,"exportName":1717,"html":1718,"js":1719},"components-chat--composer-tokenized-text-colors","ChatTokenizedText — Colors","ComposerTokenizedTextColors","\u003Cnord-chat-message-list\n      aria-label=\"Semantic token color example\"\n    >\n      \u003Cnord-chat-message sender=\"system\">\n        \u003Cnord-chat-message-bubble>\n          \u003Cnord-chat-tokenized-text\n            id=\"tokenized-text-colors\"\n          >\u003C\u002Fnord-chat-tokenized-text>\n        \u003C\u002Fnord-chat-message-bubble>\n      \u003C\u002Fnord-chat-message>\n    \u003C\u002Fnord-chat-message-list>","const text = document.getElementById(\"tokenized-text-colors\")\ntext.tokens = [\n  { value: \"@cindy\", label: \"@Cindy\", variant: \"info\" },\n  { value: \"#urgent\", label: \"#urgent\", variant: \"danger\" },\n  { value: \"#followup\", label: \"#follow-up\", variant: \"success\" },\n]\ntext.value = \"@cindy marked #urgent and #followup for Bella’s care plan\"",{"id":1721,"name":1722,"exportName":1723,"html":1724},"components-chat--dictation-overview","DictationButton Overview","DictationOverview","\u003Cnord-stack gap=\"m\" style=\"inline-size: min(100%, 28rem)\">\n      \u003Cp style=\"margin: 0; color: var(--n-color-text-weaker); font-size: var(--n-font-size-s)\">\n        Click the microphone to start dictating. Speech is transcribed into the input.\n      \u003C\u002Fp>\n      \u003Cnord-chat-composer aria-label=\"Message composer with dictation\">\n        \u003Cnord-chat-composer-input\n          slot=\"input\"\n          label=\"Message input\"\n          placeholder=\"Type a message…\"\n        >\u003C\u002Fnord-chat-composer-input>\n        \u003Cnord-chat-dictation-button\n          slot=\"send-actions\"\n          unsupported-behavior=\"disable\"\n        >\u003C\u002Fnord-chat-dictation-button>\n      \u003C\u002Fnord-chat-composer>\n    \u003C\u002Fnord-stack>",{"id":1726,"name":73,"exportName":73,"html":1727,"js":1728},"components-chat--basic","\u003Cnord-stack style=\"inline-size: min(100%, 28rem)\">\n      \u003Cnord-chat-composer\n        id=\"chat-dictation-basic\"\n        style=\"inline-size: 100%\"\n        aria-label=\"Message composer with dictation\"\n      >\n        \u003Cnord-chat-composer-input\n          id=\"chat-dictation-basic-input\"\n          slot=\"input\"\n          label=\"Message input\"\n          placeholder=\"Type a message…\"\n        >\u003C\u002Fnord-chat-composer-input>\n        \u003Cnord-chat-dictation-button\n          id=\"chat-dictation-basic-button\"\n          slot=\"send-actions\"\n          unsupported-behavior=\"disable\"\n        >\u003C\u002Fnord-chat-dictation-button>\n      \u003C\u002Fnord-chat-composer>\n    \u003C\u002Fnord-stack>","const input = document.getElementById(\"chat-dictation-basic-input\")\nconst dictation = document.getElementById(\"chat-dictation-basic-button\")\n\ndictation.addEventListener(\"nord-dictation-result\", (event) => {\n  input.interimText = \"\"\n  input.focus()\n  input.insertText(event.transcript + \" \")\n})\n\ndictation.addEventListener(\"nord-transcript\", (event) => {\n  input.interimText = event.final ? \"\" : event.transcript\n})\n\ndictation.addEventListener(\"nord-dictation-end\", () => {\n  input.interimText = \"\"\n})\n\ndictation.addEventListener(\"nord-dictation-error\", () => {\n  input.interimText = \"\"\n})",{"id":1730,"name":1731,"exportName":1731,"html":1732},"components-chat--sizes","Sizes","\u003Cnord-stack gap=\"m\">\n      \u003Cnord-stack gap=\"s\">\n        \u003Cspan>Small\u003C\u002Fspan>\n        \u003Cnord-chat-dictation-button\n          size=\"s\"\n          unsupported-behavior=\"disable\"\n        >\u003C\u002Fnord-chat-dictation-button>\n      \u003C\u002Fnord-stack>\n      \u003Cnord-stack gap=\"s\">\n        \u003Cspan>Medium\u003C\u002Fspan>\n        \u003Cnord-chat-dictation-button\n          size=\"m\"\n          unsupported-behavior=\"disable\"\n        >\u003C\u002Fnord-chat-dictation-button>\n      \u003C\u002Fnord-stack>\n    \u003C\u002Fnord-stack>",{"id":1734,"name":1735,"exportName":1736,"html":1737},"components-chat--unsupported-and-privacy","Unsupported browser and privacy","UnsupportedAndPrivacy","\u003Cnord-stack gap=\"m\">\n      \u003Cnord-chat-dictation-button\n        disabled\n        label=\"Dictation unavailable\"\n        unsupported-behavior=\"disable\"\n      >\u003C\u002Fnord-chat-dictation-button>\n      \u003Cspan>Dictation is unavailable. Continue by typing your message.\u003C\u002Fspan>\n      \u003Csmall>\n        Dictation may send audio to your browser or operating system provider for recognition.\n        Only enable it after an explicit user action and an appropriate privacy disclosure.\n      \u003C\u002Fsmall>\n    \u003C\u002Fnord-stack>",{"id":1739,"name":1740,"exportName":1741,"html":1742,"js":1743},"components-chat--tool-calls-overview","ToolCalls Overview","ToolCallsOverview","\u003Cnord-chat-tool-calls\n      id=\"tool-calls-overview\"\n      default-open\n    >\u003C\u002Fnord-chat-tool-calls>","document.getElementById(\"tool-calls-overview\").calls = [\n  { name: \"search\", target: \"Recent appointment history\", status: \"complete\", duration: \"340ms\" },\n  { name: \"read\", target: \"Bella’s care plan\", status: \"complete\", duration: \"45ms\" },\n  { name: \"update\", target: \"Bella’s follow-up plan\", status: \"complete\", duration: \"120ms\", stats: \"2 follow-up items updated\" },\n]",{"id":1745,"name":1746,"exportName":1746,"html":1747,"js":1748},"components-chat--simple","Simple","\u003Cnord-stack gap=\"l\">\n      \u003Cnord-chat-tool-calls\n        id=\"tool-calls-simple-collapsed\"\n      >\u003C\u002Fnord-chat-tool-calls>\n      \u003Cnord-chat-tool-calls\n        id=\"tool-calls-simple-open\"\n        default-open\n      >\u003C\u002Fnord-chat-tool-calls>\n    \u003C\u002Fnord-stack>","document.getElementById(\"tool-calls-simple-collapsed\").calls = [\n  { name: \"search\", target: \"Recent appointments\", status: \"complete\", duration: \"1.2s\" },\n]\ndocument.getElementById(\"tool-calls-simple-open\").calls = [\n  { name: \"read\", target: \"Patient record\", status: \"complete\", duration: \"30ms\" },\n  { name: \"update\", target: \"Visit summary\", status: \"complete\", duration: \"85ms\", stats: \"Visit summary refreshed\" },\n  { name: \"update\", target: \"Follow-up checklist\", status: \"complete\", duration: \"60ms\", stats: \"3 reminders added\" },\n]",{"id":1750,"name":1751,"exportName":1751,"html":1752,"js":1753},"components-chat--statuses","Statuses","\u003Cnord-chat-tool-calls\n      id=\"tool-calls-statuses\"\n      default-open\n    >\u003C\u002Fnord-chat-tool-calls>","document.getElementById(\"tool-calls-statuses\").calls = [\n  { key: \"pending\", name: \"read\", target: \"Appointment history\", status: \"pending\" },\n  { key: \"running\", name: \"search\", target: \"Care notes\", status: \"running\" },\n  { key: \"complete\", name: \"update\", target: \"Treatment plan\", status: \"complete\", duration: \"120ms\", stats: \"Treatment plan saved\" },\n  { key: \"error\", name: \"notify\", target: \"Care team\", status: \"error\", duration: \"0.8s\", errorMessage: \"Care team notification could not be delivered\" },\n]",{"id":1755,"name":1756,"exportName":1756,"html":1757,"js":1758},"components-chat--expandable","Expandable","\u003Cnord-chat-tool-calls\n        id=\"tool-calls-expandable\"\n        default-open\n      >\u003C\u002Fnord-chat-tool-calls>","const toolCalls = document.getElementById(\"tool-calls-expandable\")\n\nconst planUpdate = document.createElement(\"div\")\nplanUpdate.textContent = \"Added a two-week follow-up review and repeat laboratory panel.\"\n\nconst reviewSummary = document.createElement(\"div\")\nreviewSummary.textContent = \"All reviewed results are stable apart from one mildly elevated value.\"\n\ntoolCalls.calls = [\n  {\n    name: \"update\",\n    target: \"Bella’s care plan\",\n    status: \"complete\",\n    duration: \"85ms\",\n    node: \"care-records\",\n    stats: \"Follow-up timing updated\",\n    resultDetail: planUpdate,\n  },\n  {\n    name: \"review\",\n    target: \"Bella’s lab results\",\n    status: \"complete\",\n    duration: \"1.8s\",\n    node: \"care-records\",\n    resultDetail: reviewSummary,\n  },\n  {\n    name: \"search\",\n    target: \"Post-operative recovery guidance\",\n    status: \"complete\",\n    duration: \"1.2s\",\n  },\n]",{"hasPlayground":167,"playgroundId":1760,"stories":1761},"components-timestamp--playground",[1762,1766,1770,1775,1780,1785,1789,1794,1799],{"id":1763,"name":50,"exportName":50,"html":1764,"js":1765},"components-timestamp--overview","\u003Cnord-timestamp\n      value=\"2025-03-21T14:51:53.000Z\"\n      data-offset-seconds=\"-7200\"\n      format=\"auto\"\n      show-tooltip\n      time-zone=\"UTC\"\n    >\u003C\u002Fnord-timestamp>","const now = Date.now()\ndocument.querySelectorAll(\"[data-offset-seconds]\").forEach((timestamp) => {\n  timestamp.value = new Date(\n    now + Number(timestamp.dataset.offsetSeconds) * 1000,\n  ).toISOString()\n})",{"id":1767,"name":1768,"exportName":1768,"html":1769,"js":1765},"components-timestamp--formats","Formats","\u003Cnord-stack gap=\"s\">\n      \u003Cspan>\n        Relative:\n        \u003Cnord-timestamp\n          value=\"2025-03-21T14:51:53.000Z\"\n          data-offset-seconds=\"-7200\"\n          format=\"relative\"\n          time-zone=\"UTC\"\n        >\u003C\u002Fnord-timestamp>\n      \u003C\u002Fspan>\n      \u003Cspan>\n        Auto:\n        \u003Cnord-timestamp\n          value=\"2025-03-21T14:51:53.000Z\"\n          data-offset-seconds=\"-7200\"\n          format=\"auto\"\n          time-zone=\"UTC\"\n        >\u003C\u002Fnord-timestamp>\n      \u003C\u002Fspan>\n      \u003Cspan>\n        Date:\n        \u003Cnord-timestamp value=\"2025-03-21T14:51:53.000Z\" format=\"date\" time-zone=\"UTC\">\u003C\u002Fnord-timestamp>\n      \u003C\u002Fspan>\n      \u003Cspan>\n        Date and time:\n        \u003Cnord-timestamp value=\"2025-03-21T14:51:53.000Z\" format=\"date-time\" time-zone=\"UTC\">\u003C\u002Fnord-timestamp>\n      \u003C\u002Fspan>\n      \u003Cspan>\n        Time:\n        \u003Cnord-timestamp value=\"2025-03-21T14:51:53.000Z\" format=\"time\" time-zone=\"UTC\">\u003C\u002Fnord-timestamp>\n      \u003C\u002Fspan>\n      \u003Cspan>\n        System date:\n        \u003Cnord-timestamp value=\"2025-03-21T14:51:53.000Z\" format=\"system-date\" time-zone=\"UTC\">\u003C\u002Fnord-timestamp>\n      \u003C\u002Fspan>\n      \u003Cspan>\n        System date and time:\n        \u003Cnord-timestamp value=\"2025-03-21T14:51:53.000Z\" format=\"system-date-time\" time-zone=\"UTC\">\u003C\u002Fnord-timestamp>\n      \u003C\u002Fspan>\n      \u003Cspan>\n        System time:\n        \u003Cnord-timestamp value=\"2025-03-21T14:51:53.000Z\" format=\"system-time\" time-zone=\"UTC\">\u003C\u002Fnord-timestamp>\n      \u003C\u002Fspan>\n    \u003C\u002Fnord-stack>",{"id":1771,"name":1772,"exportName":1773,"html":1774,"js":1765},"components-timestamp--relative-boundaries","Relative Boundaries","RelativeBoundaries","\u003Cnord-stack gap=\"s\">\n      \u003Cspan>\n        Future skew, 30 seconds:\n        \u003Cnord-timestamp value=\"2025-03-21T14:51:53.000Z\" data-offset-seconds=\"30\" format=\"relative\">\u003C\u002Fnord-timestamp>\n      \u003C\u002Fspan>\n      \u003Cspan>\n        Future, 31 seconds:\n        \u003Cnord-timestamp value=\"2025-03-21T14:51:53.000Z\" data-offset-seconds=\"31\" format=\"relative\">\u003C\u002Fnord-timestamp>\n      \u003C\u002Fspan>\n      \u003Cspan>\n        Past, 59 seconds:\n        \u003Cnord-timestamp value=\"2025-03-21T14:51:53.000Z\" data-offset-seconds=\"-59\" format=\"relative\">\u003C\u002Fnord-timestamp>\n      \u003C\u002Fspan>\n      \u003Cspan>\n        Past, 60 seconds:\n        \u003Cnord-timestamp value=\"2025-03-21T14:51:53.000Z\" data-offset-seconds=\"-60\" format=\"relative\">\u003C\u002Fnord-timestamp>\n      \u003C\u002Fspan>\n      \u003Cspan>\n        Past, 59 minutes:\n        \u003Cnord-timestamp value=\"2025-03-21T14:51:53.000Z\" data-offset-seconds=\"-3540\" format=\"relative\">\u003C\u002Fnord-timestamp>\n      \u003C\u002Fspan>\n      \u003Cspan>\n        Past, 60 minutes:\n        \u003Cnord-timestamp value=\"2025-03-21T14:51:53.000Z\" data-offset-seconds=\"-3600\" format=\"relative\">\u003C\u002Fnord-timestamp>\n      \u003C\u002Fspan>\n      \u003Cspan>\n        Past, 23 hours:\n        \u003Cnord-timestamp value=\"2025-03-21T14:51:53.000Z\" data-offset-seconds=\"-82800\" format=\"relative\">\u003C\u002Fnord-timestamp>\n      \u003C\u002Fspan>\n      \u003Cspan>\n        Past, 24 hours:\n        \u003Cnord-timestamp value=\"2025-03-21T14:51:53.000Z\" data-offset-seconds=\"-86400\" format=\"relative\">\u003C\u002Fnord-timestamp>\n      \u003C\u002Fspan>\n      \u003Cspan>\n        Past, 29 days:\n        \u003Cnord-timestamp value=\"2025-03-21T14:51:53.000Z\" data-offset-seconds=\"-2505600\" format=\"relative\">\u003C\u002Fnord-timestamp>\n      \u003C\u002Fspan>\n      \u003Cspan>\n        Past, 30 days:\n        \u003Cnord-timestamp value=\"2025-03-21T14:51:53.000Z\" data-offset-seconds=\"-2592000\" format=\"relative\">\u003C\u002Fnord-timestamp>\n      \u003C\u002Fspan>\n      \u003Cspan>\n        Past, 364 days:\n        \u003Cnord-timestamp value=\"2025-03-21T14:51:53.000Z\" data-offset-seconds=\"-31449600\" format=\"relative\">\u003C\u002Fnord-timestamp>\n      \u003C\u002Fspan>\n      \u003Cspan>\n        Past, 365 days:\n        \u003Cnord-timestamp value=\"2025-03-21T14:51:53.000Z\" data-offset-seconds=\"-31536000\" format=\"relative\">\u003C\u002Fnord-timestamp>\n      \u003C\u002Fspan>\n    \u003C\u002Fnord-stack>",{"id":1776,"name":1777,"exportName":1778,"html":1779,"js":1765},"components-timestamp--custom-threshold","Custom Threshold","CustomThreshold","\u003Cnord-stack gap=\"s\">\n      \u003Cspan>\n        Default one-week threshold:\n        \u003Cnord-timestamp\n          value=\"2025-03-21T14:51:53.000Z\"\n          data-offset-seconds=\"-7200\"\n          format=\"auto\"\n          time-zone=\"UTC\"\n        >\u003C\u002Fnord-timestamp>\n      \u003C\u002Fspan>\n      \u003Cspan>\n        One-hour threshold:\n        \u003Cnord-timestamp\n          value=\"2025-03-21T14:51:53.000Z\"\n          data-offset-seconds=\"-7200\"\n          format=\"auto\"\n          auto-threshold=\"3600\"\n          time-zone=\"UTC\"\n        >\u003C\u002Fnord-timestamp>\n      \u003C\u002Fspan>\n    \u003C\u002Fnord-stack>",{"id":1781,"name":1782,"exportName":1783,"html":1784},"components-timestamp--time-zones","Time Zones","TimeZones","\u003Cnord-stack gap=\"s\">\n      \u003Cspan>\n        Helsinki:\n        \u003Cnord-timestamp\n          value=\"2025-03-21T14:51:53.000Z\"\n          format=\"date-time\"\n          time-zone=\"Europe\u002FHelsinki\"\n          show-time-zone\n        >\u003C\u002Fnord-timestamp>\n      \u003C\u002Fspan>\n      \u003Cspan>\n        Tokyo:\n        \u003Cnord-timestamp\n          value=\"2025-03-21T14:51:53.000Z\"\n          format=\"date-time\"\n          time-zone=\"Asia\u002FTokyo\"\n          show-time-zone\n        >\u003C\u002Fnord-timestamp>\n      \u003C\u002Fspan>\n    \u003C\u002Fnord-stack>",{"id":1786,"name":1787,"exportName":1787,"html":1788},"components-timestamp--localized","Localized","\u003Cnord-stack gap=\"s\">\n      \u003Cspan>\n        English:\n        \u003Cnord-timestamp lang=\"en-US\" value=\"2025-03-21T14:51:53.000Z\" format=\"date-time\" time-zone=\"UTC\">\u003C\u002Fnord-timestamp>\n      \u003C\u002Fspan>\n      \u003Cspan>\n        Finnish:\n        \u003Cnord-timestamp lang=\"fi\" value=\"2025-03-21T14:51:53.000Z\" format=\"date-time\" time-zone=\"UTC\">\u003C\u002Fnord-timestamp>\n      \u003C\u002Fspan>\n    \u003C\u002Fnord-stack>",{"id":1790,"name":1791,"exportName":1792,"html":1793,"js":1765},"components-timestamp--live-updates","Live Updates","LiveUpdates","\u003Cnord-timestamp\n      value=\"2025-03-21T14:51:53.000Z\"\n      data-offset-seconds=\"-55\"\n      format=\"relative\"\n      live\n    >\u003C\u002Fnord-timestamp>",{"id":1795,"name":1796,"exportName":1797,"html":1798,"js":1765},"components-timestamp--with-tooltip","With Tooltip","WithTooltip","\u003Cnord-timestamp\n      value=\"2025-03-21T14:51:53.000Z\"\n      data-offset-seconds=\"-7200\"\n      format=\"relative\"\n      show-tooltip\n      time-zone=\"UTC\"\n    >\u003C\u002Fnord-timestamp>",{"id":1800,"name":1801,"exportName":1802,"html":1803},"components-timestamp--invalid-value","Invalid Value","InvalidValue","\u003Cnord-stack gap=\"s\">\n      \u003Cspan>Invalid value (renders no time content): \u003Cnord-timestamp value=\"not-a-date\">\u003C\u002Fnord-timestamp>\u003C\u002Fspan>\n      \u003Cspan>Valid value: \u003Cnord-timestamp value=\"2025-03-21T14:51:53.000Z\" format=\"system-date-time\" time-zone=\"UTC\">\u003C\u002Fnord-timestamp>\u003C\u002Fspan>\n    \u003C\u002Fnord-stack>",{"components":1805,"css":1808,"themes":1811},{"url":1806,"version":1807},"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fcomponents\u002F5.1.0\u002Findex.js","5.1.0",{"url":1809,"version":1810},"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fcss\u002F5.2.4\u002Fnord.min.css","5.2.4",{"nord":1812,"nordDark":1814,"vet":1816,"vetDark":1818},{"url":1813},"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fthemes\u002F10.0.4\u002Fnord.css",{"url":1815},"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fthemes\u002F10.0.4\u002Fnord-dark.css",{"url":1817},"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fthemes\u002F10.0.4\u002Fvet.css",{"url":1819},"https:\u002F\u002Fnordcdn.net\u002Fds\u002Fthemes\u002F10.0.4\u002Fvet-dark.css",[1821,1823,1825,1828,1830,1832,1834,1836,1838,1840,1843,1845,1847,1849,1851,1853,1855,1857,1859,1861,1863,1865,1867,1869,1871,1873,1875,1877,1879,1881,1883,1885,1887,1889,1891,1893,1895,1897,1899,1901,1903,1905,1907,1909,1911,1913,1915,1917,1920,1922,1924,1926,1928,1930,1932,1934,1936,1938,1940,1942,1944,1946,1948,1950,1952,1954,1956,1958,1960,1962,1964,1966,1968,1970,1972,1975,1977,1979,1981,1983,1985,1987,1989,1991,1993,1995,1997,1999,2001,2003,2005,2007,2009],{"path":1822,"isNew":167,"updated":165},"\u002Fcomponent-docs\u002Faccordion",{"path":1824,"isNew":167,"updated":165},"\u002Fcomponent-docs\u002Faside",{"path":1826,"isNew":167,"updated":1827},"\u002Fcomponent-docs\u002Fautocomplete","2026-07-06",{"path":1829,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Favatar",{"path":1831,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fbadge",{"path":1833,"isNew":164,"updated":1827},"\u002Fcomponent-docs\u002Fbanner",{"path":1835,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fbutton",{"path":1837,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fbutton-group",{"path":1839,"isNew":164,"updated":1827},"\u002Fcomponent-docs\u002Fcalendar",{"path":1841,"isNew":164,"updated":1842},"\u002Fcomponent-docs\u002Fcard","2026-07-24",{"path":1844,"isNew":167,"updated":165},"\u002Fcomponent-docs\u002Fchart",{"path":1846,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fchat\u002Fattachment",{"path":1848,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fchat\u002Fcomposer",{"path":1850,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fchat\u002Fcomposer-drawer",{"path":1852,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fchat\u002Fcomposer-input",{"path":1854,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fchat\u002Fdictation-button",{"path":1856,"isNew":167,"updated":165},"\u002Fcomponent-docs\u002Fchat",{"path":1858,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fchat\u002Flayout-scroll-button",{"path":1860,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fchat\u002Fmessage",{"path":1862,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fchat\u002Fmessage-bubble",{"path":1864,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fchat\u002Fmessage-list",{"path":1866,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fchat\u002Fmessage-metadata",{"path":1868,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fchat\u002Fsend-button",{"path":1870,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fchat\u002Fsystem-message",{"path":1872,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fchat\u002Ftoken",{"path":1874,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fchat\u002Ftokenized-text",{"path":1876,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fchat\u002Ftool-calls",{"path":1878,"isNew":164,"updated":1827},"\u002Fcomponent-docs\u002Fcheckbox",{"path":1880,"isNew":167,"updated":165},"\u002Fcomponent-docs\u002Fcollapsible",{"path":1882,"isNew":167,"updated":1827},"\u002Fcomponent-docs\u002Fcombobox",{"path":1884,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fcommand-menu",{"path":1886,"isNew":167,"updated":165},"\u002Fcomponent-docs\u002Fdata-table",{"path":1888,"isNew":167,"updated":165},"\u002Fcomponent-docs\u002Fdata-table-filter-bar",{"path":1890,"isNew":164,"updated":1827},"\u002Fcomponent-docs\u002Fdate-picker",{"path":1892,"isNew":167,"updated":1827},"\u002Fcomponent-docs\u002Fdate-range-picker",{"path":1894,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fdivider",{"path":1896,"isNew":164,"updated":1842},"\u002Fcomponent-docs\u002Fdrawer",{"path":1898,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fdropdown",{"path":1900,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fempty-state",{"path":1902,"isNew":167,"updated":165},"\u002Fcomponent-docs\u002Ffield",{"path":1904,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Ffieldset",{"path":1906,"isNew":167,"updated":165},"\u002Fcomponent-docs\u002Ffilter-bar",{"path":1908,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Ffilter-date-range",{"path":1910,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Ffilter-dropdown",{"path":1912,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Ffooter",{"path":1914,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fheader",{"path":1916,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Ficon",{"path":1918,"isNew":164,"updated":1919},"\u002Fcomponent-docs\u002Finput","2026-07-07",{"path":1921,"isNew":167,"updated":165},"\u002Fcomponent-docs\u002Finput-group",{"path":1923,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Finput-group-addon",{"path":1925,"isNew":167,"updated":165},"\u002Fcomponent-docs\u002Fitem",{"path":1927,"isNew":167,"updated":165},"\u002Fcomponent-docs\u002Fkbd",{"path":1929,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Flayout",{"path":1931,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fmessage",{"path":1933,"isNew":167,"updated":165},"\u002Fcomponent-docs\u002Fmeter",{"path":1935,"isNew":164,"updated":1842},"\u002Fcomponent-docs\u002Fmodal",{"path":1937,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fnavigation",{"path":1939,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fnotification",{"path":1941,"isNew":167,"updated":1827},"\u002Fcomponent-docs\u002Fnumber-field",{"path":1943,"isNew":167,"updated":1827},"\u002Fcomponent-docs\u002Fotp-field",{"path":1945,"isNew":167,"updated":165},"\u002Fcomponent-docs\u002Foutline",{"path":1947,"isNew":167,"updated":165},"\u002Fcomponent-docs\u002Foverflow-list",{"path":1949,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Foverflow-list-count",{"path":1951,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Foverflow-list-menu",{"path":1953,"isNew":167,"updated":165},"\u002Fcomponent-docs\u002Fpagination",{"path":1955,"isNew":164,"updated":1827},"\u002Fcomponent-docs\u002Fpopout",{"path":1957,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fprogress",{"path":1959,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fprogress-bar",{"path":1961,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fqrcode",{"path":1963,"isNew":164,"updated":1827},"\u002Fcomponent-docs\u002Fradio",{"path":1965,"isNew":164,"updated":1827},"\u002Fcomponent-docs\u002Frange",{"path":1967,"isNew":167,"updated":165},"\u002Fcomponent-docs\u002Fresizable",{"path":1969,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fresizable-handle",{"path":1971,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fresizable-panel",{"path":1973,"isNew":167,"updated":1974},"\u002Fcomponent-docs\u002Frich-text-editor","2026-07-22",{"path":1976,"isNew":167,"updated":165},"\u002Fcomponent-docs\u002Fscroll-area",{"path":1978,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fsegmented-control",{"path":1980,"isNew":164,"updated":1827},"\u002Fcomponent-docs\u002Fselect",{"path":1982,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fskeleton",{"path":1984,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fspinner",{"path":1986,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fstack",{"path":1988,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Ftab",{"path":1990,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Ftable",{"path":1992,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Ftag",{"path":1994,"isNew":164,"updated":1827},"\u002Fcomponent-docs\u002Ftextarea",{"path":1996,"isNew":167,"updated":1827},"\u002Fcomponent-docs\u002Ftime-picker",{"path":1998,"isNew":167,"updated":165},"\u002Fcomponent-docs\u002Ftimestamp",{"path":2000,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Ftoast",{"path":2002,"isNew":164,"updated":1827},"\u002Fcomponent-docs\u002Ftoggle",{"path":2004,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Ftooltip",{"path":2006,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Ftop-bar",{"path":2008,"isNew":167,"updated":165},"\u002Fcomponent-docs\u002Ftruncate",{"path":2010,"isNew":164,"updated":165},"\u002Fcomponent-docs\u002Fvisually-hidden",[2012],{"title":2013,"path":2014,"stem":2015,"children":2016,"page":164},"Component Docs","\u002Fcomponent-docs","component-docs",[2017,2019,2021,2023,2025,2027,2029,2031,2034,2036,2038,2040,2089,2091,2093,2095,2098,2100,2102,2105,2108,2110,2112,2114,2117,2119,2121,2124,2127,2130,2132,2134,2136,2138,2140,2143,2145,2147,2149,2151,2153,2155,2157,2159,2162,2165,2167,2169,2172,2175,2177,2179,2181,2184,2187,2189,2191,2193,2196,2199,2201,2204,2207,2209,2211,2213,2215,2218,2220,2222,2224,2227,2229,2231,2233,2235,2238,2240],{"title":657,"path":1822,"stem":2018},"component-docs\u002Faccordion",{"title":680,"path":1824,"stem":2020},"component-docs\u002Faside",{"title":694,"path":1826,"stem":2022},"component-docs\u002Fautocomplete",{"title":699,"path":1829,"stem":2024},"component-docs\u002Favatar",{"title":704,"path":1831,"stem":2026},"component-docs\u002Fbadge",{"title":709,"path":1833,"stem":2028},"component-docs\u002Fbanner",{"title":713,"path":1835,"stem":2030},"component-docs\u002Fbutton",{"title":2032,"path":1837,"stem":2033},"Button Group","component-docs\u002Fbutton-group",{"title":722,"path":1839,"stem":2035},"component-docs\u002Fcalendar",{"title":726,"path":1841,"stem":2037},"component-docs\u002Fcard",{"title":31,"path":1844,"stem":2039},"component-docs\u002Fchart",{"title":83,"path":1856,"stem":2041,"children":2042},"component-docs\u002Fchat\u002Findex",[2043,2044,2047,2050,2053,2056,2059,2062,2065,2068,2071,2074,2077,2080,2083,2086],{"title":83,"path":1856,"stem":2041},{"title":2045,"path":1846,"stem":2046},"Chat Attachment","component-docs\u002Fchat\u002Fattachment",{"title":2048,"path":1848,"stem":2049},"Chat Composer","component-docs\u002Fchat\u002Fcomposer",{"title":2051,"path":1850,"stem":2052},"Chat Composer Drawer","component-docs\u002Fchat\u002Fcomposer-drawer",{"title":2054,"path":1852,"stem":2055},"Chat Composer Input","component-docs\u002Fchat\u002Fcomposer-input",{"title":2057,"path":1854,"stem":2058},"Chat Dictation Button","component-docs\u002Fchat\u002Fdictation-button",{"title":2060,"path":1858,"stem":2061},"Chat Layout Scroll Button","component-docs\u002Fchat\u002Flayout-scroll-button",{"title":2063,"path":1860,"stem":2064},"Chat Message","component-docs\u002Fchat\u002Fmessage",{"title":2066,"path":1862,"stem":2067},"Chat Message Bubble","component-docs\u002Fchat\u002Fmessage-bubble",{"title":2069,"path":1864,"stem":2070},"Chat Message List","component-docs\u002Fchat\u002Fmessage-list",{"title":2072,"path":1866,"stem":2073},"Chat Message Metadata","component-docs\u002Fchat\u002Fmessage-metadata",{"title":2075,"path":1868,"stem":2076},"Chat Send Button","component-docs\u002Fchat\u002Fsend-button",{"title":2078,"path":1870,"stem":2079},"Chat System Message","component-docs\u002Fchat\u002Fsystem-message",{"title":2081,"path":1872,"stem":2082},"Chat Token","component-docs\u002Fchat\u002Ftoken",{"title":2084,"path":1874,"stem":2085},"Chat Tokenized Text","component-docs\u002Fchat\u002Ftokenized-text",{"title":2087,"path":1876,"stem":2088},"Chat Tool Calls","component-docs\u002Fchat\u002Ftool-calls",{"title":851,"path":1878,"stem":2090},"component-docs\u002Fcheckbox",{"title":855,"path":1880,"stem":2092},"component-docs\u002Fcollapsible",{"title":868,"path":1882,"stem":2094},"component-docs\u002Fcombobox",{"title":2096,"path":1884,"stem":2097},"Command Menu","component-docs\u002Fcommand-menu",{"title":44,"path":1886,"stem":2099},"component-docs\u002Fdata-table",{"title":56,"path":1888,"stem":2101},"component-docs\u002Fdata-table-filter-bar",{"title":2103,"path":1890,"stem":2104},"Date Picker","component-docs\u002Fdate-picker",{"title":2106,"path":1892,"stem":2107},"Date Range Picker","component-docs\u002Fdate-range-picker",{"title":912,"path":1894,"stem":2109},"component-docs\u002Fdivider",{"title":916,"path":1896,"stem":2111},"component-docs\u002Fdrawer",{"title":937,"path":1898,"stem":2113},"component-docs\u002Fdropdown",{"title":2115,"path":1900,"stem":2116},"Empty State","component-docs\u002Fempty-state",{"title":959,"path":1902,"stem":2118},"component-docs\u002Ffield",{"title":1000,"path":1904,"stem":2120},"component-docs\u002Ffieldset",{"title":2122,"path":1906,"stem":2123},"Filter Bar","component-docs\u002Ffilter-bar",{"title":2125,"path":1908,"stem":2126},"Filter Date Range","component-docs\u002Ffilter-date-range",{"title":2128,"path":1910,"stem":2129},"Filter Dropdown","component-docs\u002Ffilter-dropdown",{"title":1037,"path":1912,"stem":2131},"component-docs\u002Ffooter",{"title":1041,"path":1914,"stem":2133},"component-docs\u002Fheader",{"title":1045,"path":1916,"stem":2135},"component-docs\u002Ficon",{"title":1049,"path":1918,"stem":2137},"component-docs\u002Finput",{"title":95,"path":1921,"stem":2139},"component-docs\u002Finput-group",{"title":2141,"path":1923,"stem":2142},"Input Group Add-on","component-docs\u002Finput-group-addon",{"title":1062,"path":1925,"stem":2144},"component-docs\u002Fitem",{"title":1103,"path":1927,"stem":2146},"component-docs\u002Fkbd",{"title":1112,"path":1929,"stem":2148},"component-docs\u002Flayout",{"title":1116,"path":1931,"stem":2150},"component-docs\u002Fmessage",{"title":1120,"path":1933,"stem":2152},"component-docs\u002Fmeter",{"title":1124,"path":1935,"stem":2154},"component-docs\u002Fmodal",{"title":1145,"path":1937,"stem":2156},"component-docs\u002Fnavigation",{"title":1163,"path":1939,"stem":2158},"component-docs\u002Fnotification",{"title":2160,"path":1941,"stem":2161},"Number Field","component-docs\u002Fnumber-field",{"title":2163,"path":1943,"stem":2164},"OTP Field","component-docs\u002Fotp-field",{"title":1180,"path":1945,"stem":2166},"component-docs\u002Foutline",{"title":106,"path":1947,"stem":2168},"component-docs\u002Foverflow-list",{"title":2170,"path":1949,"stem":2171},"Overflow List Count","component-docs\u002Foverflow-list-count",{"title":2173,"path":1951,"stem":2174},"Overflow List Menu","component-docs\u002Foverflow-list-menu",{"title":1202,"path":1953,"stem":2176},"component-docs\u002Fpagination",{"title":1231,"path":1955,"stem":2178},"component-docs\u002Fpopout",{"title":1235,"path":1957,"stem":2180},"component-docs\u002Fprogress",{"title":2182,"path":1959,"stem":2183},"Progress Bar","component-docs\u002Fprogress-bar",{"title":2185,"path":1961,"stem":2186},"QR Code","component-docs\u002Fqrcode",{"title":1247,"path":1963,"stem":2188},"component-docs\u002Fradio",{"title":1251,"path":1965,"stem":2190},"component-docs\u002Frange",{"title":121,"path":1967,"stem":2192},"component-docs\u002Fresizable",{"title":2194,"path":1969,"stem":2195},"Resizable Handle","component-docs\u002Fresizable-handle",{"title":2197,"path":1971,"stem":2198},"Resizable Panel","component-docs\u002Fresizable-panel",{"title":67,"path":1973,"stem":2200},"component-docs\u002Frich-text-editor",{"title":2202,"path":1976,"stem":2203},"Scroll Area","component-docs\u002Fscroll-area",{"title":2205,"path":1978,"stem":2206},"Segmented control","component-docs\u002Fsegmented-control",{"title":1301,"path":1980,"stem":2208},"component-docs\u002Fselect",{"title":1305,"path":1982,"stem":2210},"component-docs\u002Fskeleton",{"title":1309,"path":1984,"stem":2212},"component-docs\u002Fspinner",{"title":1313,"path":1986,"stem":2214},"component-docs\u002Fstack",{"title":2216,"path":1988,"stem":2217},"Tabs","component-docs\u002Ftab",{"title":1330,"path":1990,"stem":2219},"component-docs\u002Ftable",{"title":1334,"path":1992,"stem":2221},"component-docs\u002Ftag",{"title":1343,"path":1994,"stem":2223},"component-docs\u002Ftextarea",{"title":2225,"path":1996,"stem":2226},"Time Picker","component-docs\u002Ftime-picker",{"title":132,"path":1998,"stem":2228},"component-docs\u002Ftimestamp",{"title":1354,"path":2000,"stem":2230},"component-docs\u002Ftoast",{"title":1363,"path":2002,"stem":2232},"component-docs\u002Ftoggle",{"title":1367,"path":2004,"stem":2234},"component-docs\u002Ftooltip",{"title":2236,"path":2006,"stem":2237},"Top Bar","component-docs\u002Ftop-bar",{"title":1375,"path":2008,"stem":2239},"component-docs\u002Ftruncate",{"title":2241,"path":2010,"stem":2242},"Visually Hidden","component-docs\u002Fvisually-hidden",{"hasPlayground":167,"playgroundId":2244,"stories":2245},"components-chart--playground",[2246,2251,2256,2260,2264,2269],{"id":2247,"name":2248,"exportName":38,"html":2249,"js":2250},"components-chart--grouped-bar","Grouped Bar","\u003Cnord-chart label=\"Visits by month\" style=\"inline-size: min(100%, 48rem); --n-chart-min-block-size: 20rem;\">\n      \u003Cnord-chart-axis type=\"x\" label=\"Month\">\u003C\u002Fnord-chart-axis>\n      \u003Cnord-chart-axis type=\"y\" label=\"Visits\">\u003C\u002Fnord-chart-axis>\n      \u003Cnord-chart-grouped-bar>\u003C\u002Fnord-chart-grouped-bar>\n      \u003Cnord-chart-tooltip>\u003C\u002Fnord-chart-tooltip>\n      \u003Cnord-chart-legend>\u003C\u002Fnord-chart-legend>\n      \u003Ctable slot=\"summary\">\n        \u003Ccaption>Visits by month\u003C\u002Fcaption>\n        \u003Cthead>\u003Ctr>\u003Cth scope=\"col\">Month\u003C\u002Fth>\u003Cth scope=\"col\">Desktop\u003C\u002Fth>\u003Cth scope=\"col\">Mobile\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\n        \u003Ctbody>\n          \u003Ctr>\u003Cth scope=\"row\">January\u003C\u002Fth>\u003Ctd>186\u003C\u002Ftd>\u003Ctd>80\u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\u003Cth scope=\"row\">February\u003C\u002Fth>\u003Ctd>305\u003C\u002Ftd>\u003Ctd>200\u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\u003Cth scope=\"row\">March\u003C\u002Fth>\u003Ctd>237\u003C\u002Ftd>\u003Ctd>120\u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\u003Cth scope=\"row\">April\u003C\u002Fth>\u003Ctd>173\u003C\u002Ftd>\u003Ctd>190\u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\u003Cth scope=\"row\">May\u003C\u002Fth>\u003Ctd>209\u003C\u002Ftd>\u003Ctd>130\u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\u003Cth scope=\"row\">June\u003C\u002Fth>\u003Ctd>214\u003C\u002Ftd>\u003Ctd>140\u003C\u002Ftd>\u003C\u002Ftr>\n        \u003C\u002Ftbody>\n      \u003C\u002Ftable>\n      \u003Cp slot=\"empty\">No visits available.\u003C\u002Fp>\n    \u003C\u002Fnord-chart>","const chart = document.querySelector(\"nord-chart\")\nconst month = row => row.month\nconst desktop = row => row.desktop\nconst mobile = row => row.mobile\n\nchart.config = {\n  desktop: {\n    label: \"Desktop\",\n    theme: {\n      light: \"var(--n-color-accent)\",\n      dark: \"var(--n-color-status-highlight)\",\n    },\n  },\n  mobile: { label: \"Mobile\" },\n}\nchart.data = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 173, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst mark = chart.querySelector(\n  \"nord-chart-grouped-bar, nord-chart-stacked-bar, nord-chart-line, nord-chart-area\",\n)\nmark.x = month\nmark.y = [desktop, mobile]\nmark.keys = [\"desktop\", \"mobile\"]\nchart.querySelector('nord-chart-axis[type=\"x\"]').x = month\nchart.querySelector(\"nord-chart-tooltip\").label = month",{"id":2252,"name":2253,"exportName":2254,"html":2255,"js":2250},"components-chart--stacked-bar","Stacked Bar","StackedBar","\u003Cnord-chart label=\"Visits by month\" style=\"inline-size: min(100%, 48rem); --n-chart-min-block-size: 20rem;\">\n      \u003Cnord-chart-axis type=\"x\" label=\"Month\">\u003C\u002Fnord-chart-axis>\n      \u003Cnord-chart-axis type=\"y\" label=\"Visits\">\u003C\u002Fnord-chart-axis>\n      \u003Cnord-chart-stacked-bar>\u003C\u002Fnord-chart-stacked-bar>\n      \u003Cnord-chart-tooltip>\u003C\u002Fnord-chart-tooltip>\n      \u003Cnord-chart-legend>\u003C\u002Fnord-chart-legend>\n      \u003Ctable slot=\"summary\">\n        \u003Ccaption>Visits by month\u003C\u002Fcaption>\n        \u003Cthead>\u003Ctr>\u003Cth scope=\"col\">Month\u003C\u002Fth>\u003Cth scope=\"col\">Desktop\u003C\u002Fth>\u003Cth scope=\"col\">Mobile\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\n        \u003Ctbody>\n          \u003Ctr>\u003Cth scope=\"row\">January\u003C\u002Fth>\u003Ctd>186\u003C\u002Ftd>\u003Ctd>80\u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\u003Cth scope=\"row\">February\u003C\u002Fth>\u003Ctd>305\u003C\u002Ftd>\u003Ctd>200\u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\u003Cth scope=\"row\">March\u003C\u002Fth>\u003Ctd>237\u003C\u002Ftd>\u003Ctd>120\u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\u003Cth scope=\"row\">April\u003C\u002Fth>\u003Ctd>173\u003C\u002Ftd>\u003Ctd>190\u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\u003Cth scope=\"row\">May\u003C\u002Fth>\u003Ctd>209\u003C\u002Ftd>\u003Ctd>130\u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\u003Cth scope=\"row\">June\u003C\u002Fth>\u003Ctd>214\u003C\u002Ftd>\u003Ctd>140\u003C\u002Ftd>\u003C\u002Ftr>\n        \u003C\u002Ftbody>\n      \u003C\u002Ftable>\n      \u003Cp slot=\"empty\">No visits available.\u003C\u002Fp>\n    \u003C\u002Fnord-chart>",{"id":2257,"name":2258,"exportName":2258,"html":2259,"js":2250},"components-chart--line","Line","\u003Cnord-chart label=\"Visits by month\" style=\"inline-size: min(100%, 48rem); --n-chart-min-block-size: 20rem;\">\n      \u003Cnord-chart-axis type=\"x\" label=\"Month\" hide-grid-lines>\u003C\u002Fnord-chart-axis>\n      \u003Cnord-chart-axis type=\"y\" label=\"Visits\">\u003C\u002Fnord-chart-axis>\n      \u003Cnord-chart-line show-points>\u003C\u002Fnord-chart-line>\n      \u003Cnord-chart-tooltip>\u003C\u002Fnord-chart-tooltip>\n      \u003Cnord-chart-crosshair>\u003C\u002Fnord-chart-crosshair>\n      \u003Cnord-chart-legend toggleable>\u003C\u002Fnord-chart-legend>\n      \u003Ctable slot=\"summary\">\n        \u003Ccaption>Visits by month\u003C\u002Fcaption>\n        \u003Cthead>\u003Ctr>\u003Cth scope=\"col\">Month\u003C\u002Fth>\u003Cth scope=\"col\">Desktop\u003C\u002Fth>\u003Cth scope=\"col\">Mobile\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\n        \u003Ctbody>\n          \u003Ctr>\u003Cth scope=\"row\">January\u003C\u002Fth>\u003Ctd>186\u003C\u002Ftd>\u003Ctd>80\u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\u003Cth scope=\"row\">February\u003C\u002Fth>\u003Ctd>305\u003C\u002Ftd>\u003Ctd>200\u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\u003Cth scope=\"row\">March\u003C\u002Fth>\u003Ctd>237\u003C\u002Ftd>\u003Ctd>120\u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\u003Cth scope=\"row\">April\u003C\u002Fth>\u003Ctd>173\u003C\u002Ftd>\u003Ctd>190\u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\u003Cth scope=\"row\">May\u003C\u002Fth>\u003Ctd>209\u003C\u002Ftd>\u003Ctd>130\u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\u003Cth scope=\"row\">June\u003C\u002Fth>\u003Ctd>214\u003C\u002Ftd>\u003Ctd>140\u003C\u002Ftd>\u003C\u002Ftr>\n        \u003C\u002Ftbody>\n      \u003C\u002Ftable>\n      \u003Cp slot=\"empty\">No visits available.\u003C\u002Fp>\n    \u003C\u002Fnord-chart>",{"id":2261,"name":2262,"exportName":2262,"html":2263,"js":2250},"components-chart--area","Area","\u003Cnord-chart label=\"Visits by month\" style=\"inline-size: min(100%, 48rem); --n-chart-min-block-size: 20rem;\">\n      \u003Cnord-chart-axis type=\"x\" label=\"Month\">\u003C\u002Fnord-chart-axis>\n      \u003Cnord-chart-axis type=\"y\" label=\"Visits\">\u003C\u002Fnord-chart-axis>\n      \u003Cnord-chart-area>\u003C\u002Fnord-chart-area>\n      \u003Cnord-chart-tooltip>\u003C\u002Fnord-chart-tooltip>\n      \u003Cnord-chart-crosshair>\u003C\u002Fnord-chart-crosshair>\n      \u003Cnord-chart-legend>\u003C\u002Fnord-chart-legend>\n      \u003Ctable slot=\"summary\">\n        \u003Ccaption>Visits by month\u003C\u002Fcaption>\n        \u003Cthead>\u003Ctr>\u003Cth scope=\"col\">Month\u003C\u002Fth>\u003Cth scope=\"col\">Desktop\u003C\u002Fth>\u003Cth scope=\"col\">Mobile\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\n        \u003Ctbody>\n          \u003Ctr>\u003Cth scope=\"row\">January\u003C\u002Fth>\u003Ctd>186\u003C\u002Ftd>\u003Ctd>80\u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\u003Cth scope=\"row\">February\u003C\u002Fth>\u003Ctd>305\u003C\u002Ftd>\u003Ctd>200\u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\u003Cth scope=\"row\">March\u003C\u002Fth>\u003Ctd>237\u003C\u002Ftd>\u003Ctd>120\u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\u003Cth scope=\"row\">April\u003C\u002Fth>\u003Ctd>173\u003C\u002Ftd>\u003Ctd>190\u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\u003Cth scope=\"row\">May\u003C\u002Fth>\u003Ctd>209\u003C\u002Ftd>\u003Ctd>130\u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\u003Cth scope=\"row\">June\u003C\u002Fth>\u003Ctd>214\u003C\u002Ftd>\u003Ctd>140\u003C\u002Ftd>\u003C\u002Ftr>\n        \u003C\u002Ftbody>\n      \u003C\u002Ftable>\n      \u003Cp slot=\"empty\">No visits available.\u003C\u002Fp>\n    \u003C\u002Fnord-chart>",{"id":2265,"name":2266,"exportName":2266,"html":2267,"js":2268},"components-chart--pie","Pie","\u003Cnord-chart label=\"Visits by channel\" style=\"inline-size: min(100%, 32rem); --n-chart-min-block-size: 20rem;\">\n      \u003Cnord-chart-pie>\u003C\u002Fnord-chart-pie>\n      \u003Cnord-chart-tooltip>\u003C\u002Fnord-chart-tooltip>\n      \u003Cnord-chart-legend>\u003C\u002Fnord-chart-legend>\n      \u003Ctable slot=\"summary\">\n        \u003Ccaption>Visits by channel\u003C\u002Fcaption>\n        \u003Cthead>\u003Ctr>\u003Cth scope=\"col\">Channel\u003C\u002Fth>\u003Cth scope=\"col\">Visits\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\n        \u003Ctbody>\n          \u003Ctr>\u003Cth scope=\"row\">Desktop\u003C\u002Fth>\u003Ctd>275\u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\u003Cth scope=\"row\">Mobile\u003C\u002Fth>\u003Ctd>200\u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\u003Cth scope=\"row\">Tablet\u003C\u002Fth>\u003Ctd>87\u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\u003Cth scope=\"row\">Other\u003C\u002Fth>\u003Ctd>38\u003C\u002Ftd>\u003C\u002Ftr>\n        \u003C\u002Ftbody>\n      \u003C\u002Ftable>\n      \u003Cp slot=\"empty\">No visits available.\u003C\u002Fp>\n    \u003C\u002Fnord-chart>","const chart = document.querySelector(\"nord-chart\")\nconst channel = row => row.channel\nconst value = row => row.value\n\nchart.config = {\n  Desktop: { label: \"Desktop\" },\n  Mobile: { label: \"Mobile\" },\n  Tablet: { label: \"Tablet\" },\n  Other: { label: \"Other\" },\n}\nchart.data = [\n  { channel: \"Desktop\", value: 275 },\n  { channel: \"Mobile\", value: 200 },\n  { channel: \"Tablet\", value: 87 },\n  { channel: \"Other\", value: 38 },\n]\n\nconst mark = chart.querySelector(\"nord-chart-pie, nord-chart-donut\")\nmark.category = channel\nmark.value = value\nchart.querySelector(\"nord-chart-tooltip\").label = channel",{"id":2270,"name":2271,"exportName":2271,"html":2272,"js":2268},"components-chart--donut","Donut","\u003Cnord-chart label=\"Visits by channel\" style=\"inline-size: min(100%, 32rem); --n-chart-min-block-size: 20rem;\">\n      \u003Cnord-chart-donut\n        arc-width=\"24\"\n        central-label=\"Total\"\n        central-sub-label=\"Visits\"\n      >\u003C\u002Fnord-chart-donut>\n      \u003Cnord-chart-tooltip>\u003C\u002Fnord-chart-tooltip>\n      \u003Cnord-chart-legend>\u003C\u002Fnord-chart-legend>\n      \u003Ctable slot=\"summary\">\n        \u003Ccaption>Visits by channel\u003C\u002Fcaption>\n        \u003Cthead>\u003Ctr>\u003Cth scope=\"col\">Channel\u003C\u002Fth>\u003Cth scope=\"col\">Visits\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\n        \u003Ctbody>\n          \u003Ctr>\u003Cth scope=\"row\">Desktop\u003C\u002Fth>\u003Ctd>275\u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\u003Cth scope=\"row\">Mobile\u003C\u002Fth>\u003Ctd>200\u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\u003Cth scope=\"row\">Tablet\u003C\u002Fth>\u003Ctd>87\u003C\u002Ftd>\u003C\u002Ftr>\n          \u003Ctr>\u003Cth scope=\"row\">Other\u003C\u002Fth>\u003Ctd>38\u003C\u002Ftd>\u003C\u002Ftr>\n        \u003C\u002Ftbody>\n      \u003C\u002Ftable>\n      \u003Cp slot=\"empty\">No visits available.\u003C\u002Fp>\n    \u003C\u002Fnord-chart>",{"hasPlayground":167,"playgroundId":2274,"stories":2275},"components-data-table--playground",[2276,2280,2285,2289,2293,2297,2301,2307,2312,2318,2324,2330,2336,2342,2347,2351,2357,2363,2369,2375,2381,2387,2393,2399,2405,2411,2417,2423,2429,2435,2441,2447,2453,2459,2465,2471,2477,2482,2487,2493,2499,2505,2511,2517,2523,2528],{"id":2277,"name":2278,"exportName":2278,"html":2279},"components-data-table--default","Default","\u003Cnord-data-table caption=\"Patients\">\u003C\u002Fnord-data-table>",{"id":2281,"name":2282,"exportName":2283,"html":2284},"components-data-table--with-filters","With Filters","WithFilters","\u003Cnord-data-table\n      caption=\"Patients\"\n    >\u003C\u002Fnord-data-table>",{"id":2286,"name":2287,"exportName":2287,"html":2288},"components-data-table--selectable","Selectable","\u003Cnord-data-table caption=\"Patients\" enable-row-selection>\u003C\u002Fnord-data-table>",{"id":2290,"name":2291,"exportName":2291,"html":2292},"components-data-table--loading","Loading","\u003Cnord-data-table caption=\"Patients\" loading>\u003C\u002Fnord-data-table>",{"id":2294,"name":2295,"exportName":2295,"html":2296},"components-data-table--empty","Empty","\u003Cnord-data-table\n      caption=\"Patients\"\n      empty-message=\"No patients found\"\n    >\u003C\u002Fnord-data-table>",{"id":2298,"name":2299,"exportName":50,"html":2279,"js":2300},"components-data-table--overview","Basic usage","const rows        = [\n      { id: 101, name: 'Bella', species: 'Dog', owner: 'Sofia Nieminen', status: 'active' },\n      { id: 102, name: 'Milo', species: 'Cat', owner: 'Aleksi Korhonen', status: 'active' },\n      { id: 103, name: 'Coco', species: 'Rabbit', owner: 'Emma Virtanen', status: 'inactive' },\n      { id: 104, name: 'Rex', species: 'Dog', owner: 'Juho Mäkinen', status: 'active' },\n    ]\n\n    const statusBadge = (status               ) => {\n      const badge = document.createElement('nord-badge')\n      badge.setAttribute('variant', status === 'active' ? 'success' : 'warning')\n      badge.textContent = status === 'active' ? 'Active' : 'Inactive'\n      return badge\n    }\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      \u002F\u002F Accessor column, end-aligned numeric preset.\n      { accessorKey: 'id', header: 'ID', cell: (info     ) => String(info.getValue()), meta: { textAlign: 'end', cellType: 'smallId' } },\n      \u002F\u002F Plain string cells.\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'species', header: 'Species', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'owner', header: 'Owner', cell: (info     ) => String(info.getValue()) },\n      \u002F\u002F Nord web component cell (created via createElement, not lit html).\n      { accessorKey: 'status', header: 'Status', cell: (info     ) => statusBadge(info.getValue()) },\n      \u002F\u002F Display column (no accessor) rendering an actions node.\n      {\n        id: 'actions',\n        header: '',\n        enableHiding: false,\n        meta: { cellType: 'actions', isActionCell: true, hideFromColumnsMenu: true },\n        cell: (info     ) => {\n          const button = document.createElement('nord-button')\n          button.setAttribute('size', 's')\n          button.setAttribute('variant', 'plain')\n          button.textContent = 'View'\n          button.addEventListener('click', () => console.log('view', info.row.original.id))\n          return button\n        },\n      },\n    ]\n    table.data = rows",{"id":2302,"name":2303,"exportName":2304,"html":2305,"js":2306},"components-data-table--cell-renderers","Cell content patterns","CellRenderers","\u003Cnord-data-table caption=\"Patients — cell presentation\">\u003C\u002Fnord-data-table>","const rows        = [\n      { id: 101, name: 'Bella', lastVisit: '2026-05-14', status: 'active' },\n      { id: 102, name: 'Milo', lastVisit: '2026-06-02', status: 'active' },\n      { id: 103, name: 'Coco', lastVisit: '2026-03-21', status: 'inactive' },\n    ]\n\n    \u002F\u002F Link cell.\n    const link = (label        , href        ) => {\n      const a = document.createElement('a')\n      a.className = 'n-data-table-link'\n      a.href = href\n      a.textContent = label\n      return a\n    }\n    \u002F\u002F Badge cell.\n    const badge = (label        , variant        ) => {\n      const el = document.createElement('nord-badge')\n      el.setAttribute('variant', variant)\n      el.textContent = label\n      return el\n    }\n    \u002F\u002F Localized date cell.\n    const date = (iso        ) => {\n      const time = document.createElement('time')\n      time.dateTime = iso\n      time.textContent = new Intl.DateTimeFormat(undefined, { year: 'numeric', month: 'short', day: 'numeric' }).format(new Date(iso))\n      return time\n    }\n    \u002F\u002F Actions dropdown cell.\n    const actions = (id        ) => {\n      const dropdown = document.createElement('nord-dropdown')\n      const toggle = document.createElement('nord-button')\n      toggle.setAttribute('slot', 'toggle')\n      toggle.setAttribute('variant', 'plain')\n      toggle.setAttribute('square', '')\n      toggle.setAttribute('aria-label', 'Actions')\n      const icon = document.createElement('nord-icon')\n      icon.setAttribute('name', 'interface-menu-small')\n      toggle.append(icon)\n      const view = document.createElement('nord-dropdown-item')\n      view.textContent = 'View'\n      view.addEventListener('click', () => console.log('view', id))\n      const archive = document.createElement('nord-dropdown-item')\n      archive.setAttribute('destructive', '')\n      archive.textContent = 'Archive'\n      archive.addEventListener('click', () => console.log('archive', id))\n      dropdown.append(toggle, view, archive)\n      return dropdown\n    }\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'id', header: 'ID', cell: (info     ) => String(info.getValue()), meta: { textAlign: 'end', cellType: 'smallId' } },\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => link(String(info.getValue()), `#patient-${info.row.original.id}`) },\n      { accessorKey: 'lastVisit', header: 'Last visit', cell: (info     ) => date(info.getValue()), meta: { cellType: 'date' } },\n      { accessorKey: 'status', header: 'Status', cell: (info     ) => badge(info.getValue() === 'active' ? 'Active' : 'Inactive', info.getValue() === 'active' ? 'success' : 'warning') },\n      {\n        id: 'actions',\n        header: '',\n        enableHiding: false,\n        meta: { cellType: 'actions', isActionCell: true, hideFromColumnsMenu: true },\n        cell: (info     ) => actions(info.row.original.id),\n      },\n    ]\n    table.data = rows",{"id":2308,"name":2309,"exportName":2309,"html":2310,"js":2311},"components-data-table--sorting","Sorting","\u003Cnord-data-table caption=\"Patients — sortable columns\">\u003C\u002Fnord-data-table>","const rows        = [\n      { id: 101, name: 'Bella', species: 'Dog', lastVisit: '2026-05-14' },\n      { id: 102, name: 'Milo', species: 'Cat', lastVisit: '2026-06-02' },\n      { id: 103, name: 'Coco', species: 'Rabbit', lastVisit: '2026-03-21' },\n      { id: 104, name: 'Rex', species: 'Dog', lastVisit: '2026-06-18' },\n      { id: 105, name: 'Luna', species: 'Cat', lastVisit: '2026-02-09' },\n    ]\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'id', header: 'ID', cell: (info     ) => String(info.getValue()), meta: { textAlign: 'end', cellType: 'smallId' } },\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'species', header: 'Species', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'lastVisit', header: 'Last visit', cell: (info     ) => String(info.getValue()) },\n    ]\n    table.data = rows\n    \u002F\u002F Start sorted by name ascending; clicking a header cycles asc → desc → none.\n    table.state = { sorting: [{ id: 'name', desc: false }] }\n    table.addEventListener('sorting-change', (e     ) => {\n      table.state = { ...table.state, sorting: e.detail }\n    })",{"id":2313,"name":2314,"exportName":2315,"html":2316,"js":2317},"components-data-table--multi-sort","Multi Sort","MultiSort","\u003Cnord-data-table caption=\"Patients — multi-column sort (shift-click)\">\u003C\u002Fnord-data-table>","const rows        = [\n      { id: 101, name: 'Bella', species: 'Dog', weightKg: 28.4 },\n      { id: 102, name: 'Milo', species: 'Cat', weightKg: 4.1 },\n      { id: 103, name: 'Coco', species: 'Rabbit', weightKg: 1.8 },\n      { id: 104, name: 'Rex', species: 'Dog', weightKg: 34.9 },\n      { id: 105, name: 'Luna', species: 'Cat', weightKg: 5.6 },\n    ]\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'species', header: 'Species', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'weightKg', header: 'Weight (kg)', cell: (info     ) => String(info.getValue()), meta: { textAlign: 'end', cellType: 'number' } },\n      \u002F\u002F Display column (no accessor) made sortable via meta.sortable + sortingFn.\n      {\n        id: 'summary',\n        header: 'Summary',\n        meta: { sortable: true },\n        sortingFn: (a     , b     ) => a.original.name.localeCompare(b.original.name),\n        cell: (info     ) => `${info.row.original.name} the ${info.row.original.species}`,\n      },\n    ]\n    table.data = rows\n    \u002F\u002F Multi-sort is on by default: sort by species, then weight within species.\n    table.state = { sorting: [{ id: 'species', desc: false }, { id: 'weightKg', desc: true }] }\n    table.addEventListener('sorting-change', (e     ) => {\n      table.state = { ...table.state, sorting: e.detail }\n    })",{"id":2319,"name":2320,"exportName":2321,"html":2322,"js":2323},"components-data-table--row-selection","Row Selection","RowSelection","\u003Cnord-data-table caption=\"Patients — selectable rows\" enable-row-selection>\u003C\u002Fnord-data-table>","const rows        = [\n      { id: 101, name: 'Bella', species: 'Dog', owner: 'Sofia Nieminen' },\n      { id: 102, name: 'Milo', species: 'Cat', owner: 'Aleksi Korhonen' },\n      { id: 103, name: 'Coco', species: 'Rabbit', owner: 'Emma Virtanen' },\n      { id: 104, name: 'Rex', species: 'Dog', owner: 'Juho Mäkinen' },\n    ]\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'species', header: 'Species', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'owner', header: 'Owner', cell: (info     ) => String(info.getValue()) },\n    ]\n    table.data = rows\n    \u002F\u002F Stable row ids are required for selection to survive re-renders.\n    table.getRowId = (row     ) => String(row.id)\n    table.addEventListener('row-selection-change', (e     ) => {\n      console.log('selected ids', Object.keys(e.detail))\n    })",{"id":2325,"name":2326,"exportName":2327,"html":2328,"js":2329},"components-data-table--bulk-actions","Bulk Actions","BulkActions","\u003Cnord-data-table caption=\"Patients — bulk actions\" enable-row-selection>\n        \u003Cnord-data-table-bulk-actions>\n          \u003Cnord-button size=\"s\">\n            \u003Cnord-icon slot=\"start\" name=\"interface-download\">\u003C\u002Fnord-icon>\n            Export\n          \u003C\u002Fnord-button>\n          \u003Cnord-button size=\"s\" variant=\"danger\">\n            \u003Cnord-icon slot=\"start\" name=\"interface-delete\">\u003C\u002Fnord-icon>\n            Archive\n          \u003C\u002Fnord-button>\n        \u003C\u002Fnord-data-table-bulk-actions>\n      \u003C\u002Fnord-data-table>","const rows        = [\n      { id: 101, name: 'Bella', species: 'Dog', owner: 'Sofia Nieminen' },\n      { id: 102, name: 'Milo', species: 'Cat', owner: 'Aleksi Korhonen' },\n      { id: 103, name: 'Coco', species: 'Rabbit', owner: 'Emma Virtanen' },\n      { id: 104, name: 'Rex', species: 'Dog', owner: 'Juho Mäkinen' },\n    ]\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'species', header: 'Species', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'owner', header: 'Owner', cell: (info     ) => String(info.getValue()) },\n    ]\n    table.data = rows\n    table.getRowId = (row     ) => String(row.id)\n    table.addEventListener('row-selection-change', (e     ) => {\n      console.log('bulk selection', Object.keys(e.detail))\n    })",{"id":2331,"name":2332,"exportName":2333,"html":2334,"js":2335},"components-data-table--single-select","Single Select","SingleSelect","\u003Cnord-data-table caption=\"Choose a patient\" enable-row-single-selection>\u003C\u002Fnord-data-table>","const rows        = [\n      { id: 101, name: 'Bella', species: 'Dog', owner: 'Sofia Nieminen' },\n      { id: 102, name: 'Milo', species: 'Cat', owner: 'Aleksi Korhonen' },\n      { id: 103, name: 'Coco', species: 'Rabbit', owner: 'Emma Virtanen' },\n    ]\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'species', header: 'Species', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'owner', header: 'Owner', cell: (info     ) => String(info.getValue()) },\n    ]\n    table.data = rows\n    table.getRowId = (row     ) => String(row.id)\n    table.addEventListener('row-selection-change', (e     ) => {\n      console.log('selected id', Object.keys(e.detail)[0])\n    })",{"id":2337,"name":2338,"exportName":2339,"html":2340,"js":2341},"components-data-table--selection-column","Custom selection column","SelectionColumn","\u003Cnord-data-table caption=\"Patients — explicit selection column\" enable-row-selection>\u003C\u002Fnord-data-table>","const rows        = [\n      { id: 101, name: 'Bella', species: 'Dog' },\n      { id: 102, name: 'Milo', species: 'Cat' },\n      { id: 103, name: 'Coco', species: 'Rabbit' },\n    ]\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      \u002F\u002F An explicit selection column authored inline (mirrors selectionColumn()).\n      {\n        id: 'select',\n        enableSorting: false,\n        enableHiding: false,\n        meta: { cellType: 'selection', hideFromColumnsMenu: true },\n        header: (ctx     ) => {\n          const cb = document.createElement('nord-checkbox')\n          cb.setAttribute('size', 's')\n          cb.setAttribute('hide-label', '')\n          cb.setAttribute('label', 'Select all')\n          cb.checked = ctx.table.getIsAllPageRowsSelected()\n          cb.indeterminate = ctx.table.getIsSomePageRowsSelected()\n          cb.addEventListener('change', ctx.table.getToggleAllPageRowsSelectedHandler())\n          return cb\n        },\n        cell: (ctx     ) => {\n          const cb = document.createElement('nord-checkbox')\n          cb.setAttribute('size', 's')\n          cb.setAttribute('hide-label', '')\n          cb.setAttribute('label', 'Select row')\n          cb.checked = ctx.row.getIsSelected()\n          cb.disabled = !ctx.row.getCanSelect()\n          cb.addEventListener('change', ctx.row.getToggleSelectedHandler())\n          return cb\n        },\n      },\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'species', header: 'Species', cell: (info     ) => String(info.getValue()) },\n    ]\n    table.data = rows\n    table.getRowId = (row     ) => String(row.id)",{"id":2343,"name":2344,"exportName":2344,"html":2345,"js":2346},"components-data-table--filtering","Filtering","\u003Cnord-data-table caption=\"Patients — filterable\">\u003C\u002Fnord-data-table>","const rows        = [\n      { id: 101, name: 'Bella', species: 'dog', owner: 'Sofia Nieminen', status: 'active' },\n      { id: 102, name: 'Milo', species: 'cat', owner: 'Aleksi Korhonen', status: 'active' },\n      { id: 103, name: 'Coco', species: 'rabbit', owner: 'Emma Virtanen', status: 'inactive' },\n      { id: 104, name: 'Rex', species: 'dog', owner: 'Juho Mäkinen', status: 'active' },\n      { id: 105, name: 'Luna', species: 'cat', owner: 'Noora Laine', status: 'inactive' },\n    ]\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'species', header: 'Species', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'owner', header: 'Owner', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'status', header: 'Status', cell: (info     ) => String(info.getValue()) },\n    ]\n    table.data = rows\n    \u002F\u002F A search descriptor drives the global filter; other descriptors drive\n    \u002F\u002F column filters (matched by `key` to the column id).\n    table.filters = [\n      { type: 'search', key: 'name', label: 'Search', placeholder: 'Search patients' },\n      {\n        type: 'dropdown',\n        key: 'species',\n        label: 'Species',\n        searchable: true,\n        options: [\n          { value: 'dog', label: 'Dog' },\n          { value: 'cat', label: 'Cat' },\n          { value: 'rabbit', label: 'Rabbit' },\n        ],\n      },\n      {\n        type: 'dropdown',\n        key: 'status',\n        label: 'Status',\n        options: [\n          { value: 'active', label: 'Active' },\n          { value: 'inactive', label: 'Inactive' },\n        ],\n      },\n    ]\n    table.addEventListener('filters-change', (e     ) => console.log('filters', e.detail))\n    table.addEventListener('filter-reset', () => console.log('filters reset'))",{"id":2348,"name":1391,"exportName":1392,"html":2349,"js":2350},"components-data-table--all-filter-types","\u003Cnord-data-table caption=\"Every filter type\" manual row-count=\"0\" no-pagination>\u003C\u002Fnord-data-table>","const rows        = []\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()) },\n    ]\n    table.data = rows\n    table.filters = [\n      { type: 'search', key: 'q', label: 'Search', placeholder: 'Search…' },\n      {\n        type: 'dropdown',\n        key: 'species',\n        label: 'Species',\n        options: [\n          { value: 'dog', label: 'Dog' },\n          { value: 'cat', label: 'Cat' },\n        ],\n      },\n      {\n        type: 'dropdown',\n        key: 'tags',\n        label: 'Tags',\n        multiple: true,\n        searchable: true,\n        options: [\n          { value: 'vaccinated', label: 'Vaccinated' },\n          { value: 'neutered', label: 'Neutered' },\n          { value: 'microchipped', label: 'Microchipped' },\n        ],\n      },\n      {\n        type: 'dropdown',\n        key: 'owner',\n        label: 'Owner',\n        async: true,\n        searchable: true,\n        options: [\n          { value: 'o1', label: 'Sofia Nieminen' },\n          { value: 'o2', label: 'Aleksi Korhonen' },\n        ],\n      },\n      { type: 'date', key: 'dob', label: 'Date of birth' },\n      { type: 'date-range', key: 'visited', label: 'Visited', presets: true },\n      { type: 'boolean', key: 'insured', label: 'Insured', trueLabel: 'Insured', falseLabel: 'Uninsured' },\n      {\n        type: 'segmented',\n        key: 'size',\n        label: 'Size',\n        options: [\n          { value: 's', label: 'Small' },\n          { value: 'm', label: 'Medium' },\n          { value: 'l', label: 'Large' },\n        ],\n      },\n      {\n        type: 'tag-group',\n        key: 'clinics',\n        label: 'Clinics',\n        options: [\n          { value: 'north', label: 'North' },\n          { value: 'south', label: 'South' },\n        ],\n      },\n      \u002F\u002F Optional filter offered via the add-filter (+) button.\n      {\n        type: 'dropdown',\n        key: 'status',\n        label: 'Status',\n        optional: true,\n        removable: true,\n        options: [\n          { value: 'active', label: 'Active' },\n          { value: 'inactive', label: 'Inactive' },\n        ],\n      },\n    ]\n    \u002F\u002F Async dropdown: refresh options when the consumer sees a search change.\n    table.addEventListener('filters-change', (e     ) => console.log('filters', e.detail))\n    table.addEventListener('filter-add', (e     ) => console.log('added filter', e.detail))",{"id":2352,"name":2353,"exportName":2354,"html":2355,"js":2356},"components-data-table--standalone-filter-bar","Standalone Filter Bar","StandaloneFilterBar","\u003Cnord-stack gap=\"m\">\n        \u003Cnord-data-table-filter-bar for=\"patients-table\">\u003C\u002Fnord-data-table-filter-bar>\n        \u003Cnord-data-table id=\"patients-table\" caption=\"Patients\" no-filter-bar>\u003C\u002Fnord-data-table>\n      \u003C\u002Fnord-stack>","const rows        = [\n      { id: 101, name: 'Bella', species: 'dog', owner: 'Sofia Nieminen' },\n      { id: 102, name: 'Milo', species: 'cat', owner: 'Aleksi Korhonen' },\n      { id: 103, name: 'Coco', species: 'rabbit', owner: 'Emma Virtanen' },\n    ]\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'species', header: 'Species', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'owner', header: 'Owner', cell: (info     ) => String(info.getValue()) },\n    ]\n    table.data = rows\n\n    const bar = document.querySelector('nord-data-table-filter-bar')\n    bar.filters = [\n      { type: 'search', key: 'name', label: 'Search', placeholder: 'Search patients' },\n      {\n        type: 'dropdown',\n        key: 'species',\n        label: 'Species',\n        options: [\n          { value: 'dog', label: 'Dog' },\n          { value: 'cat', label: 'Cat' },\n          { value: 'rabbit', label: 'Rabbit' },\n        ],\n      },\n    ]",{"id":2358,"name":2359,"exportName":2360,"html":2361,"js":2362},"components-data-table--client-pagination","Client Pagination","ClientPagination","\u003Cnord-data-table caption=\"Patients — client pagination\">\u003C\u002Fnord-data-table>","const names = ['Bella', 'Milo', 'Coco', 'Rex', 'Luna']\n    const species = ['Dog', 'Cat', 'Rabbit', 'Dog', 'Cat']\n    const owners = ['Sofia Nieminen', 'Aleksi Korhonen', 'Emma Virtanen', 'Juho Mäkinen', 'Noora Laine']\n    const rows        = Array.from({ length: 42 }, (_, i) => ({\n      id: 100 + i,\n      name: `${names[i % names.length]} ${i + 1}`,\n      species: species[i % species.length],\n      owner: owners[i % owners.length],\n    }))\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'id', header: 'ID', cell: (info     ) => String(info.getValue()), meta: { textAlign: 'end', cellType: 'smallId' } },\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'species', header: 'Species', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'owner', header: 'Owner', cell: (info     ) => String(info.getValue()) },\n    ]\n    table.data = rows\n    \u002F\u002F pageSize seeds the paginator; pageSizeOptions populates the size select.\n    table.pagination = { pageSize: 10, pageSizeOptions: [10, 25, 50] }",{"id":2364,"name":2365,"exportName":2366,"html":2367,"js":2368},"components-data-table--simple-pagination","Simple Pagination","SimplePagination","\u003Cnord-data-table caption=\"Patients — simple pagination\">\u003C\u002Fnord-data-table>","const names = ['Bella', 'Milo', 'Coco', 'Rex', 'Luna']\n    const species = ['Dog', 'Cat', 'Rabbit', 'Dog', 'Cat']\n    const rows        = Array.from({ length: 24 }, (_, i) => ({\n      id: 100 + i,\n      name: `${names[i % names.length]} ${i + 1}`,\n      species: species[i % species.length],\n    }))\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'species', header: 'Species', cell: (info     ) => String(info.getValue()) },\n    ]\n    table.data = rows\n    table.pagination = { pageSize: 8, type: 'simple' }",{"id":2370,"name":2371,"exportName":2372,"html":2373,"js":2374},"components-data-table--standalone-pagination","Custom pagination slot","StandalonePagination","\u003Cnord-data-table caption=\"Patients — standalone paginator\" no-pagination>\n        \u003Cnord-pagination slot=\"pagination\" aria-label=\"Patients pages\">\n          \u003Cnord-pagination-content>\n            \u003Cnord-pagination-item>\n              \u003Cnord-pagination-link current>\n                \u003Cnord-button variant=\"primary\" data-page=\"1\">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\" data-page=\"2\">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\" data-page=\"3\">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\" data-page=\"4\">4\u003C\u002Fnord-button>\n              \u003C\u002Fnord-pagination-link>\n            \u003C\u002Fnord-pagination-item>\n          \u003C\u002Fnord-pagination-content>\n        \u003C\u002Fnord-pagination>\n      \u003C\u002Fnord-data-table>","const names = ['Bella', 'Milo', 'Coco', 'Rex', 'Luna']\n    const rows        = Array.from({ length: 20 }, (_, i) => ({\n      id: 100 + i,\n      name: `${names[i % names.length]} ${i + 1}`,\n      species: i % 2 === 0 ? 'Dog' : 'Cat',\n    }))\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'species', header: 'Species', cell: (info     ) => String(info.getValue()) },\n    ]\n    const pageSize = 5\n    const showPage = (page        ) => {\n      table.data = rows.slice((page - 1) * pageSize, page * pageSize)\n      document.querySelectorAll             ('[data-page]').forEach((button) => {\n        const current = Number(button.dataset.page) === page\n        button.setAttribute('variant', current ? 'primary' : 'plain')\n        button.closest('nord-pagination-link')?.toggleAttribute('current', current)\n      })\n    }\n    document.querySelectorAll             ('[data-page]').forEach((button) => {\n      button.addEventListener('click', () => showPage(Number(button.dataset.page)))\n    })\n    showPage(1)",{"id":2376,"name":2377,"exportName":2378,"html":2379,"js":2380},"components-data-table--server-side-pagination","Server Side Pagination","ServerSidePagination","\u003Cnord-data-table caption=\"Patients — server pagination\" manual>\u003C\u002Fnord-data-table>","const names = ['Bella', 'Milo', 'Coco', 'Rex', 'Luna']\n    const owners = ['Sofia Nieminen', 'Aleksi Korhonen', 'Emma Virtanen', 'Juho Mäkinen', 'Noora Laine']\n    const total = 42\n    const allRows        = Array.from({ length: total }, (_, i) => ({\n      id: 100 + i,\n      name: `${names[i % names.length]} ${i + 1}`,\n      species: i % 2 === 0 ? 'Dog' : 'Cat',\n      owner: owners[i % owners.length],\n    }))\n    \u002F\u002F Stand-in for a network fetch of one page.\n    const fetchPage = (pageIndex        , pageSize        ) =>\n      allRows.slice(pageIndex * pageSize, pageIndex * pageSize + pageSize)\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'id', header: 'ID', cell: (info     ) => String(info.getValue()), meta: { textAlign: 'end', cellType: 'smallId' } },\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'species', header: 'Species', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'owner', header: 'Owner', cell: (info     ) => String(info.getValue()) },\n    ]\n    table.rowCount = total\n    table.pagination = { pageSize: 5, pageSizeOptions: [5, 10, 25] }\n\n    let pageIndex = 0\n    let pageSize = 5\n    const load = () => {\n      table.data = fetchPage(pageIndex, pageSize)\n      table.state = { pagination: { pageIndex, pageSize } }\n    }\n    load()\n    \u002F\u002F In manual mode the table does NOT paginate; it asks the consumer to fetch.\n    table.addEventListener('pagination-change', (e     ) => {\n      pageIndex = e.detail.pageIndex\n      pageSize = e.detail.pageSize\n      load()\n    })",{"id":2382,"name":2383,"exportName":2384,"html":2385,"js":2386},"components-data-table--infinite-scroll-example","Infinite scroll","InfiniteScrollExample","\u003Cdiv style=\"block-size: 360px\">\n        \u003Cnord-data-table caption=\"Patients — infinite scroll\" infinite-scroll sticky-header>\u003C\u002Fnord-data-table>\n      \u003C\u002Fdiv>","const names = ['Bella', 'Milo', 'Coco', 'Rex', 'Luna']\n    const owners = ['Sofia Nieminen', 'Aleksi Korhonen', 'Emma Virtanen', 'Juho Mäkinen', 'Noora Laine']\n    const rows        = Array.from({ length: 60 }, (_, i) => ({\n      id: 300 + i,\n      name: `${names[i % names.length]} ${i + 1}`,\n      species: i % 2 === 0 ? 'Dog' : 'Cat',\n      owner: owners[i % owners.length],\n    }))\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'id', header: 'ID', cell: (info     ) => String(info.getValue()), meta: { textAlign: 'end', cellType: 'smallId' } },\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'species', header: 'Species', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'owner', header: 'Owner', cell: (info     ) => String(info.getValue()) },\n    ]\n    table.data = rows\n    table.getRowId = (row     ) => String(row.id)\n    \u002F\u002F Seed the batch size; the table retains prior rows as you scroll.\n    table.pagination = { pageSize: 15 }\n    table.addEventListener('reached-bottom', () => console.log('reached bottom'))",{"id":2388,"name":2389,"exportName":2390,"html":2391,"js":2392},"components-data-table--tree-expansion","Tree Expansion","TreeExpansion","\u003Cnord-data-table caption=\"Owners and pets\">\u003C\u002Fnord-data-table>","const rows         = [\n      {\n        id: 'o1',\n        name: 'Sofia Nieminen',\n        pets: [\n          { id: 'o1-p1', name: 'Bella', species: 'Dog', breed: 'Golden Retriever' },\n          { id: 'o1-p2', name: 'Coco', species: 'Rabbit', breed: 'Lionhead' },\n        ],\n      },\n      {\n        id: 'o2',\n        name: 'Aleksi Korhonen',\n        pets: [{ id: 'o2-p1', name: 'Milo', species: 'Cat', breed: 'British Shorthair' }],\n      },\n    ]\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'species', header: 'Species', cell: (info     ) => info.getValue() ?? '' },\n      { accessorKey: 'breed', header: 'Breed', cell: (info     ) => info.getValue() ?? '' },\n    ]\n    table.data = rows\n    table.getRowId = (row      ) => row.id\n    \u002F\u002F Returning child rows enables the leading expander + depth (level-{depth}).\n    table.getSubRows = (row      ) => row.pets",{"id":2394,"name":2395,"exportName":2396,"html":2397,"js":2398},"components-data-table--master-detail","Master Detail","MasterDetail","\u003Cnord-data-table caption=\"Patients with detail rows\">\u003C\u002Fnord-data-table>","const rows        = [\n      { id: 101, name: 'Bella', species: 'Dog', owner: 'Sofia Nieminen', lastVisit: '2026-05-14', status: 'active' },\n      { id: 102, name: 'Milo', species: 'Cat', owner: 'Aleksi Korhonen', lastVisit: '2026-06-02', status: 'active' },\n      { id: 103, name: 'Coco', species: 'Rabbit', owner: 'Emma Virtanen', lastVisit: '2026-03-21', status: 'inactive' },\n    ]\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()), meta: { isExpandCell: true } },\n      { accessorKey: 'species', header: 'Species', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'owner', header: 'Owner', cell: (info     ) => String(info.getValue()) },\n    ]\n    table.data = rows\n    table.getRowId = (row     ) => String(row.id)\n    table.getRowCanExpand = () => true\n    \u002F\u002F Full-width detail row content, returned as a DOM node.\n    table.renderSubRow = (row     ) => {\n      const wrap = document.createElement('div')\n      wrap.style.display = 'grid'\n      wrap.style.gap = 'var(--n-space-s)'\n      wrap.style.padding = 'var(--n-space-s)'\n      const name = document.createElement('strong')\n      name.textContent = row.original.name\n      const owner = document.createElement('span')\n      owner.textContent = `Owner: ${row.original.owner}`\n      const visit = document.createElement('span')\n      visit.textContent = `Last visit: ${new Intl.DateTimeFormat(undefined, { dateStyle: 'medium' }).format(new Date(row.original.lastVisit))}`\n      wrap.append(name, owner, visit)\n      return wrap\n    }",{"id":2400,"name":2401,"exportName":2402,"html":2403,"js":2404},"components-data-table--custom-rows","Custom Rows","CustomRows","\u003Cnord-data-table caption=\"Patients grouped by species\">\u003C\u002Fnord-data-table>","\u002F\u002F Full-width group-header row.\n    const groupHeader = (label        )      => ({\n      id: `group-${label}`,\n      customRow: () => {\n        const el = document.createElement('strong')\n        el.textContent = label\n        return el\n      },\n    })\n\n    const rows        = [\n      groupHeader('Dogs'),\n      { id: '101', name: 'Bella', breed: 'Golden Retriever', owner: 'Sofia Nieminen' },\n      { id: '104', name: 'Rex', breed: 'German Shepherd', owner: 'Juho Mäkinen' },\n      groupHeader('Cats'),\n      { id: '102', name: 'Milo', breed: 'British Shorthair', owner: 'Aleksi Korhonen' },\n      { id: '105', name: 'Luna', breed: 'Maine Coon', owner: 'Noora Laine' },\n    ]\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => info.getValue() ?? '' },\n      { accessorKey: 'breed', header: 'Breed', cell: (info     ) => info.getValue() ?? '' },\n      { accessorKey: 'owner', header: 'Owner', cell: (info     ) => info.getValue() ?? '' },\n    ]\n    table.data = rows\n    table.getRowId = (row     ) => row.id",{"id":2406,"name":2407,"exportName":2408,"html":2409,"js":2410},"components-data-table--column-pinning","Column Pinning","ColumnPinning","\u003Cdiv style=\"max-inline-size: 640px\">\n        \u003Cnord-data-table caption=\"Patients with pinned columns\">\u003C\u002Fnord-data-table>\n      \u003C\u002Fdiv>","const rows        = [\n      { id: 101, name: 'Bella', species: 'Dog', breed: 'Golden Retriever', owner: 'Sofia Nieminen', lastVisit: '2026-05-14', status: 'Active' },\n      { id: 102, name: 'Milo', species: 'Cat', breed: 'British Shorthair', owner: 'Aleksi Korhonen', lastVisit: '2026-06-02', status: 'Active' },\n      { id: 103, name: 'Coco', species: 'Rabbit', breed: 'Lionhead', owner: 'Emma Virtanen', lastVisit: '2026-03-21', status: 'Inactive' },\n    ]\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()), meta: { cellType: 'text' } },\n      { accessorKey: 'species', header: 'Species', cell: (info     ) => String(info.getValue()), meta: { cellType: 'text' } },\n      { accessorKey: 'breed', header: 'Breed', cell: (info     ) => String(info.getValue()), meta: { cellType: 'wide' } },\n      { accessorKey: 'owner', header: 'Owner', cell: (info     ) => String(info.getValue()), meta: { cellType: 'wide' } },\n      { accessorKey: 'lastVisit', header: 'Last visit', cell: (info     ) => String(info.getValue()), meta: { cellType: 'date' } },\n      { accessorKey: 'status', header: 'Status', cell: (info     ) => String(info.getValue()) },\n    ]\n    table.data = rows\n    table.getRowId = (row     ) => String(row.id)\n    \u002F\u002F Pin Name to the start and Status to the end.\n    table.state = { columnPinning: { left: ['name'], right: ['status'] } }",{"id":2412,"name":2413,"exportName":2414,"html":2415,"js":2416},"components-data-table--column-sizing","Column Sizing","ColumnSizing","\u003Cnord-data-table caption=\"Patients — sized columns\">\u003C\u002Fnord-data-table>","const rows        = [\n      { id: 101, name: 'Bella', species: 'Dog', lastVisit: '2026-05-14' },\n      { id: 102, name: 'Milo', species: 'Cat', lastVisit: '2026-06-02' },\n      { id: 103, name: 'Coco', species: 'Rabbit', lastVisit: '2026-03-21' },\n    ]\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      \u002F\u002F number preset (fixed narrow).\n      { accessorKey: 'id', header: 'ID', cell: (info     ) => String(info.getValue()), meta: { textAlign: 'end', cellType: 'smallId' } },\n      \u002F\u002F explicit size wins over the preset.\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()), size: 280 },\n      \u002F\u002F text preset.\n      { accessorKey: 'species', header: 'Species', cell: (info     ) => String(info.getValue()), meta: { cellType: 'text' } },\n      \u002F\u002F date preset.\n      { accessorKey: 'lastVisit', header: 'Last visit', cell: (info     ) => String(info.getValue()), meta: { cellType: 'date' } },\n    ]\n    table.data = rows",{"id":2418,"name":2419,"exportName":2420,"html":2421,"js":2422},"components-data-table--column-resizing","Column Resizing","ColumnResizing","\u003Cnord-data-table caption=\"Patients — resizable columns\" enable-column-resizing>\u003C\u002Fnord-data-table>","const rows        = [\n      { id: 101, name: 'Bella', species: 'Dog', owner: 'Sofia Nieminen' },\n      { id: 102, name: 'Milo', species: 'Cat', owner: 'Aleksi Korhonen' },\n      { id: 103, name: 'Coco', species: 'Rabbit', owner: 'Emma Virtanen' },\n    ]\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      \u002F\u002F Individual columns can opt out while the rest remain resizable.\n      { accessorKey: 'name', header: 'Name (fixed)', cell: (info     ) => String(info.getValue()), enableResizing: false, meta: { cellType: 'text' } },\n      { accessorKey: 'species', header: 'Species', cell: (info     ) => String(info.getValue()), meta: { cellType: 'text' } },\n      { accessorKey: 'owner', header: 'Owner', cell: (info     ) => String(info.getValue()), meta: { cellType: 'wide' } },\n    ]\n    table.data = rows\n    table.addEventListener('column-sizing-change', (e     ) => console.log('sizing', e.detail))",{"id":2424,"name":2425,"exportName":2426,"html":2427,"js":2428},"components-data-table--columns-menu","Columns Menu","ColumnsMenu","\u003Cnord-data-table caption=\"Patients — columns menu\" columns-menu enable-column-reorder>\u003C\u002Fnord-data-table>","const rows        = [\n      { id: 101, name: 'Bella', species: 'Dog', breed: 'Golden Retriever', owner: 'Sofia Nieminen', lastVisit: '2026-05-14', status: 'Active' },\n      { id: 102, name: 'Milo', species: 'Cat', breed: 'British Shorthair', owner: 'Aleksi Korhonen', lastVisit: '2026-06-02', status: 'Active' },\n      { id: 103, name: 'Coco', species: 'Rabbit', breed: 'Lionhead', owner: 'Emma Virtanen', lastVisit: '2026-03-21', status: 'Inactive' },\n    ]\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'id', header: 'ID', cell: (info     ) => String(info.getValue()), meta: { textAlign: 'end', cellType: 'smallId' } },\n      \u002F\u002F enableHiding: false keeps Name always visible (no menu toggle).\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()), enableHiding: false },\n      { accessorKey: 'species', header: 'Species', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'breed', header: 'Breed', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'owner', header: 'Owner', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'lastVisit', header: 'Last visit', cell: (info     ) => String(info.getValue()), meta: { cellType: 'date' } },\n      { accessorKey: 'status', header: 'Status', cell: (info     ) => String(info.getValue()) },\n    ]\n    table.data = rows\n    table.getRowId = (row     ) => String(row.id)\n    table.addEventListener('column-visibility-change', (e     ) => console.log('visibility', e.detail))\n    table.addEventListener('column-order-change', (e     ) => console.log('order', e.detail))",{"id":2430,"name":2431,"exportName":2432,"html":2433,"js":2434},"components-data-table--columns-menu-fixed-columns","Columns Menu Fixed Columns","ColumnsMenuFixedColumns","\u003Cnord-data-table caption=\"Patients — fixed columns in the menu\" columns-menu>\u003C\u002Fnord-data-table>","const rows        = [\n      { id: 101, name: 'Bella', species: 'Dog', breed: 'Golden Retriever', owner: 'Sofia Nieminen', lastVisit: '2026-05-14', status: 'Active' },\n      { id: 102, name: 'Milo', species: 'Cat', breed: 'British Shorthair', owner: 'Aleksi Korhonen', lastVisit: '2026-06-02', status: 'Active' },\n      { id: 103, name: 'Coco', species: 'Rabbit', breed: 'Lionhead', owner: 'Emma Virtanen', lastVisit: '2026-03-21', status: 'Inactive' },\n    ]\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'id', header: 'ID', cell: (info     ) => String(info.getValue()), meta: { textAlign: 'end', cellType: 'smallId' } },\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'species', header: 'Species', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'breed', header: 'Breed', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'owner', header: 'Owner', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'lastVisit', header: 'Last visit', cell: (info     ) => String(info.getValue()), meta: { cellType: 'date' } },\n      { accessorKey: 'status', header: 'Status', cell: (info     ) => String(info.getValue()) },\n    ]\n    table.data = rows\n    table.getRowId = (row     ) => String(row.id)\n    \u002F\u002F Pin ID (start) and Status (end): both appear under \"Fixed columns\" in the\n    \u002F\u002F menu, listed as read-only rows above the toggleable \"Available columns\".\n    table.state = { columnPinning: { left: ['id'], right: ['status'] } }",{"id":2436,"name":2437,"exportName":2438,"html":2439,"js":2440},"components-data-table--sticky-header","Sticky Header","StickyHeader","\u003Cdiv style=\"block-size: 320px\">\n        \u003Cnord-data-table caption=\"Patients — sticky header\" sticky-header>\u003C\u002Fnord-data-table>\n      \u003C\u002Fdiv>","const names = ['Bella', 'Milo', 'Coco', 'Rex', 'Luna']\n    const owners = ['Sofia Nieminen', 'Aleksi Korhonen', 'Emma Virtanen', 'Juho Mäkinen', 'Noora Laine']\n    const rows        = Array.from({ length: 30 }, (_, i) => ({\n      id: 100 + i,\n      name: `${names[i % names.length]} ${i + 1}`,\n      species: i % 2 === 0 ? 'Dog' : 'Cat',\n      owner: owners[i % owners.length],\n    }))\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'id', header: 'ID', cell: (info     ) => String(info.getValue()), meta: { textAlign: 'end', cellType: 'smallId' } },\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'species', header: 'Species', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'owner', header: 'Owner', cell: (info     ) => String(info.getValue()) },\n    ]\n    table.data = rows\n    table.noPagination = true",{"id":2442,"name":2443,"exportName":2444,"html":2445,"js":2446},"components-data-table--loading-skeleton","Loading Skeleton","LoadingSkeleton","\u003Cnord-data-table caption=\"Patients — loading\" loading skeleton-rows=\"5\">\u003C\u002Fnord-data-table>","const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'id', header: 'ID', cell: (info     ) => String(info.getValue()), meta: { textAlign: 'end', cellType: 'smallId' } },\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'species', header: 'Species', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'owner', header: 'Owner', cell: (info     ) => String(info.getValue()) },\n    ]\n    \u002F\u002F No data yet + loading → skeleton rows. Supply rows to instead show the\n    \u002F\u002F spinner overlay over the existing content.\n    table.data = []",{"id":2448,"name":2449,"exportName":2450,"html":2451,"js":2452},"components-data-table--empty-and-no-results","Empty And No Results","EmptyAndNoResults","\u003Cnord-data-table caption=\"Patients — no results\">\u003C\u002Fnord-data-table>","const rows        = [\n      { id: 101, name: 'Bella', species: 'dog' },\n      { id: 102, name: 'Milo', species: 'cat' },\n    ]\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'species', header: 'Species', cell: (info     ) => String(info.getValue()) },\n    ]\n    table.data = rows\n    table.filters = [\n      { type: 'search', key: 'name', label: 'Search', placeholder: 'Search patients' },\n    ]\n    \u002F\u002F A search value that matches nothing → the no-results state with a\n    \u002F\u002F clear-filters CTA (as opposed to the plain empty state for no data).\n    table.filterValues = { name: 'no-such-patient' }\n    table.state = { globalFilter: 'no-such-patient' }\n    table.addEventListener('filter-reset', () => {\n      table.filterValues = {}\n      table.state = { globalFilter: '' }\n    })",{"id":2454,"name":2455,"exportName":2456,"html":2457,"js":2458},"components-data-table--row-errors","Row Errors","RowErrors","\u003Cnord-data-table caption=\"Invoices — with row errors\">\u003C\u002Fnord-data-table>","const rows            = [\n      { id: 'INV-1001', patient: 'Bella', owner: 'Sofia Nieminen', amount: 120.5 },\n      { id: 'INV-1002', patient: 'Milo', owner: 'Aleksi Korhonen', amount: 64 },\n      { id: 'INV-1003', patient: 'Coco', owner: 'Emma Virtanen', amount: 0 },\n    ]\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'id', header: 'Invoice', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'patient', header: 'Patient', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'owner', header: 'Owner', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'amount', header: 'Amount', cell: (info     ) => `€${Number(info.getValue()).toFixed(2)}`, meta: { textAlign: 'end', cellType: 'number' } },\n    ]\n    table.data = rows\n    table.getRowId = (row         ) => row.id\n    \u002F\u002F Keyed by row id; each row with entries gets a danger banner beneath it.\n    table.rowErrors = {\n      'INV-1002': ['Owner has an overdue balance.'],\n      'INV-1003': ['Amount must be greater than zero.', 'Missing line items.'],\n    }",{"id":2460,"name":2461,"exportName":2462,"html":2463,"js":2464},"components-data-table--column-footers","Column Footers","ColumnFooters","\u003Cnord-data-table caption=\"Invoices — with totals\">\u003C\u002Fnord-data-table>","const rows            = [\n      { id: 'INV-1001', patient: 'Bella', amount: 120.5 },\n      { id: 'INV-1002', patient: 'Milo', amount: 64 },\n      { id: 'INV-1003', patient: 'Coco', amount: 220.75 },\n    ]\n\n    const total = rows.reduce((sum, r) => sum + r.amount, 0)\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'id', header: 'Invoice', cell: (info     ) => String(info.getValue()), footer: () => 'Total' },\n      { accessorKey: 'patient', header: 'Patient', cell: (info     ) => String(info.getValue()) },\n      {\n        accessorKey: 'amount',\n        header: 'Amount',\n        cell: (info     ) => `€${Number(info.getValue()).toFixed(2)}`,\n        \u002F\u002F A footer on any visible column renders the \u003Ctfoot> totals row.\n        footer: () => `€${total.toFixed(2)}`,\n        meta: { textAlign: 'end', cellType: 'number' },\n      },\n    ]\n    table.data = rows",{"id":2466,"name":2467,"exportName":2468,"html":2469,"js":2470},"components-data-table--cell-presentation","Cell Presentation","CellPresentation","\u003Cnord-data-table caption=\"Patients — cell presentation via meta\">\u003C\u002Fnord-data-table>","const long = 'A longer clinical note that would overflow a single line and demonstrates clamping behaviour across two or three lines depending on the meta.lineClamp value.'\n    const rows        = [\n      { id: 101, name: 'Bella', notes: long, amount: 120.5 },\n      { id: 102, name: 'Milo', notes: 'Routine check-up.', amount: 64 },\n      { id: 103, name: 'Coco', notes: long, amount: 220.75 },\n    ]\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()), meta: { verticalAlign: 'top' } },\n      \u002F\u002F Clamp overflowing note text to two lines.\n      { accessorKey: 'notes', header: 'Notes', cell: (info     ) => String(info.getValue()), meta: { lineClamp: 2 } },\n      \u002F\u002F End-aligned numeric.\n      { accessorKey: 'amount', header: 'Amount', cell: (info     ) => `€${Number(info.getValue()).toFixed(2)}`, meta: { textAlign: 'end', cellType: 'number' } },\n    ]\n    table.data = rows",{"id":2472,"name":2473,"exportName":2474,"html":2475,"js":2476},"components-data-table--clickable-rows","Clickable Rows","ClickableRows","\u003Cnord-data-table caption=\"Patients — clickable rows\">\u003C\u002Fnord-data-table>","const rows        = [\n      { id: 101, name: 'Bella', species: 'Dog', status: 'active' },\n      { id: 102, name: 'Milo', species: 'Cat', status: 'active' },\n      { id: 103, name: 'Coco', species: 'Rabbit', status: 'inactive' },\n      { id: 104, name: 'Rex', species: 'Dog', status: 'active' },\n    ]\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'species', header: 'Species', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'status', header: 'Status', cell: (info     ) => String(info.getValue()) },\n    ]\n    table.data = rows\n    table.getRowId = (row     ) => String(row.id)\n    \u002F\u002F Only active patients are clickable.\n    table.isRowClickable = (row     ) => row.original.status === 'active'\n    table.addEventListener('row-click', (e     ) => console.log('row clicked', e.detail.id))",{"id":2478,"name":2479,"exportName":2479,"html":2480,"js":2481},"components-data-table--controlled","Controlled","\u003Cnord-data-table caption=\"Patients — controlled state\">\u003C\u002Fnord-data-table>","const names = ['Bella', 'Milo', 'Coco', 'Rex', 'Luna']\n    const owners = ['Sofia Nieminen', 'Aleksi Korhonen', 'Emma Virtanen', 'Juho Mäkinen', 'Noora Laine']\n    const rows        = Array.from({ length: 18 }, (_, i) => ({\n      id: 100 + i,\n      name: `${names[i % names.length]} ${i + 1}`,\n      species: i % 2 === 0 ? 'Dog' : 'Cat',\n      owner: owners[i % owners.length],\n    }))\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'species', header: 'Species', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'owner', header: 'Owner', cell: (info     ) => String(info.getValue()) },\n    ]\n    table.data = rows\n    table.pagination = { pageSize: 5 }\n    \u002F\u002F The consumer holds all state and writes it back on every change.\n    let state = { sorting: [{ id: 'name', desc: false }], pagination: { pageIndex: 0, pageSize: 5 } }\n    table.state = state\n    table.addEventListener('sorting-change', (e     ) => {\n      state = { ...state, sorting: e.detail }\n      table.state = state\n    })\n    table.addEventListener('pagination-change', (e     ) => {\n      state = { ...state, pagination: e.detail }\n      table.state = state\n    })",{"id":2483,"name":2484,"exportName":2484,"html":2485,"js":2486},"components-data-table--uncontrolled","Uncontrolled","\u003Cnord-data-table caption=\"Patients — uncontrolled\">\u003C\u002Fnord-data-table>","const names = ['Bella', 'Milo', 'Coco', 'Rex', 'Luna']\n    const owners = ['Sofia Nieminen', 'Aleksi Korhonen', 'Emma Virtanen', 'Juho Mäkinen', 'Noora Laine']\n    const rows        = Array.from({ length: 18 }, (_, i) => ({\n      id: 100 + i,\n      name: `${names[i % names.length]} ${i + 1}`,\n      species: i % 2 === 0 ? 'Dog' : 'Cat',\n      owner: owners[i % owners.length],\n    }))\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'species', header: 'Species', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'owner', header: 'Owner', cell: (info     ) => String(info.getValue()) },\n    ]\n    table.data = rows\n    \u002F\u002F No .state: sorting\u002Fpagination are managed internally.\n    table.pagination = { pageSize: 5, pageSizeOptions: [5, 10] }",{"id":2488,"name":2489,"exportName":2490,"html":2491,"js":2492},"components-data-table--manual-infinite-scroll","Manual Infinite Scroll","ManualInfiniteScroll","\u003Cdiv style=\"block-size: 360px\">\n        \u003Cnord-data-table caption=\"Patients — server infinite scroll\" manual manual-infinite-scroll sticky-header>\u003C\u002Fnord-data-table>\n      \u003C\u002Fdiv>","const names = ['Bella', 'Milo', 'Coco', 'Rex', 'Luna']\n    const owners = ['Sofia Nieminen', 'Aleksi Korhonen', 'Emma Virtanen', 'Juho Mäkinen', 'Noora Laine']\n    const total = 80\n    const makeRow = (i        )      => ({\n      id: 400 + i,\n      name: `${names[i % names.length]} ${i + 1}`,\n      species: i % 2 === 0 ? 'Dog' : 'Cat',\n      owner: owners[i % owners.length],\n    })\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'id', header: 'ID', cell: (info     ) => String(info.getValue()), meta: { textAlign: 'end', cellType: 'smallId' } },\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'species', header: 'Species', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'owner', header: 'Owner', cell: (info     ) => String(info.getValue()) },\n    ]\n    table.rowCount = total\n    table.noPagination = true\n\n    let loaded = 20\n    const refresh = () => {\n      table.data = Array.from({ length: Math.min(loaded, total) }, (_, i) => makeRow(i))\n    }\n    refresh()\n    \u002F\u002F The consumer appends the next page when the table nears the bottom.\n    table.addEventListener('reached-bottom', () => {\n      if (loaded \u003C total) {\n        loaded += 20\n        refresh()\n      }\n    })",{"id":2494,"name":2495,"exportName":2496,"html":2497,"js":2498},"components-data-table--escape-hatch","Escape Hatch","EscapeHatch","\u003Cnord-data-table caption=\"Patients — external table instance\">\u003C\u002Fnord-data-table>","const rows        = [\n      { id: 101, name: 'Bella', species: 'Dog', owner: 'Sofia Nieminen' },\n      { id: 102, name: 'Milo', species: 'Cat', owner: 'Aleksi Korhonen' },\n      { id: 103, name: 'Coco', species: 'Rabbit', owner: 'Emma Virtanen' },\n    ]\n\n    const table = document.querySelector('nord-data-table')\n    \u002F\u002F In a real app the consumer builds this with createTable\u002FuseReactTable and\n    \u002F\u002F passes it through unchanged. Here we let the component build it from\n    \u002F\u002F columns\u002Fdata — the point is that .table would override that entirely.\n    table.columns = [\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'species', header: 'Species', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'owner', header: 'Owner', cell: (info     ) => String(info.getValue()) },\n    ]\n    table.data = rows",{"id":2500,"name":2501,"exportName":2502,"html":2503,"js":2504},"components-data-table--fully-controlled","Fully Controlled","FullyControlled","\u003Cnord-data-table caption=\"Patients — single-state escape hatch\">\u003C\u002Fnord-data-table>","const names = ['Bella', 'Milo', 'Coco', 'Rex', 'Luna']\n    const rows        = Array.from({ length: 15 }, (_, i) => ({\n      id: 100 + i,\n      name: `${names[i % names.length]} ${i + 1}`,\n      species: i % 2 === 0 ? 'Dog' : 'Cat',\n      owner: 'Sofia Nieminen',\n    }))\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'species', header: 'Species', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'owner', header: 'Owner', cell: (info     ) => String(info.getValue()) },\n    ]\n    table.data = rows\n    table.pagination = { pageSize: 5 }\n    table.state = { sorting: [], pagination: { pageIndex: 0, pageSize: 5 } }\n    \u002F\u002F A single event carrying the entire table state.\n    table.addEventListener('state-change', (e     ) => {\n      table.state = e.detail\n    })",{"id":2506,"name":2507,"exportName":2508,"html":2509,"js":2510},"components-data-table--server-side-complete","Server Side Complete","ServerSideComplete","\u003Cnord-data-table caption=\"Patients — full server-side\" manual>\u003C\u002Fnord-data-table>","const names = ['Bella', 'Milo', 'Coco', 'Rex', 'Luna']\n    const owners = ['Sofia Nieminen', 'Aleksi Korhonen', 'Emma Virtanen', 'Juho Mäkinen', 'Noora Laine']\n    const allRows        = Array.from({ length: 120 }, (_, i) => ({\n      id: 100 + i,\n      name: `${names[i % names.length]} ${i + 1}`,\n      species: i % 2 === 0 ? 'dog' : 'cat',\n      owner: owners[i % owners.length],\n    }))\n\n    \u002F\u002F Simulated server: applies global filter, species filter, sort and paging.\n    const query = { q: '', species: '', sort: { id: 'name', desc: false }                                        , pageIndex: 0, pageSize: 10 }\n    const runQuery = () => {\n      let result = allRows.slice()\n      if (query.q) {\n        const needle = String(query.q).toLowerCase()\n        result = result.filter(r => r.name.toLowerCase().includes(needle))\n      }\n      if (query.species) {\n        result = result.filter(r => r.species === query.species)\n      }\n      if (query.sort) {\n        const { id, desc } = query.sort\n        result.sort((a     , b     ) => String(a[id]).localeCompare(String(b[id])) * (desc ? -1 : 1))\n      }\n      const totalCount = result.length\n      const page = result.slice(query.pageIndex * query.pageSize, query.pageIndex * query.pageSize + query.pageSize)\n      return { page, totalCount }\n    }\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'id', header: 'ID', cell: (info     ) => String(info.getValue()), meta: { textAlign: 'end', cellType: 'smallId' } },\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'species', header: 'Species', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'owner', header: 'Owner', cell: (info     ) => String(info.getValue()) },\n    ]\n    table.pagination = { pageSize: 10, pageSizeOptions: [10, 25, 50] }\n    table.filters = [\n      { type: 'search', key: 'q', label: 'Search', placeholder: 'Search patients' },\n      {\n        type: 'dropdown',\n        key: 'species',\n        label: 'Species',\n        options: [\n          { value: 'dog', label: 'Dog' },\n          { value: 'cat', label: 'Cat' },\n        ],\n      },\n    ]\n\n    const refetch = () => {\n      const { page, totalCount } = runQuery()\n      table.data = page\n      table.rowCount = totalCount\n      table.state = {\n        pagination: { pageIndex: query.pageIndex, pageSize: query.pageSize },\n        sorting: query.sort ? [query.sort] : [],\n      }\n    }\n    refetch()\n\n    \u002F\u002F Every change is a server round-trip in manual mode.\n    table.addEventListener('sorting-change', (e     ) => {\n      query.sort = e.detail[0] ?? null\n      query.pageIndex = 0\n      refetch()\n    })\n    table.addEventListener('pagination-change', (e     ) => {\n      query.pageIndex = e.detail.pageIndex\n      query.pageSize = e.detail.pageSize\n      refetch()\n    })\n    table.addEventListener('filters-change', (e     ) => {\n      query.q = (e.detail.values.q          ) ?? ''\n      const species = e.detail.values.species\n      query.species = Array.isArray(species) ? (species[0] ?? '') : ((species          ) ?? '')\n      query.pageIndex = 0\n      refetch()\n    })\n    table.addEventListener('filter-reset', () => {\n      query.q = ''\n      query.species = ''\n      query.pageIndex = 0\n      refetch()\n    })",{"id":2512,"name":2513,"exportName":2514,"html":2515,"js":2516},"components-data-table--density-striped-rtl","Density Striped Rtl","DensityStripedRtl","\u003Cnord-data-table caption=\"Patients — dense, striped, RTL\" density=\"condensed\" striped dir=\"rtl\">\u003C\u002Fnord-data-table>","const rows        = [\n      { id: 101, name: 'Bella', species: 'Dog', owner: 'Sofia Nieminen' },\n      { id: 102, name: 'Milo', species: 'Cat', owner: 'Aleksi Korhonen' },\n      { id: 103, name: 'Coco', species: 'Rabbit', owner: 'Emma Virtanen' },\n      { id: 104, name: 'Rex', species: 'Dog', owner: 'Juho Mäkinen' },\n    ]\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = [\n      { accessorKey: 'id', header: 'ID', cell: (info     ) => String(info.getValue()), meta: { textAlign: 'end', cellType: 'smallId' } },\n      { accessorKey: 'name', header: 'Name', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'species', header: 'Species', cell: (info     ) => String(info.getValue()) },\n      { accessorKey: 'owner', header: 'Owner', cell: (info     ) => String(info.getValue()) },\n    ]\n    table.data = rows",{"id":2518,"name":2519,"exportName":2520,"html":2521,"js":2522},"components-data-table--server-side","Server Side","ServerSide","\u003Cnord-data-table caption=\"Patients (server-side)\" manual>\u003C\u002Fnord-data-table>","const total = 42\n    const pageSize = 5\n    let pageIndex = 0\n    const makeRow = (i        )          => {\n      const base = data[i % data.length]\n      return { ...base, id: 200 + i, name: `${base.name} ${i + 1}` }\n    }\n    const all = Array.from({ length: total }, (_, i) => makeRow(i))\n\n    const table = document.querySelector('nord-data-table')\n    table.columns = columns\n    table.rowCount = total\n    table.pagination = { pageSize, pageSizeOptions: [5, 10, 25] }\n\n    \u002F\u002F Server-side: keep pageIndex controlled and swap in the current page. In a\n    \u002F\u002F real app the slice would be a fetch keyed by the requested page.\n    const showPage = () => {\n      table.data = all.slice(pageIndex * pageSize, pageIndex * pageSize + pageSize)\n      table.state = { pagination: { pageIndex, pageSize } }\n    }\n    showPage()\n    table.addEventListener('pagination-change', (e             ) => {\n      pageIndex = (e.detail       ).pageIndex\n      showPage()\n    })",{"id":2524,"name":2525,"exportName":2526,"html":2527},"components-data-table--explicit-selection-column","selectionColumn() helper","ExplicitSelectionColumn","\u003Cnord-data-table\n      caption=\"Patients\"\n      enable-row-selection\n    >\u003C\u002Fnord-data-table>",{"id":2529,"name":2530,"exportName":2531,"html":2532},"components-data-table--all-features","All Features","AllFeatures","\u003Cnord-data-table\n      caption=\"Patients — all features\"\n      enable-row-selection\n      enable-column-resizing\n      enable-column-reorder\n      enable-select-all-matching\n      columns-menu\n    >\n      \u003Cnord-data-table-bulk-actions>\n        \u003Cnord-button size=\"s\">\n          \u003Cnord-icon slot=\"start\" name=\"interface-download\">\u003C\u002Fnord-icon>\n          Export\n        \u003C\u002Fnord-button>\n        \u003Cnord-button size=\"s\" variant=\"danger\">\n          \u003Cnord-icon slot=\"start\" name=\"interface-delete\">\u003C\u002Fnord-icon>\n          Delete\n        \u003C\u002Fnord-button>\n      \u003C\u002Fnord-data-table-bulk-actions>\n    \u003C\u002Fnord-data-table>",{"hasPlayground":167,"playgroundId":2534,"stories":2535},"components-rich-text-editor--playground",[2536,2539,2543,2548,2553,2558,2562,2568,2573,2578,2582,2587,2591,2595,2599,2603,2607,2610],{"id":2537,"name":73,"exportName":73,"html":2538},"components-rich-text-editor--basic","\u003Cnord-rich-text-editor\n      label=\"Clinical notes\"\n      hint=\"Changes are saved when focus leaves the editor.\"\n      value=\"<p>Patient is eating and drinking normally.<\u002Fp>\"\n    >\u003C\u002Fnord-rich-text-editor>",{"id":2540,"name":2541,"exportName":2541,"html":2542},"components-rich-text-editor--compact","Compact","\u003Cnord-rich-text-editor\n      toolbar=\"compact\"\n      label=\"Withdrawal period instructions\"\n      value=\"<p>Do not administer within <strong>seven days<\u002Fstrong> of slaughter.<\u002Fp>\"\n    >\u003C\u002Fnord-rich-text-editor>",{"id":2544,"name":2545,"exportName":2546,"html":2547},"components-rich-text-editor--no-toolbar","No Toolbar","NoToolbar","\u003Cnord-rich-text-editor\n      toolbar=\"none\"\n      label=\"Read and edit with keyboard shortcuts\"\n      value=\"<p>The application can provide its own external controls.<\u002Fp>\"\n    >\u003C\u002Fnord-rich-text-editor>",{"id":2549,"name":2550,"exportName":2551,"html":2552},"components-rich-text-editor--character-limit","Character Limit","CharacterLimit","\u003Cnord-rich-text-editor\n      character-counter\n      maxlength=\"280\"\n      resize=\"vertical\"\n      label=\"Referral remarks\"\n      hint=\"Enter up to 280 characters. Drag the lower edge to resize.\"\n    >\u003C\u002Fnord-rich-text-editor>",{"id":2554,"name":2555,"exportName":2556,"html":2557},"components-rich-text-editor--required-and-error","Required And Error","RequiredAndError","\u003Cnord-stack>\n      \u003Cnord-rich-text-editor\n        required\n        label=\"Required clinical notes\"\n        hint=\"Complete this field before continuing.\"\n      >\u003C\u002Fnord-rich-text-editor>\n      \u003Cnord-rich-text-editor\n        required\n        label=\"Clinical notes with error\"\n        error=\"Add clinical notes before continuing.\"\n      >\u003C\u002Fnord-rich-text-editor>\n    \u003C\u002Fnord-stack>",{"id":2559,"name":2560,"exportName":2560,"html":2561},"components-rich-text-editor--narrow","Narrow","\u003Cdiv style=\"inline-size: 320px; max-inline-size: 100%\">\n      \u003Cnord-rich-text-editor\n        label=\"Narrow editor\"\n        value=\"<p>The toolbar wraps without causing page overflow.<\u002Fp>\"\n      >\u003C\u002Fnord-rich-text-editor>\n    \u003C\u002Fdiv>",{"id":2563,"name":2564,"exportName":2565,"html":2566,"js":2567},"components-rich-text-editor--composed-toolbar","Composed Toolbar","ComposedToolbar","\u003Cnord-rich-text-editor label=\"Reminder template\" value=\"<p>Hello <\u002Fp>\">\n      \u003Cnord-rich-text-editor-content>\u003C\u002Fnord-rich-text-editor-content>\n      \u003Cnord-rich-text-editor-toolbar>\n        \u003Cnord-rich-text-editor-toolbar-group label=\"Text formatting\">\n          \u003Cnord-rich-text-editor-command command=\"bold\">\u003C\u002Fnord-rich-text-editor-command>\n          \u003Cnord-rich-text-editor-command command=\"italic\">\u003C\u002Fnord-rich-text-editor-command>\n          \u003Cnord-rich-text-editor-command command=\"bullet-list\">\u003C\u002Fnord-rich-text-editor-command>\n        \u003C\u002Fnord-rich-text-editor-toolbar-group>\n        \u003Cnord-dropdown size=\"s\">\n          \u003Cnord-button slot=\"toggle\" type=\"button\" size=\"s\">Text colour\u003C\u002Fnord-button>\n          \u003Cnord-rich-text-editor-command\n            variant=\"menu-item\"\n            command=\"text-color\"\n            value=\"#0063a3\"\n            label=\"Blue\"\n          >Blue\u003C\u002Fnord-rich-text-editor-command>\n          \u003Cnord-rich-text-editor-command\n            variant=\"menu-item\"\n            command=\"text-color\"\n            value=\"#b42318\"\n            label=\"Red\"\n          >Red\u003C\u002Fnord-rich-text-editor-command>\n        \u003C\u002Fnord-dropdown>\n        \u003Cnord-button id=\"insert-patient-name\" type=\"button\" size=\"s\">Insert patient name\u003C\u002Fnord-button>\n      \u003C\u002Fnord-rich-text-editor-toolbar>\n    \u003C\u002Fnord-rich-text-editor>","const editor = document.querySelector(\"nord-rich-text-editor\")\ndocument.getElementById(\"insert-patient-name\").addEventListener(\"click\", () => {\n  editor.insertContent(\"{{ patient.name }}\")\n})",{"id":2569,"name":2570,"exportName":2571,"html":2572},"components-rich-text-editor--legacy-content","Legacy Content","LegacyContent","\u003Cnord-rich-text-editor\n      label=\"Label template\"\n      media-origin=\"https:\u002F\u002Fnordhealth.design\"\n      value=\"<h3>Medication schedule<\u002Fh3><table class="fr-table fr-dashed-borders fr-alternate-rows" style="width: 100%"><thead><tr><th>Time<\u002Fth><th>Dose<\u002Fth><\u002Ftr><\u002Fthead><tbody><tr><td style="width: 50%">08:00<\u002Ftd><td class="fr-highlighted fr-thick" style="width: 50%; background-color: rgb(97, 189, 109)">One tablet<\u002Ftd><\u002Ftr><\u002Ftbody><\u002Ftable><p>Product image:<\u002Fp><img src="\u002Fimg\u002Fpet.jpg" alt="Medication package" width="120" height="80" class="fr-dib" data-id="asset-1"><p>Scan medicine URL:<\u002Fp><svg version="1.1" viewBox="0 0 16.5 16.5" width="16.5mm" height="16.5mm" shape-rendering="crispEdges"><path id="qr-path" d="M4,4 h1 v1 h -1 z M5,4 h1 v1 h -1 z"><\u002Fpath><\u002Fsvg>\"\n    >\u003C\u002Fnord-rich-text-editor>",{"id":2574,"name":2575,"exportName":2576,"html":2577},"components-rich-text-editor--long-document","Long Document","LongDocument","\u003Cnord-rich-text-editor\n      label=\"Long clinical document\"\n    >\u003C\u002Fnord-rich-text-editor>",{"id":2579,"name":2580,"exportName":2580,"html":2581},"components-rich-text-editor--states","States","\u003Cnord-stack>\n      \u003Cnord-rich-text-editor\n        label=\"Readonly\"\n        readonly\n        value=\"<p>This content remains focusable and is included in form submission.<\u002Fp>\"\n      >\u003C\u002Fnord-rich-text-editor>\n      \u003Cnord-rich-text-editor\n        label=\"Disabled\"\n        disabled\n        value=\"<p>This content is unavailable.<\u002Fp>\"\n      >\u003C\u002Fnord-rich-text-editor>\n      \u003Cnord-rich-text-editor label=\"Error\" error=\"Add clinical notes before continuing.\">\u003C\u002Fnord-rich-text-editor>\n    \u003C\u002Fnord-stack>",{"id":2583,"name":2584,"exportName":2585,"html":2586},"components-rich-text-editor--rtl-example","Rtl Example","RtlExample","\u003Cdiv style=\"inline-size: 320px; max-inline-size: 100%\">\n      \u003Cnord-rich-text-editor\n        character-counter\n        dir=\"rtl\"\n        lang=\"ar-XB\"\n        maxlength=\"120\"\n        label=\"ملاحظات سريرية\"\n        hint=\"يتبع شريط الأدوات اتجاه المستند.\"\n        value=\"<p>المريض يتعافى بشكل جيد.<\u002Fp>\"\n      >\u003C\u002Fnord-rich-text-editor>\n    \u003C\u002Fdiv>",{"id":2588,"name":2589,"exportName":2590},"components-rich-text-editor--visual-nord","Visual Nord","VisualNord",{"id":2592,"name":2593,"exportName":2594},"components-rich-text-editor--visual-nord-dark","Visual Nord Dark","VisualNordDark",{"id":2596,"name":2597,"exportName":2598},"components-rich-text-editor--visual-vet","Visual Vet","VisualVet",{"id":2600,"name":2601,"exportName":2602},"components-rich-text-editor--visual-vet-dark","Visual Vet Dark","VisualVetDark",{"id":2604,"name":2605,"exportName":2606},"components-rich-text-editor--visual-forced-colors","Visual Forced Colors","VisualForcedColors",{"id":2608,"name":1401,"exportName":1401,"html":2609},"components-rich-text-editor--standalone","\u003Cnord-rich-text-editor\n      label=\"Clinical notes\"\n      hint=\"Add information relevant to this visit.\"\n      placeholder=\"Write notes…\"\n    >\u003C\u002Fnord-rich-text-editor>",{"id":2611,"name":959,"exportName":959,"html":2612},"components-rich-text-editor--field","\u003Cnord-field>\n      \u003Cnord-field-label for=\"field-rich-text-editor\">Clinical notes\u003C\u002Fnord-field-label>\n      \u003Cnord-rich-text-editor id=\"field-rich-text-editor\" placeholder=\"Write notes…\">\u003C\u002Fnord-rich-text-editor>\n      \u003Cnord-field-description>Add information relevant to this visit.\u003C\u002Fnord-field-description>\n    \u003C\u002Fnord-field>",{"hasPlayground":167,"playgroundId":2614,"stories":2615},"components-input-group--playground",[2616,2619,2624,2629,2634,2639,2644,2649,2652,2656,2659,2662,2665,2668,2671,2674,2679,2683,2687],{"id":2617,"name":50,"exportName":50,"html":2618},"components-input-group--overview","\u003Cnord-input-group\n      label=\"Search patients\"\n      hide-label\n    >\n      \u003Cnord-input placeholder=\"Search patients\">\u003C\u002Fnord-input>\n      \u003Cnord-input-group-addon position=\"inline-start\">\n        \u003Cnord-icon name=\"navigation-search\">\u003C\u002Fnord-icon>\n      \u003C\u002Fnord-input-group-addon>\n    \u003C\u002Fnord-input-group>",{"id":2620,"name":2621,"exportName":2622,"html":2623},"components-input-group--label-ownership","Label ownership","LabelOwnership","\u003Cdiv\n      style=\"\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));\n        gap: var(--n-space-l);\n        align-items: start;\n        inline-size: 100%;\n        max-inline-size: 48rem;\n      \"\n    >\n      \u003Cnord-stack gap=\"s\">\n        \u003Cstrong>Standalone Input Group\u003C\u002Fstrong>\n        \u003Cnord-input-group\n          label=\"Website\"\n          hint=\"Enter the public address.\"\n          required\n        >\n          \u003Cnord-input placeholder=\"example.com\">\u003C\u002Fnord-input>\n          \u003Cnord-input-group-addon position=\"inline-start\"\n            >https:\u002F\u002F\u003C\u002Fnord-input-group-addon\n          >\n        \u003C\u002Fnord-input-group>\n      \u003C\u002Fnord-stack>\n\n      \u003Cnord-stack gap=\"s\">\n        \u003Cstrong>Inside Field\u003C\u002Fstrong>\n        \u003Cnord-field>\n          \u003Cnord-field-label for=\"field-website\">Website\u003C\u002Fnord-field-label>\n          \u003Cnord-input-group>\n            \u003Cnord-input\n              id=\"field-website\"\n              placeholder=\"example.com\"\n              required\n            >\u003C\u002Fnord-input>\n            \u003Cnord-input-group-addon position=\"inline-start\"\n              >https:\u002F\u002F\u003C\u002Fnord-input-group-addon\n            >\n          \u003C\u002Fnord-input-group>\n          \u003Cnord-field-description\n            >Enter the public address.\u003C\u002Fnord-field-description\n          >\n        \u003C\u002Fnord-field>\n      \u003C\u002Fnord-stack>\n    \u003C\u002Fdiv>",{"id":2625,"name":2626,"exportName":2627,"html":2628},"components-input-group--hint-below","Hint below","HintBelow","\u003Cnord-input-group\n      label=\"Email address\"\n      hint=\"We’ll only use this address for account notifications.\"\n      hint-below\n    >\n      \u003Cnord-input type=\"email\" placeholder=\"name\">\u003C\u002Fnord-input>\n      \u003Cnord-input-group-addon position=\"inline-end\">@example.com\u003C\u002Fnord-input-group-addon>\n    \u003C\u002Fnord-input-group>",{"id":2630,"name":2631,"exportName":2632,"html":2633},"components-input-group--inline-start","inline-start","InlineStart","\u003Cnord-input-group label=\"Website\">\n      \u003Cnord-input placeholder=\"example.com\">\u003C\u002Fnord-input>\n      \u003Cnord-input-group-addon position=\"inline-start\"\n        >https:\u002F\u002F\u003C\u002Fnord-input-group-addon\n      >\n    \u003C\u002Fnord-input-group>",{"id":2635,"name":2636,"exportName":2637,"html":2638},"components-input-group--inline-end","inline-end","InlineEnd","\u003Cnord-input-group label=\"Website\">\n      \u003Cnord-input placeholder=\"example\">\u003C\u002Fnord-input>\n      \u003Cnord-input-group-addon position=\"inline-end\"\n        >.com\u003C\u002Fnord-input-group-addon\n      >\n    \u003C\u002Fnord-input-group>",{"id":2640,"name":2641,"exportName":2642,"html":2643},"components-input-group--block-start","block-start","BlockStart","\u003Cnord-input-group label=\"Profile URL\">\n      \u003Cnord-input value=\"laura-williams\">\u003C\u002Fnord-input>\n      \u003Cnord-input-group-addon position=\"block-start\">\n        \u003Cspan>https:\u002F\u002Fexample.com\u002Fusers\u002F\u003C\u002Fspan>\n        \u003Cnord-icon name=\"interface-link\">\u003C\u002Fnord-icon>\n      \u003C\u002Fnord-input-group-addon>\n    \u003C\u002Fnord-input-group>",{"id":2645,"name":2646,"exportName":2647,"html":2648},"components-input-group--block-end","block-end","BlockEnd","\u003Cnord-input-group label=\"Username\">\n      \u003Cnord-input value=\"laura-williams\">\u003C\u002Fnord-input>\n      \u003Cnord-input-group-addon position=\"block-end\">\n        \u003Cspan>Public profile name\u003C\u002Fspan>\n        \u003Cspan>14 \u002F 30\u003C\u002Fspan>\n      \u003C\u002Fnord-input-group-addon>\n    \u003C\u002Fnord-input-group>",{"id":2650,"name":1045,"exportName":1045,"html":2651},"components-input-group--icon","\u003Cnord-stack gap=\"m\">\n      \u003Cnord-input-group label=\"Card number\">\n        \u003Cnord-input\n          inputmode=\"numeric\"\n          placeholder=\"4242 4242 4242 4242\"\n        >\u003C\u002Fnord-input>\n        \u003Cnord-input-group-addon position=\"inline-start\">\n          \u003Cnord-icon name=\"generic-credit-card\">\u003C\u002Fnord-icon>\n        \u003C\u002Fnord-input-group-addon>\n        \u003Cnord-input-group-addon position=\"inline-end\">\n          \u003Cnord-icon\n            name=\"interface-checked\"\n            color=\"var(--n-color-status-success)\"\n          >\u003C\u002Fnord-icon>\n        \u003C\u002Fnord-input-group-addon>\n      \u003C\u002Fnord-input-group>\n    \u003C\u002Fnord-stack>",{"id":2653,"name":2654,"exportName":2654,"html":2655},"components-input-group--text","Text","\u003Cnord-stack gap=\"m\">\n      \u003Cnord-input-group label=\"Price\">\n        \u003Cnord-input inputmode=\"decimal\" placeholder=\"0.00\">\u003C\u002Fnord-input>\n        \u003Cnord-input-group-addon position=\"inline-start\"\n          >$\u003C\u002Fnord-input-group-addon\n        >\n        \u003Cnord-input-group-addon position=\"inline-end\"\n          >USD\u003C\u002Fnord-input-group-addon\n        >\n      \u003C\u002Fnord-input-group>\n      \u003Cnord-input-group label=\"Email address\">\n        \u003Cnord-input placeholder=\"username\">\u003C\u002Fnord-input>\n        \u003Cnord-input-group-addon position=\"inline-end\"\n          >@example.com\u003C\u002Fnord-input-group-addon\n        >\n      \u003C\u002Fnord-input-group>\n    \u003C\u002Fnord-stack>",{"id":2657,"name":1731,"exportName":1731,"html":2658},"components-input-group--sizes","\u003Cdiv\n      style=\"\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));\n        gap: var(--n-space-l);\n        align-items: start;\n        inline-size: 100%;\n        max-inline-size: 72rem;\n      \"\n    >\n      \u003Cnord-stack gap=\"m\">\n        \u003Cstrong>Small (s)\u003C\u002Fstrong>\n        \u003Cnord-input-group label=\"Search patients\" size=\"s\">\n          \u003Cnord-input placeholder=\"Search patients\">\u003C\u002Fnord-input>\n          \u003Cnord-input-group-addon position=\"inline-start\">\n            \u003Cnord-icon name=\"navigation-search\" size=\"xs\">\u003C\u002Fnord-icon>\n          \u003C\u002Fnord-input-group-addon>\n        \u003C\u002Fnord-input-group>\n        \u003Cnord-input-group label=\"Price\" size=\"s\">\n          \u003Cnord-input value=\"48.00\">\u003C\u002Fnord-input>\n          \u003Cnord-input-group-addon position=\"inline-start\"\n            >$\u003C\u002Fnord-input-group-addon\n          >\n          \u003Cnord-input-group-addon position=\"inline-end\"\n            >USD\u003C\u002Fnord-input-group-addon\n          >\n        \u003C\u002Fnord-input-group>\n        \u003Cnord-input-group label=\"Repository\" size=\"s\">\n          \u003Cnord-input value=\"design-system\">\u003C\u002Fnord-input>\n          \u003Cnord-input-group-addon position=\"inline-start\">\n            \u003Cnord-dropdown size=\"s\">\n              \u003Cnord-button slot=\"toggle\" type=\"button\" size=\"s\" variant=\"plain\"\n                >Org\u003C\u002Fnord-button\n              >\n              \u003Cnord-dropdown-item>Nordhealth\u003C\u002Fnord-dropdown-item>\n              \u003Cnord-dropdown-item>Personal\u003C\u002Fnord-dropdown-item>\n            \u003C\u002Fnord-dropdown>\n          \u003C\u002Fnord-input-group-addon>\n        \u003C\u002Fnord-input-group>\n        \u003Cnord-input-group label=\"Command\" size=\"s\">\n          \u003Cnord-input placeholder=\"Search commands\">\u003C\u002Fnord-input>\n          \u003Cnord-input-group-addon position=\"inline-end\">\n            \u003Cnord-spinner size=\"s\" label=\"Loading commands\">\u003C\u002Fnord-spinner>\n            \u003Cnord-kbd size=\"s\">⌘K\u003C\u002Fnord-kbd>\n          \u003C\u002Fnord-input-group-addon>\n        \u003C\u002Fnord-input-group>\n        \u003Cnord-input-group label=\"Comment\" size=\"s\">\n          \u003Cnord-textarea\n            rows=\"2\"\n            resize=\"auto\"\n            placeholder=\"Leave a comment…\"\n          >\u003C\u002Fnord-textarea>\n          \u003Cnord-input-group-addon position=\"block-start\">\n            \u003Cspan>Markdown\u003C\u002Fspan>\n            \u003Cspan>Draft\u003C\u002Fspan>\n          \u003C\u002Fnord-input-group-addon>\n          \u003Cnord-input-group-addon position=\"block-end\">\n            \u003Cspan>0 \u002F 500\u003C\u002Fspan>\n            \u003Cspan>Saved\u003C\u002Fspan>\n          \u003C\u002Fnord-input-group-addon>\n        \u003C\u002Fnord-input-group>\n      \u003C\u002Fnord-stack>\n\n      \u003Cnord-stack gap=\"m\">\n        \u003Cstrong>Medium (m)\u003C\u002Fstrong>\n        \u003Cnord-input-group label=\"Search patients\" size=\"m\">\n          \u003Cnord-input placeholder=\"Search patients\">\u003C\u002Fnord-input>\n          \u003Cnord-input-group-addon position=\"inline-start\">\n            \u003Cnord-icon name=\"navigation-search\" size=\"s\">\u003C\u002Fnord-icon>\n          \u003C\u002Fnord-input-group-addon>\n        \u003C\u002Fnord-input-group>\n        \u003Cnord-input-group label=\"Price\" size=\"m\">\n          \u003Cnord-input value=\"48.00\">\u003C\u002Fnord-input>\n          \u003Cnord-input-group-addon position=\"inline-start\"\n            >$\u003C\u002Fnord-input-group-addon\n          >\n          \u003Cnord-input-group-addon position=\"inline-end\"\n            >USD\u003C\u002Fnord-input-group-addon\n          >\n        \u003C\u002Fnord-input-group>\n        \u003Cnord-input-group label=\"Repository\" size=\"m\">\n          \u003Cnord-input value=\"design-system\">\u003C\u002Fnord-input>\n          \u003Cnord-input-group-addon position=\"inline-start\">\n            \u003Cnord-dropdown size=\"m\">\n              \u003Cnord-button slot=\"toggle\" type=\"button\" size=\"m\" variant=\"plain\"\n                >Org\u003C\u002Fnord-button\n              >\n              \u003Cnord-dropdown-item>Nordhealth\u003C\u002Fnord-dropdown-item>\n              \u003Cnord-dropdown-item>Personal\u003C\u002Fnord-dropdown-item>\n            \u003C\u002Fnord-dropdown>\n          \u003C\u002Fnord-input-group-addon>\n        \u003C\u002Fnord-input-group>\n        \u003Cnord-input-group label=\"Command\" size=\"m\">\n          \u003Cnord-input placeholder=\"Search commands\">\u003C\u002Fnord-input>\n          \u003Cnord-input-group-addon position=\"inline-end\">\n            \u003Cnord-spinner size=\"m\" label=\"Loading commands\">\u003C\u002Fnord-spinner>\n            \u003Cnord-kbd size=\"m\">⌘K\u003C\u002Fnord-kbd>\n          \u003C\u002Fnord-input-group-addon>\n        \u003C\u002Fnord-input-group>\n        \u003Cnord-input-group label=\"Comment\" size=\"m\">\n          \u003Cnord-textarea\n            rows=\"2\"\n            resize=\"auto\"\n            placeholder=\"Leave a comment…\"\n          >\u003C\u002Fnord-textarea>\n          \u003Cnord-input-group-addon position=\"block-start\">\n            \u003Cspan>Markdown\u003C\u002Fspan>\n            \u003Cspan>Draft\u003C\u002Fspan>\n          \u003C\u002Fnord-input-group-addon>\n          \u003Cnord-input-group-addon position=\"block-end\">\n            \u003Cspan>0 \u002F 500\u003C\u002Fspan>\n            \u003Cspan>Saved\u003C\u002Fspan>\n          \u003C\u002Fnord-input-group-addon>\n        \u003C\u002Fnord-input-group>\n      \u003C\u002Fnord-stack>\n\n      \u003Cnord-stack gap=\"m\">\n        \u003Cstrong>Large (l)\u003C\u002Fstrong>\n        \u003Cnord-input-group label=\"Search patients\" size=\"l\">\n          \u003Cnord-input placeholder=\"Search patients\">\u003C\u002Fnord-input>\n          \u003Cnord-input-group-addon position=\"inline-start\">\n            \u003Cnord-icon name=\"navigation-search\" size=\"m\">\u003C\u002Fnord-icon>\n          \u003C\u002Fnord-input-group-addon>\n        \u003C\u002Fnord-input-group>\n        \u003Cnord-input-group label=\"Price\" size=\"l\">\n          \u003Cnord-input value=\"48.00\">\u003C\u002Fnord-input>\n          \u003Cnord-input-group-addon position=\"inline-start\"\n            >$\u003C\u002Fnord-input-group-addon\n          >\n          \u003Cnord-input-group-addon position=\"inline-end\"\n            >USD\u003C\u002Fnord-input-group-addon\n          >\n        \u003C\u002Fnord-input-group>\n        \u003Cnord-input-group label=\"Repository\" size=\"l\">\n          \u003Cnord-input value=\"design-system\">\u003C\u002Fnord-input>\n          \u003Cnord-input-group-addon position=\"inline-start\">\n            \u003Cnord-dropdown size=\"l\">\n              \u003Cnord-button slot=\"toggle\" type=\"button\" size=\"l\" variant=\"plain\"\n                >Org\u003C\u002Fnord-button\n              >\n              \u003Cnord-dropdown-item>Nordhealth\u003C\u002Fnord-dropdown-item>\n              \u003Cnord-dropdown-item>Personal\u003C\u002Fnord-dropdown-item>\n            \u003C\u002Fnord-dropdown>\n          \u003C\u002Fnord-input-group-addon>\n        \u003C\u002Fnord-input-group>\n        \u003Cnord-input-group label=\"Command\" size=\"l\">\n          \u003Cnord-input placeholder=\"Search commands\">\u003C\u002Fnord-input>\n          \u003Cnord-input-group-addon position=\"inline-end\">\n            \u003Cnord-spinner size=\"l\" label=\"Loading commands\">\u003C\u002Fnord-spinner>\n            \u003Cnord-kbd size=\"l\">⌘K\u003C\u002Fnord-kbd>\n          \u003C\u002Fnord-input-group-addon>\n        \u003C\u002Fnord-input-group>\n        \u003Cnord-input-group label=\"Comment\" size=\"l\">\n          \u003Cnord-textarea\n            rows=\"2\"\n            resize=\"auto\"\n            placeholder=\"Leave a comment…\"\n          >\u003C\u002Fnord-textarea>\n          \u003Cnord-input-group-addon position=\"block-start\">\n            \u003Cspan>Markdown\u003C\u002Fspan>\n            \u003Cspan>Draft\u003C\u002Fspan>\n          \u003C\u002Fnord-input-group-addon>\n          \u003Cnord-input-group-addon position=\"block-end\">\n            \u003Cspan>0 \u002F 500\u003C\u002Fspan>\n            \u003Cspan>Saved\u003C\u002Fspan>\n          \u003C\u002Fnord-input-group-addon>\n        \u003C\u002Fnord-input-group>\n      \u003C\u002Fnord-stack>\n    \u003C\u002Fdiv>",{"id":2660,"name":713,"exportName":713,"html":2661},"components-input-group--button","\u003Cnord-input-group label=\"API token\">\n      \u003Cnord-input value=\"nord_live_8f2a7\">\u003C\u002Fnord-input>\n      \u003Cnord-input-group-addon position=\"inline-end\">\n        \u003Cnord-button\n          type=\"button\"\n          size=\"s\"\n          square\n          aria-label=\"Copy API token\"\n          aria-describedby=\"copy-api-token-tooltip\"\n        >\n          \u003Cnord-icon name=\"interface-copy\">\u003C\u002Fnord-icon>\n        \u003C\u002Fnord-button>\n        \u003Cnord-tooltip id=\"copy-api-token-tooltip\">Copy API token\u003C\u002Fnord-tooltip>\n      \u003C\u002Fnord-input-group-addon>\n    \u003C\u002Fnord-input-group>",{"id":2663,"name":1103,"exportName":1103,"html":2664},"components-input-group--kbd","\u003Cnord-input-group\n      label=\"Search commands\"\n      hide-label\n    >\n      \u003Cnord-input placeholder=\"Search commands\">\u003C\u002Fnord-input>\n      \u003Cnord-input-group-addon position=\"inline-start\">\n        \u003Cnord-icon name=\"navigation-search\">\u003C\u002Fnord-icon>\n      \u003C\u002Fnord-input-group-addon>\n      \u003Cnord-input-group-addon position=\"inline-end\">\n        \u003Cnord-kbd size=\"s\">⌘\u003C\u002Fnord-kbd>\n        \u003Cnord-kbd size=\"s\">K\u003C\u002Fnord-kbd>\n      \u003C\u002Fnord-input-group-addon>\n    \u003C\u002Fnord-input-group>",{"id":2666,"name":937,"exportName":937,"html":2667},"components-input-group--dropdown","\u003Cnord-input-group label=\"Repository\">\n      \u003Cnord-input placeholder=\"design-system\">\u003C\u002Fnord-input>\n      \u003Cnord-input-group-addon position=\"inline-start\">\n        \u003Cnord-dropdown size=\"s\">\n          \u003Cnord-button slot=\"toggle\" type=\"button\" size=\"s\" variant=\"plain\"\n            >Organization\u003C\u002Fnord-button\n          >\n          \u003Cnord-dropdown-item>Nordhealth\u003C\u002Fnord-dropdown-item>\n          \u003Cnord-dropdown-item>Personal\u003C\u002Fnord-dropdown-item>\n        \u003C\u002Fnord-dropdown>\n      \u003C\u002Fnord-input-group-addon>\n    \u003C\u002Fnord-input-group>",{"id":2669,"name":1309,"exportName":1309,"html":2670},"components-input-group--spinner","\u003Cnord-stack gap=\"m\">\n      \u003Cnord-input-group label=\"Workspace name\">\n        \u003Cnord-input value=\"Design system\">\u003C\u002Fnord-input>\n        \u003Cnord-input-group-addon position=\"inline-end\">\n          \u003Cnord-spinner size=\"s\" label=\"Saving workspace name\">\u003C\u002Fnord-spinner>\n          \u003Cspan>Saving…\u003C\u002Fspan>\n        \u003C\u002Fnord-input-group-addon>\n      \u003C\u002Fnord-input-group>\n      \u003Cnord-input-group label=\"Project\">\n        \u003Cnord-input placeholder=\"Loading projects\" readonly>\u003C\u002Fnord-input>\n        \u003Cnord-input-group-addon position=\"inline-start\">\n          \u003Cnord-spinner size=\"s\" label=\"Loading projects\">\u003C\u002Fnord-spinner>\n        \u003C\u002Fnord-input-group-addon>\n      \u003C\u002Fnord-input-group>\n    \u003C\u002Fnord-stack>",{"id":2672,"name":1343,"exportName":1343,"html":2673},"components-input-group--textarea","\u003Cnord-input-group label=\"Code review comment\">\n      \u003Cnord-textarea\n        rows=\"3\"\n        resize=\"auto\"\n        placeholder=\"Leave a comment…\"\n      >\u003C\u002Fnord-textarea>\n      \u003Cnord-input-group-addon position=\"block-start\">\n        \u003Cspan>Markdown supported\u003C\u002Fspan>\n        \u003Cnord-icon name=\"interface-info\">\u003C\u002Fnord-icon>\n      \u003C\u002Fnord-input-group-addon>\n      \u003Cnord-input-group-addon position=\"block-end\">\n        \u003Cspan>0 \u002F 500 characters\u003C\u002Fspan>\n      \u003C\u002Fnord-input-group-addon>\n    \u003C\u002Fnord-input-group>",{"id":2675,"name":2676,"exportName":2677,"html":2678},"components-input-group--custom-input","Custom Input","CustomInput","\u003Cnord-input-group\n      label=\"Search audit events\"\n      hide-label\n      style=\"; --n-input-group-border-radius: var(--n-border-radius-pill)\"\n    >\n      \u003Cnord-input\n        type=\"search\"\n        placeholder=\"Search audit events\"\n        autocomplete=\"off\"\n      >\u003C\u002Fnord-input>\n      \u003Cnord-input-group-addon position=\"inline-end\"\n        >Last 30 days\u003C\u002Fnord-input-group-addon\n      >\n    \u003C\u002Fnord-input-group>",{"id":2680,"name":2681,"exportName":2681,"html":2682},"components-input-group--rtl","RTL","\u003Cnord-stack gap=\"m\">\n      \u003Cnord-input-group label=\"البحث عن المرضى\">\n        \u003Cnord-input placeholder=\"اكتب اسم المريض\">\u003C\u002Fnord-input>\n        \u003Cnord-input-group-addon position=\"inline-start\">\n          \u003Cnord-icon name=\"navigation-search\">\u003C\u002Fnord-icon>\n        \u003C\u002Fnord-input-group-addon>\n        \u003Cnord-input-group-addon position=\"inline-end\"\n          >⌘ K\u003C\u002Fnord-input-group-addon\n        >\n      \u003C\u002Fnord-input-group>\n      \u003Cnord-input-group label=\"ملاحظات\">\n        \u003Cnord-textarea rows=\"3\" placeholder=\"أضف ملاحظة\">\u003C\u002Fnord-textarea>\n        \u003Cnord-input-group-addon position=\"block-end\"\n          >0 \u002F 500\u003C\u002Fnord-input-group-addon\n        >\n      \u003C\u002Fnord-input-group>\n    \u003C\u002Fnord-stack>",{"id":2684,"name":2685,"exportName":2685,"html":2686},"components-input-group--validation","Validation","\u003Cnord-field invalid>\n      \u003Cnord-field-label for=\"validation-domain\">Domain\u003C\u002Fnord-field-label>\n      \u003Cnord-input-group>\n        \u003Cnord-input id=\"validation-domain\" value=\"example\">\u003C\u002Fnord-input>\n        \u003Cnord-input-group-addon position=\"inline-start\"\n          >https:\u002F\u002F\u003C\u002Fnord-input-group-addon\n        >\n        \u003Cnord-input-group-addon position=\"inline-end\"\n          >.com\u003C\u002Fnord-input-group-addon\n        >\n      \u003C\u002Fnord-input-group>\n      \u003Cnord-field-description\n        >Enter the complete public domain.\u003C\u002Fnord-field-description\n      >\n      \u003Cnord-field-error>This domain is already in use.\u003C\u002Fnord-field-error>\n    \u003C\u002Fnord-field>",{"id":2688,"name":2689,"exportName":2689,"html":2690},"components-input-group--disabled","Disabled","\u003Cnord-stack gap=\"m\">\n      \u003Cnord-input-group label=\"Disabled API token\" disabled>\n        \u003Cnord-input value=\"nord_live_8f2a7\">\u003C\u002Fnord-input>\n        \u003Cnord-input-group-addon position=\"inline-end\">\n          \u003Cnord-button\n            type=\"button\"\n            size=\"s\"\n            square\n            disabled\n            aria-label=\"Copy disabled API token\"\n          >\n            \u003Cnord-icon name=\"interface-copy\">\u003C\u002Fnord-icon>\n          \u003C\u002Fnord-button>\n        \u003C\u002Fnord-input-group-addon>\n      \u003C\u002Fnord-input-group>\n      \u003Cnord-input-group label=\"Readonly API token\" readonly>\n        \u003Cnord-input value=\"nord_live_8f2a7\">\u003C\u002Fnord-input>\n        \u003Cnord-input-group-addon position=\"inline-end\">\n          \u003Cnord-button\n            type=\"button\"\n            size=\"s\"\n            square\n            aria-label=\"Copy readonly API token\"\n          >\n            \u003Cnord-icon name=\"interface-copy\">\u003C\u002Fnord-icon>\n          \u003C\u002Fnord-button>\n        \u003C\u002Fnord-input-group-addon>\n      \u003C\u002Fnord-input-group>\n    \u003C\u002Fnord-stack>",{"hasPlayground":167,"playgroundId":2692,"stories":2693},"components-overflow-list--playground",[2694,2697,2702,2707,2712,2718,2723,2728,2734],{"id":2695,"name":50,"exportName":50,"html":2696},"components-overflow-list--overview","\u003Cdiv\n      style=\"box-sizing: border-box; inline-size: 23rem; max-inline-size: 100%; padding: var(--n-space-s); border: 1px dashed var(--n-color-border)\"\n    >\n      \u003Cnord-overflow-list observe=\"parent\" gap=\"s\">\n        \u003Cnord-button size=\"s\">Overview\u003C\u002Fnord-button>\n        \u003Cnord-button size=\"s\">Properties\u003C\u002Fnord-button>\n        \u003Cnord-button size=\"s\">Edit\u003C\u002Fnord-button>\n        \u003Cnord-button size=\"s\">Duplicate\u003C\u002Fnord-button>\n        \u003Cnord-button size=\"s\">Share\u003C\u002Fnord-button>\n        \u003Cnord-overflow-list-menu\n          slot=\"overflow\"\n          size=\"s\"\n          singular-label=\"action\"\n          plural-label=\"actions\"\n        >\u003C\u002Fnord-overflow-list-menu>\n      \u003C\u002Fnord-overflow-list>\n    \u003C\u002Fdiv>",{"id":2698,"name":2699,"exportName":2700,"html":2701},"components-overflow-list--collapse-from-start","Collapse From Start","CollapseFromStart","\u003Cnord-overflow-list\n      style=\"inline-size: 18rem; max-inline-size: 100%\"\n      collapse-from=\"start\"\n      gap=\"s\"\n    >\n      \u003Cnord-overflow-list-menu\n        slot=\"overflow\"\n        size=\"s\"\n        singular-label=\"action\"\n        plural-label=\"actions\"\n      >\u003C\u002Fnord-overflow-list-menu>\n      \u003Cnord-button size=\"s\">Step 1\u003C\u002Fnord-button>\n      \u003Cnord-button size=\"s\">Step 2\u003C\u002Fnord-button>\n      \u003Cnord-button size=\"s\">Step 3\u003C\u002Fnord-button>\n      \u003Cnord-button size=\"s\">Step 4\u003C\u002Fnord-button>\n      \u003Cnord-button size=\"s\">Step 5\u003C\u002Fnord-button>\n    \u003C\u002Fnord-overflow-list>",{"id":2703,"name":2704,"exportName":2705,"html":2706},"components-overflow-list--badge-tags","Badge Tags","BadgeTags","\u003Cnord-card\n      style=\"box-sizing: border-box; resize: horizontal; overflow: hidden; min-inline-size: 5rem; inline-size: 18.75rem; max-inline-size: 100%\"\n    >\n      \u003Cnord-overflow-list gap=\"xs\">\n        \u003Cnord-badge variant=\"info\">React\u003C\u002Fnord-badge>\n        \u003Cnord-badge variant=\"success\">TypeScript\u003C\u002Fnord-badge>\n        \u003Cnord-badge variant=\"warning\">StyleX\u003C\u002Fnord-badge>\n        \u003Cnord-badge variant=\"neutral\">Storybook\u003C\u002Fnord-badge>\n        \u003Cnord-badge variant=\"danger\">Vitest\u003C\u002Fnord-badge>\n        \u003Cnord-badge slot=\"overflow\" variant=\"neutral\">\n          \u003Cnord-overflow-list-count compact singular-label=\"tag\" plural-label=\"tags\">\u003C\u002Fnord-overflow-list-count>\n        \u003C\u002Fnord-badge>\n      \u003C\u002Fnord-overflow-list>\n    \u003C\u002Fnord-card>",{"id":2708,"name":2709,"exportName":2710,"html":2711},"components-overflow-list--dropdown-actions","Dropdown Actions","DropdownActions","\u003Cnord-card\n      style=\"box-sizing: border-box; resize: horizontal; overflow: hidden; min-inline-size: 6.25rem; inline-size: 18rem; max-inline-size: 100%\"\n    >\n      \u003Cnord-overflow-list gap=\"s\">\n        \u003Cnord-button size=\"s\" variant=\"primary\">Save\u003C\u002Fnord-button>\n        \u003Cnord-button size=\"s\">Edit\u003C\u002Fnord-button>\n        \u003Cnord-button size=\"s\">Duplicate\u003C\u002Fnord-button>\n        \u003Cnord-button size=\"s\">Share\u003C\u002Fnord-button>\n        \u003Cnord-button size=\"s\">Archive\u003C\u002Fnord-button>\n        \u003Cnord-button size=\"s\" variant=\"danger\">Delete\u003C\u002Fnord-button>\n        \u003Cnord-overflow-list-menu\n          slot=\"overflow\"\n          size=\"s\"\n          compact\n          singular-label=\"action\"\n          plural-label=\"actions\"\n        >\u003C\u002Fnord-overflow-list-menu>\n      \u003C\u002Fnord-overflow-list>\n    \u003C\u002Fnord-card>",{"id":2713,"name":2714,"exportName":2715,"html":2716,"js":2717},"components-overflow-list--click-handlers","Original click handlers","ClickHandlers","\u003Cnord-card\n      style=\"box-sizing: border-box; resize: horizontal; overflow: hidden; min-inline-size: 11rem; inline-size: 22rem; max-inline-size: 100%\"\n    >\n      \u003Cnord-stack gap=\"s\">\n        \u003Cnord-overflow-list id=\"click-handler-list\" gap=\"s\">\n          \u003Cnord-button id=\"click-handler-save\" size=\"s\" data-click-handler-action=\"Save\">Save\u003C\u002Fnord-button>\n          \u003Cnord-button id=\"click-handler-edit\" size=\"s\" data-click-handler-action=\"Edit\">Edit\u003C\u002Fnord-button>\n          \u003Cnord-button id=\"click-handler-duplicate\" size=\"s\" data-click-handler-action=\"Duplicate\">Duplicate\u003C\u002Fnord-button>\n          \u003Cnord-button id=\"click-handler-share\" size=\"s\" data-click-handler-action=\"Share\">Share\u003C\u002Fnord-button>\n          \u003Cnord-button id=\"click-handler-archive\" size=\"s\" data-click-handler-action=\"Archive\">Archive\u003C\u002Fnord-button>\n          \u003Cnord-overflow-list-menu\n            slot=\"overflow\"\n            size=\"s\"\n            compact\n            singular-label=\"action\"\n            plural-label=\"actions\"\n          >\u003C\u002Fnord-overflow-list-menu>\n        \u003C\u002Fnord-overflow-list>\n        \u003Coutput\n          id=\"click-handler-output\"\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n          data-handler-count=\"0\"\n          data-current-target=\"\"\n          data-is-trusted=\"\"\n          style=\"color: var(--n-color-text-weaker); font-size: var(--n-font-size-s); line-height: var(--n-line-height)\"\n        >No action handled yet.\u003C\u002Foutput>\n      \u003C\u002Fnord-stack>\n    \u003C\u002Fnord-card>","const list = document.getElementById(\"click-handler-list\")\nconst output = document.getElementById(\"click-handler-output\")\nlet handlerCount = 0\n\nArray.from(list.children)\n  .filter(element => element.matches(\"nord-button[data-click-handler-action]\"))\n  .forEach((button) => {\n    button.addEventListener(\"click\", (event) => {\n      handlerCount += 1\n      const original = event.currentTarget\n      const label = original.dataset.clickHandlerAction\n      output.dataset.handlerCount = String(handlerCount)\n      output.dataset.currentTarget = original.id\n      output.dataset.isTrusted = String(event.isTrusted)\n      output.value = label + \" handled \" + handlerCount + (handlerCount === 1 ? \" time\" : \" times\")\n        + \"; currentTarget: #\" + original.id + \"; isTrusted: \" + event.isTrusted\n    })\n  })",{"id":2719,"name":2720,"exportName":2721,"html":2722},"components-overflow-list--parent-observation","Parent Observation","ParentObservation","\u003Cdiv\n      style=\"box-sizing: border-box; inline-size: 18rem; padding: var(--n-space-s); border: 1px solid var(--n-color-border)\"\n    >\n      \u003Cnord-overflow-list observe=\"parent\" gap=\"xs\">\n        \u003Cnord-button>Appointments\u003C\u002Fnord-button>\n        \u003Cnord-button>Messages\u003C\u002Fnord-button>\n        \u003Cnord-button>Invoices\u003C\u002Fnord-button>\n        \u003Cnord-button>Reports\u003C\u002Fnord-button>\n        \u003Cnord-overflow-list-menu\n          slot=\"overflow\"\n          singular-label=\"action\"\n          plural-label=\"actions\"\n        >\u003C\u002Fnord-overflow-list-menu>\n      \u003C\u002Fnord-overflow-list>\n    \u003C\u002Fdiv>",{"id":2724,"name":2725,"exportName":2726,"html":2727},"components-overflow-list--minimum-visible","Minimum Visible","MinimumVisible","\u003Cnord-overflow-list\n      style=\"inline-size: 9rem\"\n      gap=\"xs\"\n      min-visible-items=\"2\"\n    >\n      \u003Cnord-button>Appointments\u003C\u002Fnord-button>\n      \u003Cnord-button>Messages\u003C\u002Fnord-button>\n      \u003Cnord-button>Invoices\u003C\u002Fnord-button>\n      \u003Cnord-overflow-list-menu\n        slot=\"overflow\"\n        singular-label=\"action\"\n        plural-label=\"actions\"\n      >\u003C\u002Fnord-overflow-list-menu>\n    \u003C\u002Fnord-overflow-list>",{"id":2729,"name":2730,"exportName":2731,"html":2732,"js":2733},"components-overflow-list--dynamic-items","Dynamic Items","DynamicItems","\u003Cnord-stack gap=\"s\">\n      \u003Cnord-overflow-list id=\"dynamic-overflow-list\" style=\"inline-size: 18rem\">\n        \u003Cnord-button>Action 1\u003C\u002Fnord-button>\n        \u003Cnord-button>Action 2\u003C\u002Fnord-button>\n        \u003Cnord-button>Action 3\u003C\u002Fnord-button>\n        \u003Cnord-overflow-list-menu\n          slot=\"overflow\"\n          singular-label=\"action\"\n          plural-label=\"actions\"\n        >\u003C\u002Fnord-overflow-list-menu>\n      \u003C\u002Fnord-overflow-list>\n      \u003Cnord-stack direction=\"horizontal\" gap=\"s\">\n        \u003Cnord-button id=\"add-overflow-item\" size=\"s\">Add item\u003C\u002Fnord-button>\n        \u003Cnord-button id=\"remove-overflow-item\" size=\"s\">Remove item\u003C\u002Fnord-button>\n      \u003C\u002Fnord-stack>\n    \u003C\u002Fnord-stack>","const list = document.getElementById(\"dynamic-overflow-list\")\nconst affordance = list.querySelector('[slot=\"overflow\"]')\ndocument.getElementById(\"add-overflow-item\").addEventListener(\"click\", () => {\n  const button = document.createElement(\"nord-button\")\n  button.textContent = `Action ${list.visibleItems.length + list.overflowItems.length + 1}`\n  list.insertBefore(button, affordance)\n})\ndocument.getElementById(\"remove-overflow-item\").addEventListener(\"click\", () => {\n  const items = Array.from(list.children).filter(element => element.localName === \"nord-button\" && element.slot !== \"overflow\")\n  items.at(-1)?.remove()\n})",{"id":2735,"name":2736,"exportName":2737,"html":2738},"components-overflow-list--constrained-containers","Constrained Containers","ConstrainedContainers","\u003Cnord-stack gap=\"m\">\n      \u003Cdiv>\n        \u003Cstrong>Wide\u003C\u002Fstrong>\n        \u003Cnord-overflow-list style=\"inline-size: 30rem\" gap=\"xs\">\n          \u003Cnord-button>Appointments\u003C\u002Fnord-button>\n          \u003Cnord-button>Messages\u003C\u002Fnord-button>\n          \u003Cnord-button>Invoices\u003C\u002Fnord-button>\n          \u003Cnord-overflow-list-menu\n            slot=\"overflow\"\n            singular-label=\"action\"\n            plural-label=\"actions\"\n          >\u003C\u002Fnord-overflow-list-menu>\n        \u003C\u002Fnord-overflow-list>\n      \u003C\u002Fdiv>\n      \u003Cdiv>\n        \u003Cstrong>Narrow\u003C\u002Fstrong>\n        \u003Cnord-overflow-list style=\"inline-size: 12rem\" gap=\"xs\">\n          \u003Cnord-button>Appointments\u003C\u002Fnord-button>\n          \u003Cnord-button>Messages\u003C\u002Fnord-button>\n          \u003Cnord-button>Invoices\u003C\u002Fnord-button>\n          \u003Cnord-overflow-list-menu\n            slot=\"overflow\"\n            singular-label=\"action\"\n            plural-label=\"actions\"\n          >\u003C\u002Fnord-overflow-list-menu>\n        \u003C\u002Fnord-overflow-list>\n      \u003C\u002Fdiv>\n    \u003C\u002Fnord-stack>",{"hasPlayground":167,"playgroundId":2740,"stories":2741},"components-resizable--playground",[2742,2745,2749,2753,2756,2760,2764,2767,2772],{"id":2743,"name":50,"exportName":50,"html":2744},"components-resizable--overview","\u003Cnord-resizable\n      style=\"--n-resizable-block-size: 20rem; --n-resizable-inline-size: min(100%, 52rem)\"\n    >\n      \u003Cnord-resizable-panel panel-id=\"conversation\" min-size=\"15\" max-size=\"45\">\n        \n      \u003C\u002Fnord-resizable-panel>\n      \u003Cnord-resizable-handle>\u003C\u002Fnord-resizable-handle>\n      \u003Cnord-resizable-panel panel-id=\"messages\" min-size=\"30\">\n        \n      \u003C\u002Fnord-resizable-panel>\n      \u003Cnord-resizable-handle>\u003C\u002Fnord-resizable-handle>\n      \u003Cnord-resizable-panel panel-id=\"details\" min-size=\"15\" max-size=\"40\">\n        \n      \u003C\u002Fnord-resizable-panel>\n    \u003C\u002Fnord-resizable>",{"id":2746,"name":2747,"exportName":2747,"html":2748},"components-resizable--vertical","Vertical","\u003Cnord-resizable\n      orientation=\"vertical\"\n      style=\"--n-resizable-block-size: 28rem; --n-resizable-inline-size: min(100%, 40rem)\"\n    >\n      \u003Cnord-resizable-panel panel-id=\"preview\" min-size=\"30\">\n        \n      \u003C\u002Fnord-resizable-panel>\n      \u003Cnord-resizable-handle with-handle>\u003C\u002Fnord-resizable-handle>\n      \u003Cnord-resizable-panel panel-id=\"details\" min-size=\"20\">\n        \n      \u003C\u002Fnord-resizable-panel>\n    \u003C\u002Fnord-resizable>",{"id":2750,"name":2751,"exportName":2751,"html":2752},"components-resizable--handle","Handle","\u003Cnord-resizable\n      style=\"--n-resizable-block-size: 20rem; --n-resizable-inline-size: min(100%, 52rem)\"\n    >\n      \u003Cnord-resizable-panel panel-id=\"sidebar\" min-size=\"20\" max-size=\"50\">\n        \n      \u003C\u002Fnord-resizable-panel>\n      \u003Cnord-resizable-handle with-handle>\u003C\u002Fnord-resizable-handle>\n      \u003Cnord-resizable-panel panel-id=\"content\" min-size=\"30\">\n        \n      \u003C\u002Fnord-resizable-panel>\n    \u003C\u002Fnord-resizable>",{"id":2754,"name":2681,"exportName":2681,"html":2755},"components-resizable--rtl","\u003Cnord-resizable\n      lang=\"ar\"\n      style=\"--n-resizable-block-size: 20rem; --n-resizable-inline-size: min(100%, 52rem)\"\n    >\n      \u003Cnord-resizable-panel panel-id=\"one\" min-size=\"20\">\n        \n      \u003C\u002Fnord-resizable-panel>\n      \u003Cnord-resizable-handle label=\"تغيير حجم اللوحات\">\u003C\u002Fnord-resizable-handle>\n      \u003Cnord-resizable-panel panel-id=\"two\" min-size=\"20\">\n        \n      \u003C\u002Fnord-resizable-panel>\n      \u003Cnord-resizable-handle label=\"تغيير حجم اللوحات\">\u003C\u002Fnord-resizable-handle>\n      \u003Cnord-resizable-panel panel-id=\"three\" min-size=\"20\">\n        \n      \u003C\u002Fnord-resizable-panel>\n    \u003C\u002Fnord-resizable>",{"id":2757,"name":2758,"exportName":2758,"html":2759},"components-resizable--nested","Nested","\u003Cnord-resizable\n      style=\"--n-resizable-block-size: 24rem; --n-resizable-inline-size: min(100%, 56rem)\"\n    >\n      \u003Cnord-resizable-panel panel-id=\"folders\" min-size=\"20\">\n        \n      \u003C\u002Fnord-resizable-panel>\n      \u003Cnord-resizable-handle with-handle>\u003C\u002Fnord-resizable-handle>\n      \u003Cnord-resizable-panel panel-id=\"workspace\" min-size=\"40\">\n        \u003Cnord-resizable orientation=\"vertical\">\n          \u003Cnord-resizable-panel panel-id=\"thread\" min-size=\"30\">\n            \n          \u003C\u002Fnord-resizable-panel>\n          \u003Cnord-resizable-handle>\u003C\u002Fnord-resizable-handle>\n          \u003Cnord-resizable-panel panel-id=\"composer\" min-size=\"20\">\n            \n          \u003C\u002Fnord-resizable-panel>\n        \u003C\u002Fnord-resizable>\n      \u003C\u002Fnord-resizable-panel>\n    \u003C\u002Fnord-resizable>",{"id":2761,"name":2762,"exportName":2762,"html":2763},"components-resizable--constrained","Constrained","\u003Cnord-resizable\n      style=\"--n-resizable-block-size: 18rem; --n-resizable-inline-size: min(100%, 56rem)\"\n    >\n      \u003Cnord-resizable-panel panel-id=\"one\" min-size=\"15\" max-size=\"35\">\n        \n      \u003C\u002Fnord-resizable-panel>\n      \u003Cnord-resizable-handle with-handle>\u003C\u002Fnord-resizable-handle>\n      \u003Cnord-resizable-panel panel-id=\"two\" min-size=\"30\" max-size=\"60\">\n        \n      \u003C\u002Fnord-resizable-panel>\n      \u003Cnord-resizable-handle with-handle>\u003C\u002Fnord-resizable-handle>\n      \u003Cnord-resizable-panel panel-id=\"three\" min-size=\"20\" max-size=\"40\">\n        \n      \u003C\u002Fnord-resizable-panel>\n    \u003C\u002Fnord-resizable>",{"id":2765,"name":855,"exportName":855,"html":2766},"components-resizable--collapsible","\u003Cnord-resizable\n      style=\"--n-resizable-block-size: 18rem; --n-resizable-inline-size: min(100%, 48rem)\"\n    >\n      \u003Cnord-resizable-panel\n        panel-id=\"sidebar\"\n        min-size=\"20\"\n        max-size=\"60\"\n        collapsed-size=\"0\"\n        collapsible\n      >\n        \n      \u003C\u002Fnord-resizable-panel>\n      \u003Cnord-resizable-handle with-handle>\u003C\u002Fnord-resizable-handle>\n      \u003Cnord-resizable-panel panel-id=\"content\" min-size=\"30\">\n        \n      \u003C\u002Fnord-resizable-panel>\n    \u003C\u002Fnord-resizable>",{"id":2768,"name":2769,"exportName":2770,"html":2771},"components-resizable--keyboard-only","Keyboard Only","KeyboardOnly","\u003Cdiv style=\"inline-size: min(100%, 48rem)\">\n      \u003Cp>\n        Focus the separator, then use Arrow keys, Shift + Arrow, Home, End, or\n        Enter.\n      \u003C\u002Fp>\n      \u003Cnord-resizable\n        style=\"--n-resizable-block-size: 16rem\"\n      >\n        \u003Cnord-resizable-panel panel-id=\"primary\" min-size=\"20\" collapsible>\n          \n        \u003C\u002Fnord-resizable-panel>\n        \u003Cnord-resizable-handle\n          label=\"Resize primary panel\"\n          with-handle\n        >\u003C\u002Fnord-resizable-handle>\n        \u003Cnord-resizable-panel panel-id=\"secondary\" min-size=\"20\">\n          \n        \u003C\u002Fnord-resizable-panel>\n      \u003C\u002Fnord-resizable>\n    \u003C\u002Fdiv>",{"id":2773,"name":2479,"exportName":2479,"html":2774,"js":2775},"components-resizable--controlled","\u003Cdiv style=\"inline-size: min(100%, 48rem)\">\n      \u003Coutput id=\"controlled-resizable-output\"\n        >navigation: 40.0% · content: 60.0%\u003C\u002Foutput\n      >\n      \u003Cnord-resizable\n        id=\"controlled-resizable\"\n        style=\"--n-resizable-block-size: 18rem; margin-block-start: var(--n-space-s)\"\n      >\n        \u003Cnord-resizable-panel panel-id=\"navigation\" min-size=\"20\" max-size=\"70\">\n          \n        \u003C\u002Fnord-resizable-panel>\n        \u003Cnord-resizable-handle with-handle>\u003C\u002Fnord-resizable-handle>\n        \u003Cnord-resizable-panel panel-id=\"content\" min-size=\"20\">\n          \n        \u003C\u002Fnord-resizable-panel>\n      \u003C\u002Fnord-resizable>\n    \u003C\u002Fdiv>","const group = document.getElementById(\"controlled-resizable\")\nconst output = document.getElementById(\"controlled-resizable-output\")\n\ngroup.addEventListener(\"nord-resize\", (event) => {\n  group.layout = event.layout.map(({ size }) => size)\n  output.textContent = event.layout.map(({ id, size }) => id + \": \" + size.toFixed(1) + \"%\").join(\" · \")\n})",1785346898503]