PageSourceSearch

https://fluent-svelte.vercel.app/docs

html fluent-svelte.vercel.app collected 2026-10-03 06:57:15 UTC 32,628 bytes, 249 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3	<head>
4		<meta charset="utf-8" />
5		<link rel="icon" href="/logo.svg" />
6		<meta name="viewport" content="width=device-width, initial-scale=1" />
7		<title>Fluent Svelte - Docs - Overview</title><meta content="Fluent Svelte - Docs - Overview" name="og:title" data-svelte="svelte-sg3mhn"><meta content="Fluent Svelte - Docs - Overview" name="twitter:title" data-svelte="svelte-sg3mhn"><meta content="" name="description" data-svelte="svelte-sg3mhn"><meta content="" name="og:description" data-svelte="svelte-sg3mhn"><meta content="" name="twitter:description" data-svelte="svelte-sg3mhn">
8	<link rel="stylesheet" href="/_app/assets/pages/__layout.svelte-a4958d57.css">
9	<link rel="stylesheet" href="/_app/assets/NavigationView.svelte_svelte_type_style_lang-92b0c07c.css">
10	<link rel="stylesheet" href="/_app/assets/theme-ef26cd76.css">
11	<link rel="stylesheet" href="/_app/assets/APIDocs.svelte_svelte_type_style_lang-fd41e23a.css">
12	<link rel="stylesheet" href="/_app/assets/pages/docs/__layout.svelte-af930e40.css">
13	<link rel="stylesheet" href="/_app/assets/Example.svelte_svelte_type_style_lang-f1602637.css">
14	<link rel="modulepreload" href="/_app/start-15c4ed2c.js">
15	<link rel="modulepreload" href="/_app/chunks/index-be74888c.js">
16	<link rel="modulepreload" href="/_app/chunks/index-6f9a83d4.js">
17	<link rel="modulepreload" href="/_app/chunks/singletons-d1fb5791.js">
18	<link rel="modulepreload" href="/_app/pages/__layout.svelte-86abb752.js">
19	<link rel="modulepreload" href="/_app/chunks/TooltipWrapper-6757f5b6.js">
20	<link rel="modulepreload" href="/_app/chunks/internal-eefa9bb7.js">
21	<link rel="modulepreload" href="/_app/chunks/IconButton-81b43600.js">
22	<link rel="modulepreload" href="/_app/chunks/APIDocs.svelte_svelte_type_style_lang-436c1749.js">
23	<link rel="modulepreload" href="/_app/chunks/stores-fc8ec4f7.js">
24	<link rel="modulepreload" href="/_app/chunks/TextBlock-b03ee26d.js">
25	<link rel="modulepreload" href="/_app/pages/docs/__layout.svelte-8d9274b4.js">
26	<link rel="modulepreload" href="/_app/chunks/Button-9085ce3f.js">
27	<link rel="modulepreload" href="/_app/chunks/AutoSuggestBox-df7422e9.js">
28	<link rel="modulepreload" href="/_app/chunks/TextBox-90b1fc86.js">
29	<link rel="modulepreload" href="/_app/chunks/ListItem-e68a7411.js">
30	<link rel="modulepreload" href="/_app/chunks/Metadata-72ee8d4b.js">
31	<link rel="modulepreload" href="/_app/pages/docs/index.md-694d8a6b.js">
32	<link rel="modulepreload" href="/_app/chunks/InfoBar-7bb63443.js">
33	</head>
34	<body>
35		<div id="svelte">
36
37
38<header class="navbar svelte-t9an4g"><div class="navbar-inner svelte-t9an4g"><a class="logo svelte-t9an4g" href="/"><img src="/logo.svg" width="32" height="32" alt="Fluent Svelte logo" class="svelte-t9an4g">
39			Fluent Svelte <span class="text-block type-caption  svelte-zxj483">ALPHA
40</span></a>
41		<nav class="svelte-t9an4g"><a href="/docs" sveltekit:prefetch class="svelte-t9an4g selected"><!-- HTML_TAG_START --><svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.75 20H5.25a3.25 3.25 0 01-3.24-3.07L2 16.75V6.25c0-1.2.93-2.17 2.1-2.24L4.25 4h12.5c1.2 0 2.17.93 2.24 2.1l.01.15V7h.75c1.2 0 2.17.93 2.24 2.1l.01.15v7.5a3.25 3.25 0 01-3.07 3.24l-.18.01H5.25h13.5zm-13.5-1.5h13.5c.92 0 1.67-.7 1.74-1.6l.01-.15v-7.5c0-.38-.28-.7-.65-.74l-.1-.01H19v7.75c0 .38-.28.7-.65.74l-.1.01a.75.75 0 01-.74-.65l-.01-.1v-10c0-.38-.28-.7-.65-.74l-.1-.01H4.25c-.38 0-.7.28-.74.65l-.01.1v10.5c0 .92.7 1.67 1.6 1.74l.15.01h13.5-13.5zm7-4h3a.75.75 0 01.1 1.5h-3.1a.75.75 0 01-.1-1.5h3.1-3zm-3-3.5c.4 0 .74.34.74.75v3.5c0 .41-.33.75-.75.75h-3.5a.75.75 0 01-.74-.75v-3.5c0-.41.33-.75.75-.75h3.5zm-.76 1.5h-2v2h2v-2zm3.76-1.5h3a.75.75 0 01.1 1.5h-3.1a.75.75 0 01-.1-1.49h3.1-3zm-6.5-3.5h9.5a.75.75 0 01.1 1.5h-9.6a.75.75 0 01-.1-1.5h9.6-9.5z"/></svg><!-- HTML_TAG_END -->
42					<span class="text-block type-body  svelte-zxj483">Docs
43</span>
44				</a></nav>
45		<div class="buttons svelte-t9an4g">
46
47<div class="tooltip-wrapper svelte-e2a5n0" title="View GitHub">
48<a role="button" href="https://github.com/tropix126/fluent-svelte/" class="icon-button   svelte-1iys5lx" rel="noreferrer noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
49</a>
50
51	
52</div></div></div>
53</header>
54<main>
55
56<main class="docs-container"><div class="docs-container-inner"><aside><div class="docs-search">
57<div class="text-box-container auto-suggest-box   svelte-8l6kgi">
58	
59	<input type="search" class="text-box svelte-8l6kgi" placeholder="Search Docs" aria-autocomplete="list" aria-activedescendant="" aria-expanded="false" aria-controls="fds-auto-suggest-flyout-a7c2d50c5610f11a1008d7a7a" value="">
60	<div class="text-box-underline svelte-8l6kgi"></div>
61	<div class="text-box-buttons svelte-8l6kgi">
62			<button class="text-box-button  svelte-159a5xt" type="button" aria-label="Search"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M5.00038 1C2.79103 1 1 2.7909 1 5.00008C1 7.20927 2.79103 9.00017 5.00038 9.00017C5.92463 9.00017 6.77568 8.68675 7.45302 8.1604L10.1464 10.8536C10.3416 11.0488 10.6583 11.0488 10.8535 10.8536C11.0488 10.6583 11.0488 10.3417 10.8535 10.1464L8.16028 7.45337C8.68705 6.77595 9.00075 5.92465 9.00075 5.00008C9.00075 2.7909 7.20972 1 5.00038 1ZM2.00009 5.00008C2.00009 3.34319 3.34337 2.00002 5.00038 2.00002C6.65739 2.00002 8.00066 3.34319 8.00066 5.00008C8.00066 6.65697 6.65739 8.00015 5.00038 8.00015C3.34337 8.00015 2.00009 6.65697 2.00009 5.00008Z" fill="currentColor"></path></svg>
63</button>
64			
65		</div>
66	
67
68	
69</div></div>
70			<div class="tree-view svelte-xybd65">
71<a tabindex="0" aria-selected class="list-item  selected  svelte-1ye4o7x" href="/docs" role="listitem" type="navigation"><!-- HTML_TAG_START -->
71<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 7c.28 0 .5.22.5.5v3a.5.5 0 01-1 0v-3c0-.28.22-.5.5-.5z"/><path d="M8 6.25a.75.75 0 100-1.5.75.75 0 000 1.5z"/><path d="M2 8a6 6 0 1112 0A6 6 0 012 8zm6-5a5 5 0 100 10A5 5 0 008 3z"/></svg><!-- HTML_TAG_END -->
72				
73		<span class="text-block type-body  svelte-zxj483">Overview
74			
75</span></a>
76<a tabindex="0" aria-selected="false" class="list-item    svelte-1ye4o7x" href="/docs/getting-started" role="listitem" type="navigation"><!-- HTML_TAG_START --><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M13 1.5C13 1.22386 12.7761 1 12.5 1C12.2239 1 12 1.22386 12 1.5V3H10.5C10.2239 3 10 3.22386 10 3.5C10 3.77614 10.2239 4 10.5 4H12V5.5C12 5.77614 12.2239 6 12.5 6C12.7761 6 13 5.77614 13 5.5V4H14.5C14.7761 4 15 3.77614 15 3.5C15 3.22386 14.7761 3 14.5 3H13V1.5ZM3.75 2C2.7835 2 2 2.7835 2 3.75V12.25C2 13.2165 2.7835 14 3.75 14H12.25C13.2165 14 14 13.2165 14 12.25V9.25C14 8.2835 13.2165 7.5 12.25 7.5H8.5V3.75C8.5 2.7835 7.7165 2 6.75 2H3.75ZM7.5 8.5V13H3.75C3.33579 13 3 12.6642 3 12.25V8.5H7.5ZM7.5 3.75V7.5H3V3.75C3 3.33579 3.33579 3 3.75 3H6.75C7.16421 3 7.5 3.33579 7.5 3.75ZM12.25 13H8.5V8.5H12.25C12.6642 8.5 13 8.83579 13 9.25V12.25C13 12.6642 12.6642 13 12.25 13Z"/></svg><!-- HTML_TAG_END -->
77				
78		<span class="text-block type-body  svelte-zxj483">Getting Started
79			
80</span></a><h5 class="text-block type-body-strong category-header svelte-zxj483">Components
81</h5>
82				<div class="tree-view svelte-xybd65">
83<a tabindex="0" aria-selected="false" class="list-item    svelte-1ye4o7x" href="/docs/components/button" role="listitem" type="navigation"><!-- HTML_TAG_START --><svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M1 5c0-1.1.9-2 2-2h10a2 2 0 012 2v5a2 2 0 01-1.16 1.82 1.5 1.5 0 00-.28-.38l-.45-.45A1 1 0 0014 10V5a1 1 0 00-1-1H3a1 1 0 00-1 1v5a1 1 0 001 1h4v1H3a2 2 0 01-2-2V5z"/><path d="M8.85 8.15A.5.5 0 008 8.5v6a.5.5 0 00.9.3l1.35-1.8h2.25a.5.5 0 00.35-.85l-4-4zM9 13V9.7l2.3 2.3H10a.5.5 0 00-.4.2L9 13z"/></svg><!-- HTML_TAG_END -->
84				
85		<span class="text-block type-body  svelte-zxj483">Button
86			
87</span></a>
88<a tabindex="0" aria-selected="false" class="list-item    svelte-1ye4o7x" href="/docs/components/checkbox" role="listitem" type="navigation"><!-- HTML_TAG_START --><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.8536 6.85355C11.0488 6.65829 11.0488 6.34171 10.8536 6.14645C10.6583 5.95118 10.3417 5.95118 10.1464 6.14645L7 9.29289L5.85355 8.14645C5.65829 7.95118 5.34171 7.95118 5.14645 8.14645C4.95118 8.34171 4.95118 8.65829 5.14645 8.85355L6.64645 10.3536C6.84171 10.5488 7.15829 10.5488 7.35355 10.3536L10.8536 6.85355ZM3 4.5C3 3.67157 3.67157 3 4.5 3H11.5C12.3284 3 13 3.67157 13 4.5V11.5C13 12.3284 12.3284 13 11.5 13H4.5C3.67157 13 3 12.3284 3 11.5V4.5ZM11.5 4H4.5C4.22386 4 4 4.22386 4 4.5V11.5C4 11.7761 4.22386 12 4.5 12H11.5C11.7761 12 12 11.7761 12 11.5V4.5C12 4.22386 11.7761 4 11.5 4Z" /></svg><!-- HTML_TAG_END -->
89				
90		<span class="text-block type-body  svelte-zxj483">Checkbox
91			
92</span></a>
93<a tabindex="0" aria-selected="false" class="list-item    svelte-1ye4o7x" href="/docs/components/toggleswitch" role="listitem" type="navigation"><!-- HTML_TAG_START --><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 10C3.89543 10 3 9.10457 3 8C3 6.89543 3.89543 6 5 6C6.10457 6 7 6.89543 7 8C7 9.10457 6.10457 10 5 10Z"/><path d="M15 8C15 5.79086 13.2091 4 11 4H5C2.79086 4 1 5.79086 1 8C1 10.2091 2.79086 12 5 12H11C13.2091 12 15 10.2091 15 8ZM11 5C12.6569 5 14 6.34315 14 8C14 9.65685 12.6569 11 11 11H5C3.34315 11 2 9.65685 2 8C2 6.34315 3.34315 5 5 5H11Z"/></svg><!-- HTML_TAG_END -->
94				
95		<span class="text-block type-body  svelte-zxj483">ToggleSwitch
96			
97</span></a>
98<a tabindex="0" aria-selected="false" class="list-item    svelte-1ye4o7x" href="/docs/components/radiobutton" role="listitem" type="navigation"><!-- HTML_TAG_START --><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 15C12.7614 15 15 12.7614 15 10C15 7.23858 12.7614 5 10 5C7.23858 5 5 7.23858 5 10C5 12.7614 7.23858 15 10 15Z"/><path d="M10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2ZM3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10Z"/></svg><!-- HTML_TAG_END -->
99				
100		<span class="text-block type-body  svelte-zxj483">RadioButton
101			
102</span></a>
103<a tabindex="0" aria-selected="false" class="list-item    svelte-1ye4o7x" href="/docs/components/textbox" role="listitem" type="navigation"><!-- HTML_TAG_START -->
103<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 2C6.22386 2 6 2.22386 6 2.5C6 2.77614 6.22386 3 6.5 3H7.5V13H6.5C6.22386 13 6 13.2239 6 13.5C6 13.7761 6.22386 14 6.5 14H9.5C9.77614 14 10 13.7761 10 13.5C10 13.2239 9.77614 13 9.5 13H8.5V3H9.5C9.77614 3 10 2.77614 10 2.5C10 2.22386 9.77614 2 9.5 2H6.5ZM4 4H6.5V5H4C3.44771 5 3 5.44771 3 6V9.99726C3 10.5495 3.44772 10.9973 4 10.9973H6.5V11.9973H4C2.89543 11.9973 2 11.1018 2 9.99726V6C2 4.89543 2.89543 4 4 4ZM12 10.9973H9.5V11.9973H12C13.1046 11.9973 14 11.1018 14 9.99727V6C14 4.89543 13.1046 4 12 4H9.5V5H12C12.5523 5 13 5.44772 13 6V9.99727C13 10.5496 12.5523 10.9973 12 10.9973Z"/></svg><!-- HTML_TAG_END -->
104				
105		<span class="text-block type-body  svelte-zxj483">TextBox
106			
107</span></a>
108<a tabindex="0" aria-selected="false" class="list-item    svelte-1ye4o7x" href="/docs/components/slider" role="listitem" type="navigation"><!-- HTML_TAG_START --><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9C6.93191 9 7.71496 9.63738 7.93699 10.5L13.5 10.5C13.7761 10.5 14 10.7239 14 11C14 11.2455 13.8231 11.4496 13.5899 11.4919L13.5 11.5L7.93673 11.501C7.71435 12.3631 6.93155 13 6 13C5.06845 13 4.28565 12.3631 4.06327 11.501L2.5 11.5C2.22386 11.5 2 11.2761 2 11C2 10.7545 2.17688 10.5504 2.41012 10.5081L2.5 10.5L4.06301 10.5C4.28504 9.63738 5.06809 9 6 9ZM6 10C5.44772 10 5 10.4477 5 11C5 11.5523 5.44772 12 6 12C6.55228 12 7 11.5523 7 11C7 10.4477 6.55228 10 6 10ZM10 3C10.9319 3 11.715 3.63738 11.937 4.49998L13.5 4.5C13.7761 4.5 14 4.72386 14 5C14 5.24546 13.8231 5.44961 13.5899 5.49194L13.5 5.5L11.9367 5.50102C11.7144 6.36312 10.9316 7 10 7C9.06845 7 8.28565 6.36312 8.06327 5.50102L2.5 5.5C2.22386 5.5 2 5.27614 2 5C2 4.75454 2.17688 4.55039 2.41012 4.50806L2.5 4.5L8.06301 4.49998C8.28504 3.63738 9.06809 3 10 3ZM10 4C9.44772 4 9 4.44772 9 5C9 5.55228 9.44772 6 10 6C10.5523 6 11 5.55228 11 5C11 4.44772 10.5523 4 10 4Z"/></svg><!-- HTML_TAG_END -->
109				
110		<span class="text-block type-body  svelte-zxj483">Slider
111			
112</span></a>
113<a tabindex="0" aria-selected="false" class="list-item    svelte-1ye4o7x" href="/docs/components/expander" role="listitem" type="navigation"><!-- HTML_TAG_START --><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.5 11.1741L11.3737 10.1756C11.5556 9.96781 11.8714 9.94675 12.0793 10.1286C12.2871 10.3104 12.3081 10.6263 12.1263 10.8341L10.3763 12.8341C10.2814 12.9426 10.1442 13.0049 10 13.0049C9.85583 13.0049 9.71866 12.9426 9.62372 12.8341L7.87372 10.8341C7.69188 10.6263 7.71294 10.3104 7.92075 10.1286C8.12857 9.94675 8.44445 9.96781 8.6263 10.1756L9.50001 11.1742L9.50001 7.49512C9.50001 7.21898 9.72387 6.99512 10 6.99512C10.2762 6.99512 10.5 7.21898 10.5 7.49512L10.5 11.1741ZM4 16C2.89543 16 2 15.1046 2 14V6C2 4.89543 2.89543 4 4 4H16C17.1046 4 18 4.89543 18 6V14C18 15.1046 17.1046 16 16 16H4ZM3 14C3 14.5523 3.44772 15 4 15H16C16.5523 15 17 14.5523 17 14V9H11.5V8H17V6C17 5.44771 16.5523 5 16 5H4C3.44772 5 3 5.44772 3 6V8H8.50003V9H3V14Z"/></svg><!-- HTML_TAG_END -->
114				
115		<span class="text-block type-body  svelte-zxj483">Expander
116			
117</span></a>
118<a tabindex="0" aria-selected="false" class="list-item    svelte-1ye4o7x" href="/docs/components/contentdialog" role="listitem" type="navigation"><!-- HTML_TAG_START --><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4.5 2C3.11929 2 2 3.11929 2 4.5V9.5C2 10.8807 3.11929 12 4.5 12H9.5C10.8807 12 12 10.8807 12 9.5V4.5C12 3.11929 10.8807 2 9.5 2H4.5ZM10.9146 4H3.08535C3.29127 3.4174 3.84689 3 4.5 3H9.5C10.1531 3 10.7087 3.4174 10.9146 4ZM3 5H11V9.5C11 10.3284 10.3284 11 9.5 11H4.5C3.67157 11 3 10.3284 3 9.5V5ZM6.50018 13.9999C5.68227 13.9999 4.9561 13.6072 4.5 12.9999H10.0002C11.657 12.9999 13.0002 11.6568 13.0002 9.99994V4.49976C13.6074 4.95586 14.0002 5.68203 14.0002 6.49994V9.99994C14.0002 12.2091 12.2093 13.9999 10.0002 13.9999H6.50018Z" fill="currentColor"/></svg><!-- HTML_TAG_END -->
119				
120		<span class="text-block type-body  svelte-zxj483">ContentDialog
121			
122</span></a>
123<a tabindex="0" aria-selected="false" class="list-item    svelte-1ye4o7x" href="/docs/components/flyout" role="listitem" type="navigation"><!-- HTML_TAG_START -->
123<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 2C2.89543 2 2 2.89543 2 4V9C2 9.04652 2.00159 9.09268 2.00471 9.13841C2.00623 9.16053 2.0081 9.18256 2.01033 9.20449C2.04695 9.56512 2.17939 9.89743 2.38178 10.1756C2.62877 10.515 2.97994 10.7737 3.38831 10.9047C3.39395 10.9065 3.3996 10.9083 3.40526 10.9101C3.59314 10.9685 3.79289 11 4 11H5V12C5 13.1046 5.89543 14 7 14H12C13.1046 14 14 13.1046 14 12V7C14 5.89543 13.1046 5 12 5H11V4C11 3.78664 10.9666 3.58108 10.9047 3.38828C10.7737 2.97992 10.5149 2.62875 10.1755 2.38176C10.1567 2.36804 10.1376 2.35464 10.1182 2.34157C9.83486 2.15014 9.4998 2.02941 9.13837 2.00471C9.09265 2.00159 9.04651 2 9 2H4ZM5.14309 3L3 5.1431V4C3 3.44772 3.44772 3 4 3H5.14309ZM3 6.55732L6.5573 3H8.14309L3 8.14312V6.55732ZM9.45038 3.10692C9.77643 3.27167 10 3.60973 10 4V4.293L9.293 5H7.55731L9.45038 3.10692ZM5 7.55732V9.29302L4.29303 10H4C3.60974 10 3.27169 9.77644 3.10693 9.4504L5 7.55732ZM6 7C6 6.44772 6.44772 6 7 6H12C12.5523 6 13 6.44772 13 7V12C13 12.5523 12.5523 13 12 13H7C6.44772 13 6 12.5523 6 12V7Z" fill="currentColor" /></svg><!-- HTML_TAG_END -->
124				
125		<span class="text-block type-body  svelte-zxj483">Flyout
126			
127</span></a>
128<a tabindex="0" aria-selected="false" class="list-item    svelte-1ye4o7x" href="/docs/components/infobar" role="listitem" type="navigation"><!-- HTML_TAG_START --><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.59971 3H3.5C2.67157 3 2 3.67157 2 4.5V9.5C2 10.3284 2.67157 11 3.5 11H5V13.8981L8.31213 11H12.5C13.2392 11 13.8536 10.4653 13.9773 9.7615C14.366 9.44393 14.7105 9.07424 15 8.66308V9.5C15 10.8807 13.8807 12 12.5 12H8.68787L5.62533 14.6797C4.99168 15.2342 4 14.7842 4 13.9422V12H3.5C2.11929 12 1 10.8807 1 9.5V4.5C1 3.11929 2.11929 2 3.5 2H6.25716C6.00353 2.30711 5.78261 2.64222 5.59971 3ZM10.5 10C12.9853 10 15 7.98528 15 5.5C15 3.01472 12.9853 1 10.5 1C8.01472 1 6 3.01472 6 5.5C6 7.98528 8.01472 10 10.5 10ZM10 3.5C10 3.22386 10.2239 3 10.5 3C10.7761 3 11 3.22386 11 3.5V5.5C11 5.77614 10.7761 6 10.5 6C10.2239 6 10 5.77614 10 5.5V3.5ZM11.125 7.5C11.125 7.84518 10.8452 8.125 10.5 8.125C10.1548 8.125 9.875 7.84518 9.875 7.5C9.875 7.15482 10.1548 6.875 10.5 6.875C10.8452 6.875 11.125 7.15482 11.125 7.5Z"/></svg><!-- HTML_TAG_END -->
129				
130		<span class="text-block type-body  svelte-zxj483">InfoBar
131			
132</span></a>
133<a tabindex="0" aria-selected="false" class="list-item    svelte-1ye4o7x" href="/docs/components/infobadge" role="listitem" type="navigation"><!-- HTML_TAG_START --><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 2C11.3137 2 14 4.68629 14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2ZM8 3C5.23858 3 3 5.23858 3 8C3 10.7614 5.23858 13 8 13C10.7614 13 13 10.7614 13 8C13 5.23858 10.7614 3 8 3ZM8 10C8.41421 10 8.75 10.3358 8.75 10.75C8.75 11.1642 8.41421 11.5 8 11.5C7.58579 11.5 7.25 11.1642 7.25 10.75C7.25 10.3358 7.58579 10 8 10ZM8 4.5C8.24546 4.5 8.44961 4.67688 8.49194 4.91012L8.5 5V8.5C8.5 8.77614 8.27614 9 8 9C7.75454 9 7.55039 8.82312 7.50806 8.58988L7.5 8.5V5C7.5 4.72386 7.72386 4.5 8 4.5Z"/></svg><!-- HTML_TAG_END -->
134				
135		<span class="text-block type-body  svelte-zxj483">InfoBadge
136			
137</span></a>
138<a tabindex="0" aria-selected="false" class="list-item    svelte-1ye4o7x" href="/docs/components/progressring" role="listitem" type="navigation"><!-- HTML_TAG_START --><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 8C3 5.23858 5.23858 3 8 3C9.63582 3 11.0882 3.78555 12.0004 5H10C9.72386 5 9.5 5.22386 9.5 5.5C9.5 5.77614 9.72386 6 10 6H13C13.2761 6 13.5 5.77614 13.5 5.5V2.5C13.5 2.22386 13.2761 2 13 2C12.7239 2 12.5 2.22386 12.5 2.5V4.03126C11.4006 2.78563 9.79204 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14C11.3137 14 14 11.3137 14 8C14 7.72386 13.7761 7.5 13.5 7.5C13.2239 7.5 13 7.72386 13 8C13 10.7614 10.7614 13 8 13C5.23858 13 3 10.7614 3 8Z"/></svg><!-- HTML_TAG_END -->
139				
140		<span class="text-block type-body  svelte-zxj483">ProgressRing
141			
142</span></a>
143<a tabindex="0" aria-selected="false" class="list-item    svelte-1ye4o7x" href="/docs/components/personpicture" role="listitem" type="navigation"><!-- HTML_TAG_START --><svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.21693 6.26447C4.34752 6.1176 4.54252 6 4.775 6H7.225C7.45748 6 7.65248 6.1176 7.78307 6.26447C7.91264 6.41021 8 6.60757 8 6.80999V6.96999C8 7.7872 7.18342 8.5 6 8.5C4.81658 8.5 4 7.7872 4 6.96999V6.80999C4 6.60757 4.08736 6.41021 4.21693 6.26447ZM6 5C6.55228 5 7 4.55228 7 4C7 3.44772 6.55228 3 6 3C5.44772 3 5 3.44772 5 4C5 4.55228 5.44772 5 6 5ZM6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11ZM6 10C3.79086 10 2 8.20914 2 6C2 3.79086 3.79086 2 6 2C8.20914 2 10 3.79086 10 6C10 8.20914 8.20914 10 6 10Z" /></svg><!-- HTML_TAG_END -->
144				
145		<span class="text-block type-body  svelte-zxj483">PersonPicture
146			
147</span></a>
148<a tabindex="0" aria-selected="false" class="list-item    svelte-1ye4o7x" href="/docs/components/iconbutton" role="listitem" type="navigation"><!-- HTML_TAG_START -->
148<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
149					<path d="M5.08496 4C5.29088 3.4174 5.8465 3 6.49961 3H9.99961C11.6565 3 12.9996 4.34315 12.9996 6V9.5C12.9996 10.1531 12.5822 10.7087 11.9996 10.9146V6C11.9996 4.89543 11.1042 4 9.99961 4H5.08496ZM4.5 5H9.5C10.3284 5 11 5.67157 11 6.5V11.5C11 12.3284 10.3284 13 9.5 13H4.5C3.67157 13 3 12.3284 3 11.5V6.5C3 5.67157 3.67157 5 4.5 5ZM4.5 6C4.22386 6 4 6.22386 4 6.5V11.5C4 11.7761 4.22386 12 4.5 12H9.5C9.77614 12 10 11.7761 10 11.5V6.5C10 6.22386 9.77614 6 9.5 6H4.5Z" />
150				</svg><!-- HTML_TAG_END -->
151				
152		<span class="text-block type-body  svelte-zxj483">IconButton
153			
154</span></a>
155<a tabindex="0" aria-selected="false" class="list-item    svelte-1ye4o7x" href="/docs/components/textblock" role="listitem" type="navigation"><!-- HTML_TAG_START --><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.75044 2C4.95886 2.00001 5.14541 2.1293 5.21859 2.32446L6.94545 6.92998L6.40195 8.32877L6.09079 7.4989H3.40959L2.96829 8.67555C2.87132 8.9341 2.58311 9.06509 2.32455 8.96812C2.066 8.87115 1.93501 8.58294 2.03198 8.32438L4.28226 2.32442C4.35545 2.12927 4.54201 1.99999 4.75044 2ZM3.78464 6.4989H5.71583L4.75036 3.92399L3.78464 6.4989Z" /><path d="M6.70303 10.315C6.70008 10.3221 6.69729 10.3293 6.69466 10.3366L5.65979 13H5.50012C5.22398 13 5.00012 13.2239 5.00012 13.5C5.00012 13.7761 5.22398 14 5.50012 14H5.93136C5.97755 14.0065 6.02375 14.0063 6.06875 14H7.50012C7.77626 14 8.00012 13.7761 8.00012 13.5C8.00012 13.2239 7.77626 13 7.50012 13H6.73263L7.50709 11.0068H11.4909L12.2672 13.0047H11.5028C11.2267 13.0047 11.0028 13.2285 11.0028 13.5047C11.0028 13.7808 11.2267 14.0047 11.5028 14.0047H12.9878C12.9946 14.0048 13.0013 14.0048 13.0081 14.0047H13.5058C13.7819 14.0047 14.0058 13.7808 14.0058 13.5047C14.0058 13.2285 13.7819 13.0047 13.5058 13.0047H13.34L9.96503 4.31861C9.89033 4.12635 9.70524 3.99969 9.49898 3.99969C9.29272 3.99969 9.10762 4.12635 9.03292 4.31861L6.70303 10.315ZM11.1023 10.0068H7.89563L9.49898 5.88026L11.1023 10.0068Z" /></svg><!-- HTML_TAG_END -->
156				
157		<span class="text-block type-body  svelte-zxj483">TextBlock
158			
159</span></a>
160<a tabindex="0" aria-selected="false" class="list-item    svelte-1ye4o7x" href="/docs/components/listitem" role="listitem" type="navigation"><!-- HTML_TAG_START --><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
161					<path d="M2 3.5C2 2.67157 2.67157 2 3.5 2H4.5C5.32843 2 6 2.67157 6 3.5V4.5C6 5.32843 5.32843 6 4.5 6H3.5C2.67157 6 2 5.32843 2 4.5V3.5ZM3.5 3C3.22386 3 3 3.22386 3 3.5V4.5C3 4.77614 3.22386 5 3.5 5H4.5C4.77614 5 5 4.77614 5 4.5V3.5C5 3.22386 4.77614 3 4.5 3H3.5Z"/>
162					<path d="M2 9.5C2 8.67157 2.67157 8 3.5 8H4.5C5.32843 8 6 8.67157 6 9.5V10.5C6 11.3284 5.32843 12 4.5 12H3.5C2.67157 12 2 11.3284 2 10.5V9.5ZM3.5 9C3.22386 9 3 9.22386 3 9.5V10.5C3 10.7761 3.22386 11 3.5 11H4.5C4.77614 11 5 10.7761 5 10.5V9.5C5 9.22386 4.77614 9 4.5 9H3.5Z"/>
163					<path d="M2 15.5C2 14.6716 2.67157 14 3.5 14H4.5C5.32843 14 6 14.6716 6 15.5V16.5C6 17.3284 5.32843 18 4.5 18H3.5C2.67157 18 2 17.3284 2 16.5V15.5ZM3.5 15C3.22386 15 3 15.2239 3 15.5V16.5C3 16.7761 3.22386 17 3.5 17H4.5C4.77614 17 5 16.7761 5 16.5V15.5C5 15.2239 4.77614 15 4.5 15H3.5Z"/>
164					<path d="M8 4.5C8 4.22386 8.22386 4 8.5 4H17.5C17.7761 4 18 4.22386 18 4.5C18 4.77614 17.7761 5 17.5 5H8.5C8.22386 5 8 4.77614 8 4.5Z"/>
165					<path d="M8 10.5C8 10.2239 8.22386 10 8.5 10H17.5C17.7761 10 18 10.2239 18 10.5C18 10.7761 17.7761 11 17.5 11H8.5C8.22386 11 8 10.7761 8 10.5Z"/>
166					<path d="M8 16.5C8 16.2239 8.22386 16 8.5 16H17.5C17.7761 16 18 16.2239 18 16.5C18 16.7761 17.7761 17 17.5 17H8.5C8.22386 17 8 16.7761 8 16.5Z"/>
167				</svg><!-- HTML_TAG_END -->
168				
169		<span class="text-block type-body  svelte-zxj483">ListItem
170			
171</span></a>
172<a tabindex="0" aria-selected="false" class="list-item    svelte-1ye4o7x" href="/docs/components/calendarview" role="listitem" type="navigation"><!-- HTML_TAG_START --><svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 5.5C3 5.22386 3.22386 5 3.5 5C3.77614 5 4 5.22386 4 5.5C4 5.77614 3.77614 6 3.5 6C3.22386 6 3 5.77614 3 5.5ZM3.5 7C3.22386 7 3 7.22386 3 7.5C3 7.77614 3.22386 8 3.5 8C3.77614 8 4 7.77614 4 7.5C4 7.22386 3.77614 7 3.5 7ZM5 5.5C5 5.22386 5.22386 5 5.5 5C5.77614 5 6 5.22386 6 5.5C6 5.77614 5.77614 6 5.5 6C5.22386 6 5 5.77614 5 5.5ZM5.5 7C5.22386 7 5 7.22386 5 7.5C5 7.77614 5.22386 8 5.5 8C5.77614 8 6 7.77614 6 7.5C6 7.22386 5.77614 7 5.5 7ZM7 5.5C7 5.22386 7.22386 5 7.5 5C7.77614 5 8 5.22386 8 5.5C8 5.77614 7.77614 6 7.5 6C7.22386 6 7 5.77614 7 5.5ZM1 3.5C1 2.11929 2.11929 1 3.5 1H8.5C9.88071 1 11 2.11929 11 3.5V8.5C11 9.88071 9.88071 11 8.5 11H3.5C2.11929 11 1 9.88071 1 8.5V3.5ZM3.5 2C2.84689 2 2.29127 2.4174 2.08535 3H9.91465C9.70873 2.4174 9.15311 2 8.5 2H3.5ZM10 4H2V8.5C2 9.32843 2.67157 10 3.5 10H8.5C9.32843 10 10 9.32843 10 8.5V4Z" /></svg><!-- HTML_TAG_END -->
173				
174		<span class="text-block type-body  svelte-zxj483">CalendarView
175			
176</span></a>
177</div><h5 class="text-block type-body-strong category-header svelte-zxj483">Internals
178</h5>
179				<div class="tree-view svelte-xybd65">
180</div>
181</div></aside>
182
183		<article class="markdown-body"><header><h1 id="Overview">Overview</h1>
184				
185<a role="button" href="https://github.com/tropix126/fluent-svelte/edit/main/src/routes/docs/index.md" class="button style-hyperlink   svelte-1ulhukx" rel="noreferrer noopener" target="_blank">Edit This Page
186</a></header>
187			<p>Welcome to the Fluent Svelte documentation! This page will explain the basic concepts and usage of the library.</p>
188<h3 id="what-is-this">What is this?</h3>
189<p><code>fluent-svelte</code> is a <a href="http://svelte.dev/" rel="nofollow">Svelte</a> component UI library that emulates the look and feel of <a href="https://github.com/microsoft/microsoft-ui-xaml/" rel="nofollow">Microsoft’s Windows UI Controls</a> which conform to the Fluent Design System.</p>
190
191<div class="info-bar severity-caution  svelte-fp4fp6" role="alert"><div class="info-bar-icon svelte-fp4fp6">
192				
193<span class="info-badge severity-caution  svelte-106nxdf">
194		<svg aria-hidden xmlns="http://www.w3.org/2000/svg" viewBox="406 86 213 875" class="svelte-106nxdf">
194<path fill="currentColor" d="M426.5,512L426.5,170.5C426.5,158.833 428.75,147.833 433.25,137.5C437.75,127.167 443.917,118.167 451.75,110.5C459.583,102.833 468.667,96.75 479,92.25C489.333,87.75 500.333,85.5 512,85.5C523.667,85.5 534.667,87.75 545,92.25C555.333,96.75 564.417,102.833 572.25,110.5C580.083,118.167 586.25,127.167 590.75,137.5C595.25,147.833 597.5,158.833 597.5,170.5L597.5,512C597.5,523.667 595.25,534.667 590.75,545C586.25,555.333 580.083,564.417 572.25,572.25C564.417,580.083 555.333,586.25 545,590.75C534.667,595.25 523.667,597.5 512,597.5C500.333,597.5 489.333,595.25 479,590.75C468.667,586.25 459.583,580.083 451.75,572.25C443.917,564.417 437.75,555.333 433.25,545C428.75,534.667 426.5,523.667 426.5,512ZM405.5,853.5C405.5,838.833 408.333,825 414,812C419.667,799 427.333,787.667 437,778C446.667,768.333 457.917,760.667 470.75,755C483.583,749.333 497.333,746.5 512,746.5C526.667,746.5 540.417,749.333 553.25,755C566.083,760.667 577.333,768.333 587,778C596.667,787.667 604.333,799 610,812C615.667,825 618.5,838.833 618.5,853.5C618.5,868.167 615.667,881.917 610,894.75C604.333,907.583 596.667,918.833 587,928.5C577.333,938.167 566,945.833 553,951.5C540,957.167 526.333,960 512,960C497.333,960 483.583,957.167 470.75,951.5C457.917,945.833 446.667,938.167 437,928.5C427.333,918.833 419.667,907.583 414,894.75C408.333,881.917 405.5,868.167 405.5,853.5Z"></path></svg>
195	
196</span>
197			</div>
198		<div class="info-bar-content svelte-fp4fp6"><h5 class="svelte-fp4fp6">Before We Begin</h5>
199			<p class="svelte-fp4fp6">This is not a 1-to-1 re-implementation of WinUI, but rather a faithful attempt to emulate the look and feel of WinUI on the web. Some controls will have API or behaviorial differences, but the overall look and feel should be very similar.
200					</p>
201			</div>
202		<button class="info-bar-close-button svelte-fp4fp6" type="button" aria-label="Close"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 1024 1024" class="svelte-fp4fp6"><path fill="currentColor" d="M512,584.5L87.5,1009C77.5,1019 65.5,1024 51.5,1024C36.8333,1024 24.5833,1019.08 14.75,1009.25C4.91667,999.417 0,987.167 0,972.5C0,958.5 5,946.5 15,936.5L439.5,512L15,87.5C5,77.5 0,65.3334 0,51C0,44 1.33333,37.3334 4,31C6.66667,24.6667 10.3333,19.25 15,14.75C19.6667,10.25 25.1667,6.66669 31.5,4C37.8333,1.33337 44.5,0 51.5,0C65.5,0 77.5,5 87.5,15L512,439.5L936.5,15C946.5,5 958.667,0 973,0C980,0 986.583,1.33337 992.75,4C998.917,6.66669 1004.33,10.3334 1009,15C1013.67,19.6667 1017.33,25.0834 1020,31.25C1022.67,37.4167 1024,44 1024,51C1024,65.3334 1019,77.5 1009,87.5L584.5,512L1009,936.5C1019,946.5 1024,958.5 1024,972.5C1024,979.5 1022.67,986.167 1020,992.5C1017.33,998.833 1013.75,1004.33 1009.25,1009C1004.75,1013.67 999.333,1017.33 993,1020C986.667,1022.67 980,1024 973,1024C958.667,1024 946.5,1019 936.5,1009Z"></path></svg></button></div>
203<h3 id="features">Features</h3>
204<ul><li><a href="https://kit.svelte.dev/" rel="nofollow">SvelteKit</a> and SSR Compatible</li>
205<li><a href="https://typescriptlang.org/" rel="nofollow">TypeScript</a> and type definitions are supported, but optional.</li>
206<li>Full RTL support with no additional configuration.</li>
207<li>All components are accessible according to <a href="https://www.w3.org/WAI/standards-guidelines/aria/" rel="nofollow">WAI-ARIA</a> standards.</li>
208<li>Theming support using CSS custom properties.</li>
209<li>Minimal third-party dependency usage.</li>
210<li>Reduced motion support.</li>
211<li>Easy setup. Just install the library, add some base styles, and you’re ready to go.</li>
212<li>Minimal CSS overhead. Styles are included and scoped alongside their respective components, only bundling the CSS you need.</li></ul>
213<h3 id="undocumented-components">Undocumented Components</h3>
214<p>This documentation site is still not entirely finished. Many components exported in the library are not yet documented. That progress can be tracked <a href="https://github.com/Tropix126/fluent-svelte/issues/13" rel="nofollow">here</a>. For now, i’ve setup a testing page with every component included in the library that is viewable <a href="https://fluent-svelte.vercel.app/test" rel="nofollow">here</a>. It’s source can be viewed <a href="https://github.com/Tropix126/fluent-svelte/blob/main/src/routes/test/index.svelte" rel="nofollow">here</a>.</p>
215<p>Please keep in mind that any undocumented component is <em>considered to be in the 0.x phase of development</em>. This means that they could potentially recieve breaking API changes or be heavily updated before being finalized.</p>
216<h3 id="changelog">Changelog</h3>
217<p>See <a href="https://github.com/Tropix126/fluent-svelte/blob/main/CHANGELOG.md" rel="nofollow">CHANGELOG.md</a>.</p></article>
218
219		<aside><h5 class="text-block type-body-strong  svelte-zxj483">On This Page
220</h5>
221			</aside></div>
222</main>
223</main>
224
225
226		
226<script type="module" data-hydrate="y62fsw">
227		import { start } from "/_app/start-15c4ed2c.js";
228		start({
229			target: document.querySelector('[data-hydrate="y62fsw"]').parentNode,
230			paths: {"base":"","assets":""},
231			session: {},
232			route: true,
233			spa: false,
234			trailing_slash: "never",
235			hydrate: {
236				status: 200,
237				error: null,
238				nodes: [
239					import("/_app/pages/__layout.svelte-86abb752.js"),
240						import("/_app/pages/docs/__layout.svelte-8d9274b4.js"),
241						import("/_app/pages/docs/index.md-694d8a6b.js")
242				],
243				params: {},
244				routeId: "docs"
245			}
246		});
247	</script>
247</div>
248	</body>
249</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.