sdocs 0.0.42 → 0.0.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/language/index.d.ts +1 -0
  3. package/dist/language/index.js +1 -0
  4. package/dist/language/projection.d.ts +23 -0
  5. package/dist/language/projection.js +136 -0
  6. package/dist/language/projection.test.d.ts +1 -0
  7. package/dist/language/projection.test.js +117 -0
  8. package/dist/ui/About.sdoc +28 -0
  9. package/dist/ui/Button/Button.sdoc +41 -44
  10. package/dist/ui/Control/Checkbox.sdoc +7 -13
  11. package/dist/ui/Control/Color.sdoc +7 -13
  12. package/dist/ui/Control/Dimension.sdoc +7 -13
  13. package/dist/ui/Control/Number.sdoc +7 -13
  14. package/dist/ui/Control/Select.sdoc +7 -14
  15. package/dist/ui/Control/Text.sdoc +7 -13
  16. package/dist/ui/Dashboard.sdoc +57 -0
  17. package/dist/ui/Frame/Frame.sdoc +46 -48
  18. package/dist/ui/Icon/Icon.sdoc +33 -38
  19. package/dist/ui/NavTree/Group.sdoc +36 -38
  20. package/dist/ui/NavTree/Item.sdoc +52 -57
  21. package/dist/ui/NavTree/NavTree.sdoc +89 -91
  22. package/dist/ui/Stack/Stack.sdoc +41 -43
  23. package/package.json +1 -1
  24. package/dist/ui/About.page.sdoc +0 -37
  25. package/dist/ui/Dashboard.layout.sdoc +0 -60
package/dist/ui/Frame/Frame.sdoc CHANGED
@@ -1,54 +1,52 @@
1
1
  <script lang="ts">
2
2
  import Frame from './Frame.svelte';
3
-
4
- export const meta = {
5
- component: Frame,
6
- title: 'Frame',
7
- description: 'A flexible holy-grail layout with top, bottom, left, right, and center regions.',
8
- };
9
3
  </script>
10
4
 
11
- {#snippet Default()}
12
- <div style="height: 300px; border: 1px solid #ccc;">
13
- <Frame>
14
- {#snippet top()}
15
- <div style="padding: 8px; background: var(--color-base-100); border-bottom: 1px solid var(--color-base-200);">Top</div>
16
- {/snippet}
17
- {#snippet left()}
18
- <div style="padding: 8px; width: 120px; background: var(--color-base-50); border-right: 1px solid var(--color-base-200);">Left</div>
19
- {/snippet}
20
- <div style="padding: 8px;">Center content</div>
21
- {#snippet right()}
22
- <div style="padding: 8px; width: 120px; background: var(--color-base-50); border-left: 1px solid var(--color-base-200);">Right</div>
23
- {/snippet}
24
- {#snippet bottom()}
25
- <div style="padding: 8px; background: var(--color-base-100); border-top: 1px solid var(--color-base-200);">Bottom</div>
26
- {/snippet}
27
- </Frame>
28
- </div>
29
- {/snippet}
5
+ [DOCS title="Frame" description="A flexible holy-grail layout with top, bottom, left, right, and center regions."]
6
+
7
+ [preview component={Frame}]
8
+ <div style="height: 300px; border: 1px solid #ccc;">
9
+ <Frame>
10
+ {#snippet top()}
11
+ <div style="padding: 8px; background: var(--color-base-100); border-bottom: 1px solid var(--color-base-200);">Top</div>
12
+ {/snippet}
13
+ {#snippet left()}
14
+ <div style="padding: 8px; width: 120px; background: var(--color-base-50); border-right: 1px solid var(--color-base-200);">Left</div>
15
+ {/snippet}
16
+ <div style="padding: 8px;">Center content</div>
17
+ {#snippet right()}
18
+ <div style="padding: 8px; width: 120px; background: var(--color-base-50); border-left: 1px solid var(--color-base-200);">Right</div>
19
+ {/snippet}
20
+ {#snippet bottom()}
21
+ <div style="padding: 8px; background: var(--color-base-100); border-top: 1px solid var(--color-base-200);">Bottom</div>
22
+ {/snippet}
23
+ </Frame>
24
+ </div>
25
+ [/preview]
26
+
27
+ [example title="TopAndBottom"]
28
+ <div style="height: 200px; border: 1px solid #ccc;">
29
+ <Frame>
30
+ {#snippet top()}
31
+ <div style="padding: 8px; background: var(--color-base-100); border-bottom: 1px solid var(--color-base-200);">Header</div>
32
+ {/snippet}
33
+ <div style="padding: 8px;">Main content area</div>
34
+ {#snippet bottom()}
35
+ <div style="padding: 8px; background: var(--color-base-100); border-top: 1px solid var(--color-base-200);">Footer</div>
36
+ {/snippet}
37
+ </Frame>
38
+ </div>
39
+ [/example]
30
40
 
31
- {#snippet TopAndBottom()}
32
- <div style="height: 200px; border: 1px solid #ccc;">
33
- <Frame>
34
- {#snippet top()}
35
- <div style="padding: 8px; background: var(--color-base-100); border-bottom: 1px solid var(--color-base-200);">Header</div>
36
- {/snippet}
37
- <div style="padding: 8px;">Main content area</div>
38
- {#snippet bottom()}
39
- <div style="padding: 8px; background: var(--color-base-100); border-top: 1px solid var(--color-base-200);">Footer</div>
40
- {/snippet}
41
- </Frame>
42
- </div>
43
- {/snippet}
41
+ [example title="Sidebar"]
42
+ <div style="height: 200px; border: 1px solid #ccc;">
43
+ <Frame>
44
+ {#snippet left()}
45
+ <div style="padding: 8px; width: 150px; background: var(--color-base-50); border-right: 1px solid var(--color-base-200);">Sidebar</div>
46
+ {/snippet}
47
+ <div style="padding: 8px;">Content</div>
48
+ </Frame>
49
+ </div>
50
+ [/example]
44
51
 
45
- {#snippet Sidebar()}
46
- <div style="height: 200px; border: 1px solid #ccc;">
47
- <Frame>
48
- {#snippet left()}
49
- <div style="padding: 8px; width: 150px; background: var(--color-base-50); border-right: 1px solid var(--color-base-200);">Sidebar</div>
50
- {/snippet}
51
- <div style="padding: 8px;">Content</div>
52
- </Frame>
53
- </div>
54
- {/snippet}
52
+ [/DOCS]
package/dist/ui/Icon/Icon.sdoc CHANGED
@@ -1,45 +1,40 @@
1
1
  <script lang="ts">
2
2
  import Icon from './Icon.svelte';
3
-
4
- export const meta = {
5
- component: Icon,
6
- title: 'Icon',
7
- description: 'Displays an SVG icon by name. Supports sizing and color via CSS custom properties.',
8
- args: {
9
- name: 'chevron-right',
10
- },
11
- };
12
3
  </script>
13
4
 
14
- {#snippet Default(args)}
15
- <Icon name="chevron-right" --w="24px" --h="24px" --fill="currentColor" />
16
- {/snippet}
5
+ [DOCS title="Icon" description="Displays an SVG icon by name. Supports sizing and color via CSS custom properties."]
6
+
7
+ [preview component={Icon} args={{ name: 'chevron-right' }}]
8
+ <Icon name="chevron-right" --w="24px" --h="24px" --fill="currentColor" />
9
+ [/preview]
10
+
11
+ [example title="AllIcons"]
12
+ <div style="display: flex; gap: 12px; align-items: center;">
13
+ <Icon name="chevron-up" />
14
+ <Icon name="chevron-down" />
15
+ <Icon name="chevron-left" />
16
+ <Icon name="chevron-right" />
17
+ <Icon name="folder" />
18
+ <Icon name="folder-open" />
19
+ </div>
20
+ [/example]
17
21
 
18
- {#snippet AllIcons()}
19
- <div style="display: flex; gap: 12px; align-items: center;">
20
- <Icon name="chevron-up" />
21
- <Icon name="chevron-down" />
22
- <Icon name="chevron-left" />
23
- <Icon name="chevron-right" />
24
- <Icon name="folder" />
25
- <Icon name="folder-open" />
26
- </div>
27
- {/snippet}
22
+ [example title="CustomSize"]
23
+ <div style="display: flex; gap: 12px; align-items: center;">
24
+ <Icon name="chevron-right" --w="16px" --h="16px" />
25
+ <Icon name="chevron-right" />
26
+ <Icon name="chevron-right" --w="32px" --h="32px" />
27
+ <Icon name="chevron-right" --w="48px" --h="48px" />
28
+ </div>
29
+ [/example]
28
30
 
29
- {#snippet CustomSize()}
30
- <div style="display: flex; gap: 12px; align-items: center;">
31
- <Icon name="chevron-right" --w="16px" --h="16px" />
32
- <Icon name="chevron-right" />
33
- <Icon name="chevron-right" --w="32px" --h="32px" />
34
- <Icon name="chevron-right" --w="48px" --h="48px" />
35
- </div>
36
- {/snippet}
31
+ [example title="CustomColor"]
32
+ <div style="display: flex; gap: 12px; align-items: center;">
33
+ <Icon name="chevron-right" --fill="tomato" />
34
+ <Icon name="chevron-right" --fill="dodgerblue" />
35
+ <Icon name="chevron-right" --fill="mediumseagreen" />
36
+ <Icon name="chevron-right" --fill="slateviolet" />
37
+ </div>
38
+ [/example]
37
39
 
38
- {#snippet CustomColor()}
39
- <div style="display: flex; gap: 12px; align-items: center;">
40
- <Icon name="chevron-right" --fill="tomato" />
41
- <Icon name="chevron-right" --fill="dodgerblue" />
42
- <Icon name="chevron-right" --fill="mediumseagreen" />
43
- <Icon name="chevron-right" --fill="slateviolet" />
44
- </div>
45
- {/snippet}
40
+ [/DOCS]
package/dist/ui/NavTree/Group.sdoc CHANGED
@@ -2,45 +2,43 @@
2
2
  import Group from './Group.svelte';
3
3
  import Item from './Item.svelte';
4
4
  import NavTree from './NavTree.svelte';
5
-
6
- export const meta = {
7
- component: Group,
8
- title: 'NavTree / NavTree.Group',
9
- description: 'A collapsible section header with uppercase label. Used to organize items into named categories.',
10
- };
11
5
  </script>
12
6
 
13
- {#snippet Default()}
14
- <NavTree>
15
- <Group label="Components">
16
- <Item label="Button" href="#/button" />
17
- <Item label="Icon" href="#/icon" />
18
- <Item label="Card" href="#/card" />
19
- </Group>
20
- </NavTree>
21
- {/snippet}
7
+ [DOCS title="NavTree / NavTree.Group" description="A collapsible section header with uppercase label. Used to organize items into named categories."]
8
+
9
+ [preview component={Group}]
10
+ <NavTree>
11
+ <Group label="Components">
12
+ <Item label="Button" href="#/button" />
13
+ <Item label="Icon" href="#/icon" />
14
+ <Item label="Card" href="#/card" />
15
+ </Group>
16
+ </NavTree>
17
+ [/preview]
18
+
19
+ [example title="Collapsed"]
20
+ <NavTree>
21
+ <Group label="Advanced" expanded={false}>
22
+ <Item label="Tree" href="#/tree" />
23
+ <Item label="Table" href="#/table" />
24
+ </Group>
25
+ </NavTree>
26
+ [/example]
22
27
 
23
- {#snippet Collapsed()}
24
- <NavTree>
25
- <Group label="Advanced" expanded={false}>
26
- <Item label="Tree" href="#/tree" />
27
- <Item label="Table" href="#/table" />
28
- </Group>
29
- </NavTree>
30
- {/snippet}
28
+ [example title="MultipleGroups"]
29
+ <NavTree>
30
+ <Group label="Components">
31
+ <Item label="Button" href="#/button" />
32
+ <Item label="Input" href="#/input" />
33
+ </Group>
34
+ <Group label="Pages">
35
+ <Item label="About" href="#/about" />
36
+ <Item label="Changelog" href="#/changelog" />
37
+ </Group>
38
+ <Group label="Layouts">
39
+ <Item label="Dashboard" href="#/dashboard" />
40
+ </Group>
41
+ </NavTree>
42
+ [/example]
31
43
 
32
- {#snippet MultipleGroups()}
33
- <NavTree>
34
- <Group label="Components">
35
- <Item label="Button" href="#/button" />
36
- <Item label="Input" href="#/input" />
37
- </Group>
38
- <Group label="Pages">
39
- <Item label="About" href="#/about" />
40
- <Item label="Changelog" href="#/changelog" />
41
- </Group>
42
- <Group label="Layouts">
43
- <Item label="Dashboard" href="#/dashboard" />
44
- </Group>
45
- </NavTree>
46
- {/snippet}
44
+ [/DOCS]
package/dist/ui/NavTree/Item.sdoc CHANGED
@@ -2,69 +2,64 @@
2
2
  import Item from './Item.svelte';
3
3
  import NavTree from './NavTree.svelte';
4
4
  import { Icon } from '../Icon/index.js';
5
-
6
- export const meta = {
7
- component: Item,
8
- title: 'NavTree / NavTree.Item',
9
- description: 'A tree node that acts as a leaf (link/button) or expandable folder when children are provided. Supports left and right snippet slots for custom content.',
10
- args:{
11
- label:"Label"
12
- }
13
- };
14
5
  </script>
15
6
 
16
- {#snippet Default({...args})}
17
- <NavTree>
18
- <Item {...args} >
19
- <Item {...args} >
7
+ [DOCS title="NavTree / NavTree.Item" description="A tree node that acts as a leaf (link/button) or expandable folder when children are provided. Supports left and right snippet slots for custom content."]
8
+
9
+ [preview component={Item} args={{ label: 'Label' }}]
10
+ <NavTree>
11
+ <Item {...args} >
12
+ <Item {...args} >
13
+
14
+ </Item>
15
+ <Item {...args} >
20
16
 
21
- </Item>
22
- <Item {...args} >
17
+ </Item>
23
18
 
24
- </Item>
19
+ </Item>
20
+ </NavTree>
21
+ [/preview]
25
22
 
26
- </Item>
27
- </NavTree>
28
- {/snippet}
23
+ [example title="LeftSlot"]
24
+ <NavTree>
25
+ <Item label="Home" href="#/home">
26
+ {#snippet left()}<Icon name="folder" --w="14px" --h="14px" />{/snippet}
27
+ </Item>
28
+ <Item label="Documents" href="#/docs">
29
+ {#snippet left()}<Icon name="folder-open" --w="14px" --h="14px" />{/snippet}
30
+ </Item>
31
+ </NavTree>
32
+ [/example]
29
33
 
30
- {#snippet LeftSlot()}
31
- <NavTree>
32
- <Item label="Home" href="#/home">
33
- {#snippet left()}<Icon name="folder" --w="14px" --h="14px" />{/snippet}
34
- </Item>
35
- <Item label="Documents" href="#/docs">
36
- {#snippet left()}<Icon name="folder-open" --w="14px" --h="14px" />{/snippet}
37
- </Item>
38
- </NavTree>
39
- {/snippet}
34
+ [example title="RightSlot"]
35
+ <NavTree>
36
+ <Item label="bundle.js" href="#/bundle">
37
+ {#snippet right()}<span style="font-size: 11px; color: tomato;">54kb</span>{/snippet}
38
+ </Item>
39
+ <Item label="style.css" href="#/style">
40
+ {#snippet right()}<span style="font-size: 11px; color: #9ca3af;">3.2kb</span>{/snippet}
41
+ </Item>
42
+ </NavTree>
43
+ [/example]
40
44
 
41
- {#snippet RightSlot()}
42
- <NavTree>
43
- <Item label="bundle.js" href="#/bundle">
44
- {#snippet right()}<span style="font-size: 11px; color: tomato;">54kb</span>{/snippet}
45
- </Item>
46
- <Item label="style.css" href="#/style">
47
- {#snippet right()}<span style="font-size: 11px; color: #9ca3af;">3.2kb</span>{/snippet}
48
- </Item>
49
- </NavTree>
50
- {/snippet}
45
+ [example title="Expandable"]
46
+ <NavTree>
47
+ <Item label="Controls" expanded>
48
+ <Item label="Text" href="#/text" />
49
+ <Item label="Number" href="#/number" />
50
+ </Item>
51
+ <Item label="Layout">
52
+ <Item label="Frame" href="#/frame" />
53
+ </Item>
54
+ </NavTree>
55
+ [/example]
51
56
 
52
- {#snippet Expandable()}
53
- <NavTree>
54
- <Item label="Controls" expanded>
55
- <Item label="Text" href="#/text" />
56
- <Item label="Number" href="#/number" />
57
- </Item>
58
- <Item label="Layout">
59
- <Item label="Frame" href="#/frame" />
60
- </Item>
61
- </NavTree>
62
- {/snippet}
57
+ [example title="ActiveState"]
58
+ <NavTree>
59
+ <Item label="Regular item" href="#/one" />
60
+ <Item label="Active item" href="#/two" active />
61
+ <Item label="Another item" href="#/three" />
62
+ </NavTree>
63
+ [/example]
63
64
 
64
- {#snippet ActiveState()}
65
- <NavTree>
66
- <Item label="Regular item" href="#/one" />
67
- <Item label="Active item" href="#/two" active />
68
- <Item label="Another item" href="#/three" />
69
- </NavTree>
70
- {/snippet}
65
+ [/DOCS]
package/dist/ui/NavTree/NavTree.sdoc CHANGED
@@ -2,118 +2,116 @@
2
2
  import NavTree from './index.js';
3
3
  import NavTreeRoot from './NavTree.svelte';
4
4
  import { Icon } from '../Icon/index.js';
5
-
6
- export const meta = {
7
- component: NavTreeRoot,
8
- title: 'NavTree',
9
- description: 'A composable tree navigation with Item and Group subcomponents.',
10
- };
11
5
  </script>
12
6
 
13
- {#snippet Default()}
14
- <NavTree>
15
- <NavTree.Group label="Components">
16
- <NavTree.Item label="UI" expanded>
17
- {#snippet left()}<Icon name="folder-open" --w="14px" --h="14px" --fill="var(--color-base-400)" />{/snippet}
18
- <NavTree.Item label="Button" expanded --font-weight="500">
19
- {#snippet left()}<Icon name="component" --w="14px" --h="14px" --fill="var(--color-component-500)" />{/snippet}
20
- <NavTree.Item label="Docs" href="#/ui/button/docs" --font-weight="400">
21
- {#snippet left()}<Icon name="file-code" --w="14px" --h="14px" --fill="var(--color-docs-500)" />{/snippet}
7
+ [DOCS title="NavTree" description="A composable tree navigation with Item and Group subcomponents."]
8
+
9
+ [preview component={NavTreeRoot}]
10
+ <NavTree>
11
+ <NavTree.Group label="Components">
12
+ <NavTree.Item label="UI" expanded>
13
+ {#snippet left()}<Icon name="folder-open" --w="14px" --h="14px" --fill="var(--color-base-400)" />{/snippet}
14
+ <NavTree.Item label="Button" expanded --font-weight="500">
15
+ {#snippet left()}<Icon name="component" --w="14px" --h="14px" --fill="var(--color-component-500)" />{/snippet}
16
+ <NavTree.Item label="Docs" href="#/ui/button/docs" --font-weight="400">
17
+ {#snippet left()}<Icon name="file-code" --w="14px" --h="14px" --fill="var(--color-docs-500)" />{/snippet}
18
+ </NavTree.Item>
19
+ <NavTree.Item label="Primary" href="#/ui/button/primary" active --font-weight="400">
20
+ {#snippet left()}<Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-600)" />{/snippet}
21
+ </NavTree.Item>
22
+ <NavTree.Item label="Outlined" href="#/ui/button/outlined" --font-weight="400">
23
+ {#snippet left()}<Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-600)" />{/snippet}
24
+ </NavTree.Item>
22
25
  </NavTree.Item>
23
- <NavTree.Item label="Primary" href="#/ui/button/primary" active --font-weight="400">
24
- {#snippet left()}<Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-600)" />{/snippet}
26
+ <NavTree.Item label="Icon" --font-weight="500">
27
+ {#snippet left()}<Icon name="component" --w="14px" --h="14px" --fill="var(--color-component-500)" />{/snippet}
28
+ <NavTree.Item label="Docs" href="#/ui/icon/docs" --font-weight="400">
29
+ {#snippet left()}<Icon name="file-code" --w="14px" --h="14px" --fill="var(--color-docs-500)" />{/snippet}
30
+ </NavTree.Item>
31
+ <NavTree.Item label="Sizes" href="#/ui/icon/sizes" --font-weight="400">
32
+ {#snippet left()}<Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-600)" />{/snippet}
33
+ </NavTree.Item>
25
34
  </NavTree.Item>
26
- <NavTree.Item label="Outlined" href="#/ui/button/outlined" --font-weight="400">
27
- {#snippet left()}<Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-600)" />{/snippet}
35
+ <NavTree.Item label="Frame" --font-weight="500">
36
+ {#snippet left()}<Icon name="component" --w="14px" --h="14px" --fill="var(--color-component-500)" />{/snippet}
37
+ <NavTree.Item label="Docs" href="#/ui/frame/docs" --font-weight="400">
38
+ {#snippet left()}<Icon name="file-code" --w="14px" --h="14px" --fill="var(--color-docs-500)" />{/snippet}
39
+ </NavTree.Item>
28
40
  </NavTree.Item>
29
41
  </NavTree.Item>
30
- <NavTree.Item label="Icon" --font-weight="500">
42
+ <NavTree.Item label="Card" expanded --font-weight="500">
31
43
  {#snippet left()}<Icon name="component" --w="14px" --h="14px" --fill="var(--color-component-500)" />{/snippet}
32
- <NavTree.Item label="Docs" href="#/ui/icon/docs" --font-weight="400">
44
+ <NavTree.Item label="Docs" href="#/card/docs" --font-weight="400">
33
45
  {#snippet left()}<Icon name="file-code" --w="14px" --h="14px" --fill="var(--color-docs-500)" />{/snippet}
34
46
  </NavTree.Item>
35
- <NavTree.Item label="Sizes" href="#/ui/icon/sizes" --font-weight="400">
47
+ <NavTree.Item label="WithImage" href="#/card/with-image" --font-weight="400">
36
48
  {#snippet left()}<Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-600)" />{/snippet}
37
49
  </NavTree.Item>
38
50
  </NavTree.Item>
39
- <NavTree.Item label="Frame" --font-weight="500">
51
+ <NavTree.Item label="Badge" --font-weight="500">
40
52
  {#snippet left()}<Icon name="component" --w="14px" --h="14px" --fill="var(--color-component-500)" />{/snippet}
41
- <NavTree.Item label="Docs" href="#/ui/frame/docs" --font-weight="400">
53
+ <NavTree.Item label="Docs" href="#/badge/docs" --font-weight="400">
42
54
  {#snippet left()}<Icon name="file-code" --w="14px" --h="14px" --fill="var(--color-docs-500)" />{/snippet}
43
55
  </NavTree.Item>
56
+ <NavTree.Item label="Status" href="#/badge/status" --font-weight="400">
57
+ {#snippet left()}<Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-600)" />{/snippet}
58
+ </NavTree.Item>
44
59
  </NavTree.Item>
45
- </NavTree.Item>
46
- <NavTree.Item label="Card" expanded --font-weight="500">
47
- {#snippet left()}<Icon name="component" --w="14px" --h="14px" --fill="var(--color-component-500)" />{/snippet}
48
- <NavTree.Item label="Docs" href="#/card/docs" --font-weight="400">
49
- {#snippet left()}<Icon name="file-code" --w="14px" --h="14px" --fill="var(--color-docs-500)" />{/snippet}
60
+ </NavTree.Group>
61
+ <NavTree.Group label="Pages">
62
+ <NavTree.Item label="Getting Started" href="#/pages/getting-started" --font-weight="500">
63
+ {#snippet left()}<Icon name="file-text" --w="14px" --h="14px" --fill="var(--color-page-550)" />{/snippet}
50
64
  </NavTree.Item>
51
- <NavTree.Item label="WithImage" href="#/card/with-image" --font-weight="400">
52
- {#snippet left()}<Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-600)" />{/snippet}
65
+ <NavTree.Item label="Changelog" href="#/pages/changelog" --font-weight="500">
66
+ {#snippet left()}<Icon name="file-text" --w="14px" --h="14px" --fill="var(--color-page-550)" />{/snippet}
53
67
  </NavTree.Item>
54
- </NavTree.Item>
55
- <NavTree.Item label="Badge" --font-weight="500">
56
- {#snippet left()}<Icon name="component" --w="14px" --h="14px" --fill="var(--color-component-500)" />{/snippet}
57
- <NavTree.Item label="Docs" href="#/badge/docs" --font-weight="400">
58
- {#snippet left()}<Icon name="file-code" --w="14px" --h="14px" --fill="var(--color-docs-500)" />{/snippet}
68
+ </NavTree.Group>
69
+ <NavTree.Group label="Layouts">
70
+ <NavTree.Item label="LoginForm" href="#/layouts/login-form" --font-weight="500">
71
+ {#snippet left()}<Icon name="panels-top-left" --w="14px" --h="14px" --fill="var(--color-layout-500)" />{/snippet}
59
72
  </NavTree.Item>
60
- <NavTree.Item label="Status" href="#/badge/status" --font-weight="400">
61
- {#snippet left()}<Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-600)" />{/snippet}
73
+ <NavTree.Item label="Dashboard" href="#/layouts/dashboard" --font-weight="500">
74
+ {#snippet left()}<Icon name="panels-top-left" --w="14px" --h="14px" --fill="var(--color-layout-500)" />{/snippet}
62
75
  </NavTree.Item>
63
- </NavTree.Item>
64
- </NavTree.Group>
65
- <NavTree.Group label="Pages">
66
- <NavTree.Item label="Getting Started" href="#/pages/getting-started" --font-weight="500">
67
- {#snippet left()}<Icon name="file-text" --w="14px" --h="14px" --fill="var(--color-page-550)" />{/snippet}
68
- </NavTree.Item>
69
- <NavTree.Item label="Changelog" href="#/pages/changelog" --font-weight="500">
70
- {#snippet left()}<Icon name="file-text" --w="14px" --h="14px" --fill="var(--color-page-550)" />{/snippet}
71
- </NavTree.Item>
72
- </NavTree.Group>
73
- <NavTree.Group label="Layouts">
74
- <NavTree.Item label="LoginForm" href="#/layouts/login-form" --font-weight="500">
75
- {#snippet left()}<Icon name="panels-top-left" --w="14px" --h="14px" --fill="var(--color-layout-500)" />{/snippet}
76
- </NavTree.Item>
77
- <NavTree.Item label="Dashboard" href="#/layouts/dashboard" --font-weight="500">
78
- {#snippet left()}<Icon name="panels-top-left" --w="14px" --h="14px" --fill="var(--color-layout-500)" />{/snippet}
79
- </NavTree.Item>
80
- </NavTree.Group>
81
- </NavTree>
82
- {/snippet}
83
-
84
- {#snippet WithSlots()}
85
- <NavTree>
86
- <NavTree.Group label="Files">
87
- <NavTree.Item label="index.ts" href="#/index">
88
- {#snippet left()}<Icon name="folder" --w="14px" --h="14px" />{/snippet}
89
- {#snippet right()}<span style="font-size: 11px; color: #9ca3af;">2.4kb</span>{/snippet}
90
- </NavTree.Item>
91
- <NavTree.Item label="utils.ts" href="#/utils">
92
- {#snippet left()}<Icon name="folder" --w="14px" --h="14px" />{/snippet}
93
- {#snippet right()}<span style="font-size: 11px; color: tomato;">54kb</span>{/snippet}
94
- </NavTree.Item>
95
- <NavTree.Item label="config.ts" href="#/config">
96
- {#snippet left()}<Icon name="folder-open" --w="14px" --h="14px" --fill="var(--color-base-400)" />{/snippet}
97
- {#snippet right()}<span style="font-size: 11px; color: #9ca3af;">1.1kb</span>{/snippet}
98
- </NavTree.Item>
99
- </NavTree.Group>
100
- </NavTree>
101
- {/snippet}
76
+ </NavTree.Group>
77
+ </NavTree>
78
+ [/preview]
102
79
 
103
- {#snippet NestedFolders()}
104
- <NavTree>
105
- <NavTree.Item label="src" expanded>
106
- <NavTree.Item label="lib" expanded>
107
- <NavTree.Item label="ui">
108
- <NavTree.Item label="Frame.svelte" />
109
- <NavTree.Item label="index.ts" />
80
+ [example title="WithSlots"]
81
+ <NavTree>
82
+ <NavTree.Group label="Files">
83
+ <NavTree.Item label="index.ts" href="#/index">
84
+ {#snippet left()}<Icon name="folder" --w="14px" --h="14px" />{/snippet}
85
+ {#snippet right()}<span style="font-size: 11px; color: #9ca3af;">2.4kb</span>{/snippet}
110
86
  </NavTree.Item>
111
- <NavTree.Item label="server">
112
- <NavTree.Item label="config.ts" />
113
- <NavTree.Item label="cli.ts" />
87
+ <NavTree.Item label="utils.ts" href="#/utils">
88
+ {#snippet left()}<Icon name="folder" --w="14px" --h="14px" />{/snippet}
89
+ {#snippet right()}<span style="font-size: 11px; color: tomato;">54kb</span>{/snippet}
114
90
  </NavTree.Item>
91
+ <NavTree.Item label="config.ts" href="#/config">
92
+ {#snippet left()}<Icon name="folder-open" --w="14px" --h="14px" --fill="var(--color-base-400)" />{/snippet}
93
+ {#snippet right()}<span style="font-size: 11px; color: #9ca3af;">1.1kb</span>{/snippet}
94
+ </NavTree.Item>
95
+ </NavTree.Group>
96
+ </NavTree>
97
+ [/example]
98
+
99
+ [example title="NestedFolders"]
100
+ <NavTree>
101
+ <NavTree.Item label="src" expanded>
102
+ <NavTree.Item label="lib" expanded>
103
+ <NavTree.Item label="ui">
104
+ <NavTree.Item label="Frame.svelte" />
105
+ <NavTree.Item label="index.ts" />
106
+ </NavTree.Item>
107
+ <NavTree.Item label="server">
108
+ <NavTree.Item label="config.ts" />
109
+ <NavTree.Item label="cli.ts" />
110
+ </NavTree.Item>
111
+ </NavTree.Item>
112
+ <NavTree.Item label="app.ts" />
115
113
  </NavTree.Item>
116
- <NavTree.Item label="app.ts" />
117
- </NavTree.Item>
118
- </NavTree>
119
- {/snippet}
114
+ </NavTree>
115
+ [/example]
116
+
117
+ [/DOCS]