@adia-ai/a2ui-corpus 0.7.17 → 0.7.18
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.
- package/CHANGELOG.md +5 -0
- package/catalog-a2ui_0_9.json +5 -0
- package/chunks/_index.json +804 -4
- package/chunks/admin-page-header-flush.json +83 -0
- package/chunks/admin-page-header-title-description.json +80 -0
- package/chunks/admin-page-header-with-actions.json +109 -0
- package/chunks/admin-page-header-with-tabs.json +144 -0
- package/chunks/admin-sidebar-brand-signin.json +152 -0
- package/chunks/admin-sidebar-brand-version.json +124 -0
- package/chunks/admin-sidebar-flat-nav.json +125 -0
- package/chunks/admin-sidebar-nav-dividers.json +144 -0
- package/chunks/admin-sidebar-nav-groups.json +165 -0
- package/chunks/admin-sidebar-workspace-switcher.json +132 -0
- package/chunks/admin-topbar-breadcrumb-actions.json +130 -0
- package/chunks/admin-topbar-breadcrumb-minimal.json +79 -0
- package/chunks/admin-topbar-deep-breadcrumb.json +129 -0
- package/chunks/admin-topbar-search.json +104 -0
- package/chunks/admin-topbar-status-indicator.json +131 -0
- package/chunks/admin-topbar-trailing-toggle.json +114 -0
- package/chunks/form-checkbox-group.json +65 -0
- package/chunks/form-field-email-hint.json +53 -0
- package/chunks/form-field-range.json +54 -0
- package/chunks/form-field-required.json +52 -0
- package/chunks/form-field-select.json +66 -0
- package/chunks/form-field-textarea.json +51 -0
- package/chunks/form-fields-two-column.json +69 -0
- package/chunks/form-switch-toggle.json +41 -0
- package/package.json +1 -1
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "admin-sidebar-flat-nav",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "admin-sidebar",
|
|
5
|
+
"page": "/site/patterns/admin-sidebar.html",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {
|
|
9
|
+
"slot": "leading",
|
|
10
|
+
"name": "demo-nav-1"
|
|
11
|
+
},
|
|
12
|
+
"html": "<admin-sidebar slot=\"leading\" name=\"demo-nav-1\">\n <admin-topbar slot=\"header\">\n <admin-entity-item slot=\"heading\">\n <img slot=\"icon\" class=\"brand-logo\" src=\"/icons/agent-ui-light.svg\" alt=\"\">\n <span slot=\"label\">My App</span>\n </admin-entity-item>\n </admin-topbar>\n <section-ui>\n <nav-ui>\n <nav-item-ui icon=\"house\" text=\"Home\" selected></nav-item-ui>\n <nav-item-ui icon=\"tray\" text=\"Inbox\" badge=\"8\"></nav-item-ui>\n <nav-item-ui icon=\"users\" text=\"Team\"></nav-item-ui>\n <nav-item-ui icon=\"chart-bar\" text=\"Reports\"></nav-item-ui>\n <nav-item-ui icon=\"gear\" text=\"Settings\"></nav-item-ui>\n </nav-ui>\n </section-ui>\n </admin-sidebar>",
|
|
13
|
+
"source": "site/pages/patterns/admin-sidebar.html",
|
|
14
|
+
"metadata": {
|
|
15
|
+
"domain": "navigation",
|
|
16
|
+
"description": "Admin sidebar with a simple flat single-level nav — nav-item-ui rows with icons and a badge, no grouping. Ideal for marketing or docs apps with a shallow IA.",
|
|
17
|
+
"keywords": [
|
|
18
|
+
"admin",
|
|
19
|
+
"sidebar",
|
|
20
|
+
"flat",
|
|
21
|
+
"nav",
|
|
22
|
+
"simple",
|
|
23
|
+
"single-level",
|
|
24
|
+
"nav-item-ui",
|
|
25
|
+
"icons",
|
|
26
|
+
"badge",
|
|
27
|
+
"nav-ui",
|
|
28
|
+
"rail",
|
|
29
|
+
"navigation",
|
|
30
|
+
"admin-sidebar",
|
|
31
|
+
"home",
|
|
32
|
+
"inbox",
|
|
33
|
+
"team",
|
|
34
|
+
"reports",
|
|
35
|
+
"settings",
|
|
36
|
+
"shallow"
|
|
37
|
+
]
|
|
38
|
+
},
|
|
39
|
+
"captured_at": "2026-06-09T18:16:34.245Z",
|
|
40
|
+
"template": [
|
|
41
|
+
{
|
|
42
|
+
"id": "image",
|
|
43
|
+
"component": "Image",
|
|
44
|
+
"slot": "icon",
|
|
45
|
+
"src": "/icons/agent-ui-light.svg"
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"id": "text",
|
|
49
|
+
"component": "Text",
|
|
50
|
+
"variant": "body",
|
|
51
|
+
"slot": "label",
|
|
52
|
+
"textContent": "My App"
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"id": "column",
|
|
56
|
+
"component": "Column",
|
|
57
|
+
"slot": "heading",
|
|
58
|
+
"children": [
|
|
59
|
+
"image",
|
|
60
|
+
"text"
|
|
61
|
+
]
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"id": "admin-topbar",
|
|
65
|
+
"component": "AdminTopbar",
|
|
66
|
+
"slot": "header",
|
|
67
|
+
"children": [
|
|
68
|
+
"column"
|
|
69
|
+
]
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"id": "nav-item",
|
|
73
|
+
"component": "NavItem",
|
|
74
|
+
"icon": "house",
|
|
75
|
+
"selected": true,
|
|
76
|
+
"text": "Home"
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"id": "nav-item-2",
|
|
80
|
+
"component": "NavItem",
|
|
81
|
+
"badge": "8",
|
|
82
|
+
"icon": "tray",
|
|
83
|
+
"text": "Inbox"
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"id": "nav-item-3",
|
|
87
|
+
"component": "NavItem",
|
|
88
|
+
"icon": "users",
|
|
89
|
+
"text": "Team"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"id": "nav-item-4",
|
|
93
|
+
"component": "NavItem",
|
|
94
|
+
"icon": "chart-bar",
|
|
95
|
+
"text": "Reports"
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"id": "nav-item-5",
|
|
99
|
+
"component": "NavItem",
|
|
100
|
+
"icon": "gear",
|
|
101
|
+
"text": "Settings"
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"id": "nav",
|
|
105
|
+
"component": "Nav",
|
|
106
|
+
"children": [
|
|
107
|
+
"nav-item",
|
|
108
|
+
"nav-item-2",
|
|
109
|
+
"nav-item-3",
|
|
110
|
+
"nav-item-4",
|
|
111
|
+
"nav-item-5"
|
|
112
|
+
]
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
"id": "root",
|
|
116
|
+
"component": "Sidebar",
|
|
117
|
+
"slot": "leading",
|
|
118
|
+
"name": "demo-nav-1",
|
|
119
|
+
"children": [
|
|
120
|
+
"admin-topbar",
|
|
121
|
+
"nav"
|
|
122
|
+
]
|
|
123
|
+
}
|
|
124
|
+
]
|
|
125
|
+
}
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "admin-sidebar-nav-dividers",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "admin-sidebar",
|
|
5
|
+
"page": "/site/patterns/admin-sidebar.html",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {
|
|
9
|
+
"slot": "leading",
|
|
10
|
+
"name": "demo-nav-2"
|
|
11
|
+
},
|
|
12
|
+
"html": "<admin-sidebar slot=\"leading\" name=\"demo-nav-2\">\n <admin-topbar slot=\"header\">\n <admin-entity-item slot=\"heading\">\n <img slot=\"icon\" class=\"brand-logo\" src=\"/icons/agent-ui-light.svg\" alt=\"\">\n <span slot=\"label\">My App</span>\n </admin-entity-item>\n </admin-topbar>\n <section-ui>\n <nav-ui>\n <nav-item-ui icon=\"house\" text=\"Dashboard\" selected></nav-item-ui>\n <nav-item-ui icon=\"tray\" text=\"Inbox\" badge=\"3\"></nav-item-ui>\n <hr data-nav-divider />\n <nav-item-ui icon=\"users\" text=\"Team\"></nav-item-ui>\n <nav-item-ui icon=\"chart-bar\" text=\"Reports\"></nav-item-ui>\n <hr data-nav-divider />\n <nav-item-ui icon=\"gear\" text=\"Settings\"></nav-item-ui>\n <nav-item-ui icon=\"lifebuoy\" text=\"Support\"></nav-item-ui>\n </nav-ui>\n </section-ui>\n </admin-sidebar>",
|
|
13
|
+
"source": "site/pages/patterns/admin-sidebar.html",
|
|
14
|
+
"metadata": {
|
|
15
|
+
"domain": "navigation",
|
|
16
|
+
"description": "Admin sidebar whose nav is split into visual sections with hr data-nav-divider separators between groups of nav-item-ui rows. For apps that want grouped nav without collapsible sub-navs.",
|
|
17
|
+
"keywords": [
|
|
18
|
+
"admin",
|
|
19
|
+
"sidebar",
|
|
20
|
+
"nav",
|
|
21
|
+
"dividers",
|
|
22
|
+
"separators",
|
|
23
|
+
"hr",
|
|
24
|
+
"data-nav-divider",
|
|
25
|
+
"grouped",
|
|
26
|
+
"sections",
|
|
27
|
+
"nav-item-ui",
|
|
28
|
+
"nav-ui",
|
|
29
|
+
"rail",
|
|
30
|
+
"navigation",
|
|
31
|
+
"admin-sidebar",
|
|
32
|
+
"dashboard",
|
|
33
|
+
"inbox",
|
|
34
|
+
"team",
|
|
35
|
+
"settings",
|
|
36
|
+
"support"
|
|
37
|
+
]
|
|
38
|
+
},
|
|
39
|
+
"captured_at": "2026-06-09T18:16:34.245Z",
|
|
40
|
+
"template": [
|
|
41
|
+
{
|
|
42
|
+
"id": "image",
|
|
43
|
+
"component": "Image",
|
|
44
|
+
"slot": "icon",
|
|
45
|
+
"src": "/icons/agent-ui-light.svg"
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"id": "text",
|
|
49
|
+
"component": "Text",
|
|
50
|
+
"variant": "body",
|
|
51
|
+
"slot": "label",
|
|
52
|
+
"textContent": "My App"
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"id": "column",
|
|
56
|
+
"component": "Column",
|
|
57
|
+
"slot": "heading",
|
|
58
|
+
"children": [
|
|
59
|
+
"image",
|
|
60
|
+
"text"
|
|
61
|
+
]
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"id": "admin-topbar",
|
|
65
|
+
"component": "AdminTopbar",
|
|
66
|
+
"slot": "header",
|
|
67
|
+
"children": [
|
|
68
|
+
"column"
|
|
69
|
+
]
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"id": "nav-item",
|
|
73
|
+
"component": "NavItem",
|
|
74
|
+
"icon": "house",
|
|
75
|
+
"selected": true,
|
|
76
|
+
"text": "Dashboard"
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"id": "nav-item-2",
|
|
80
|
+
"component": "NavItem",
|
|
81
|
+
"badge": "3",
|
|
82
|
+
"icon": "tray",
|
|
83
|
+
"text": "Inbox"
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"id": "divider",
|
|
87
|
+
"component": "Divider",
|
|
88
|
+
"data-nav-divider": ""
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
"id": "nav-item-3",
|
|
92
|
+
"component": "NavItem",
|
|
93
|
+
"icon": "users",
|
|
94
|
+
"text": "Team"
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
"id": "nav-item-4",
|
|
98
|
+
"component": "NavItem",
|
|
99
|
+
"icon": "chart-bar",
|
|
100
|
+
"text": "Reports"
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
"id": "divider-2",
|
|
104
|
+
"component": "Divider",
|
|
105
|
+
"data-nav-divider": ""
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
"id": "nav-item-5",
|
|
109
|
+
"component": "NavItem",
|
|
110
|
+
"icon": "gear",
|
|
111
|
+
"text": "Settings"
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"id": "nav-item-6",
|
|
115
|
+
"component": "NavItem",
|
|
116
|
+
"icon": "lifebuoy",
|
|
117
|
+
"text": "Support"
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"id": "nav",
|
|
121
|
+
"component": "Nav",
|
|
122
|
+
"children": [
|
|
123
|
+
"nav-item",
|
|
124
|
+
"nav-item-2",
|
|
125
|
+
"divider",
|
|
126
|
+
"nav-item-3",
|
|
127
|
+
"nav-item-4",
|
|
128
|
+
"divider-2",
|
|
129
|
+
"nav-item-5",
|
|
130
|
+
"nav-item-6"
|
|
131
|
+
]
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
"id": "root",
|
|
135
|
+
"component": "Sidebar",
|
|
136
|
+
"slot": "leading",
|
|
137
|
+
"name": "demo-nav-2",
|
|
138
|
+
"children": [
|
|
139
|
+
"admin-topbar",
|
|
140
|
+
"nav"
|
|
141
|
+
]
|
|
142
|
+
}
|
|
143
|
+
]
|
|
144
|
+
}
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "admin-sidebar-nav-groups",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "admin-sidebar",
|
|
5
|
+
"page": "/site/patterns/admin-sidebar.html",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {
|
|
9
|
+
"slot": "leading",
|
|
10
|
+
"name": "demo-nav-3"
|
|
11
|
+
},
|
|
12
|
+
"html": "<admin-sidebar slot=\"leading\" name=\"demo-nav-3\">\n <admin-topbar slot=\"header\">\n <admin-entity-item slot=\"heading\">\n <img slot=\"icon\" class=\"brand-logo\" src=\"/icons/agent-ui-light.svg\" alt=\"\">\n <span slot=\"label\">My App</span>\n </admin-entity-item>\n </admin-topbar>\n <section-ui>\n <nav-ui>\n <nav-item-ui icon=\"house\" text=\"Dashboard\" selected></nav-item-ui>\n <nav-group-ui icon=\"chart-line\" text=\"Analytics\" open>\n <nav-item-ui text=\"Overview\"></nav-item-ui>\n <nav-item-ui text=\"Funnels\"></nav-item-ui>\n <nav-item-ui text=\"Retention\"></nav-item-ui>\n </nav-group-ui>\n <nav-group-ui icon=\"folders\" text=\"Content\">\n <nav-item-ui text=\"Pages\"></nav-item-ui>\n <nav-item-ui text=\"Media\"></nav-item-ui>\n <nav-item-ui text=\"Drafts\"></nav-item-ui>\n </nav-group-ui>\n <hr data-nav-divider />\n <nav-item-ui icon=\"gear\" text=\"Settings\"></nav-item-ui>\n </nav-ui>\n </section-ui>\n </admin-sidebar>",
|
|
13
|
+
"source": "site/pages/patterns/admin-sidebar.html",
|
|
14
|
+
"metadata": {
|
|
15
|
+
"domain": "navigation",
|
|
16
|
+
"description": "Admin sidebar with collapsible nav-group-ui sub-navs — each group owns a chevron and open state, nesting nav-item-ui children. For deep hierarchies (Analytics, Content) under a flat dashboard row.",
|
|
17
|
+
"keywords": [
|
|
18
|
+
"admin",
|
|
19
|
+
"sidebar",
|
|
20
|
+
"nav",
|
|
21
|
+
"groups",
|
|
22
|
+
"collapsible",
|
|
23
|
+
"sub-nav",
|
|
24
|
+
"nav-group-ui",
|
|
25
|
+
"chevron",
|
|
26
|
+
"open",
|
|
27
|
+
"nested",
|
|
28
|
+
"hierarchy",
|
|
29
|
+
"nav-item-ui",
|
|
30
|
+
"nav-ui",
|
|
31
|
+
"rail",
|
|
32
|
+
"navigation",
|
|
33
|
+
"admin-sidebar",
|
|
34
|
+
"analytics",
|
|
35
|
+
"content",
|
|
36
|
+
"deep",
|
|
37
|
+
"tree"
|
|
38
|
+
]
|
|
39
|
+
},
|
|
40
|
+
"captured_at": "2026-06-09T18:16:34.245Z",
|
|
41
|
+
"template": [
|
|
42
|
+
{
|
|
43
|
+
"id": "image",
|
|
44
|
+
"component": "Image",
|
|
45
|
+
"slot": "icon",
|
|
46
|
+
"src": "/icons/agent-ui-light.svg"
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"id": "text",
|
|
50
|
+
"component": "Text",
|
|
51
|
+
"variant": "body",
|
|
52
|
+
"slot": "label",
|
|
53
|
+
"textContent": "My App"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"id": "column",
|
|
57
|
+
"component": "Column",
|
|
58
|
+
"slot": "heading",
|
|
59
|
+
"children": [
|
|
60
|
+
"image",
|
|
61
|
+
"text"
|
|
62
|
+
]
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"id": "admin-topbar",
|
|
66
|
+
"component": "AdminTopbar",
|
|
67
|
+
"slot": "header",
|
|
68
|
+
"children": [
|
|
69
|
+
"column"
|
|
70
|
+
]
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
"id": "nav-item",
|
|
74
|
+
"component": "NavItem",
|
|
75
|
+
"icon": "house",
|
|
76
|
+
"selected": true,
|
|
77
|
+
"text": "Dashboard"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"id": "nav-item-2",
|
|
81
|
+
"component": "NavItem",
|
|
82
|
+
"text": "Overview"
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"id": "nav-item-3",
|
|
86
|
+
"component": "NavItem",
|
|
87
|
+
"text": "Funnels"
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"id": "nav-item-4",
|
|
91
|
+
"component": "NavItem",
|
|
92
|
+
"text": "Retention"
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
"id": "nav-group",
|
|
96
|
+
"component": "NavGroup",
|
|
97
|
+
"icon": "chart-line",
|
|
98
|
+
"open": true,
|
|
99
|
+
"text": "Analytics",
|
|
100
|
+
"children": [
|
|
101
|
+
"nav-item-2",
|
|
102
|
+
"nav-item-3",
|
|
103
|
+
"nav-item-4"
|
|
104
|
+
]
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"id": "nav-item-5",
|
|
108
|
+
"component": "NavItem",
|
|
109
|
+
"text": "Pages"
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
"id": "nav-item-6",
|
|
113
|
+
"component": "NavItem",
|
|
114
|
+
"text": "Media"
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"id": "nav-item-7",
|
|
118
|
+
"component": "NavItem",
|
|
119
|
+
"text": "Drafts"
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"id": "nav-group-2",
|
|
123
|
+
"component": "NavGroup",
|
|
124
|
+
"icon": "folders",
|
|
125
|
+
"text": "Content",
|
|
126
|
+
"children": [
|
|
127
|
+
"nav-item-5",
|
|
128
|
+
"nav-item-6",
|
|
129
|
+
"nav-item-7"
|
|
130
|
+
]
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
"id": "divider",
|
|
134
|
+
"component": "Divider",
|
|
135
|
+
"data-nav-divider": ""
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
"id": "nav-item-8",
|
|
139
|
+
"component": "NavItem",
|
|
140
|
+
"icon": "gear",
|
|
141
|
+
"text": "Settings"
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
"id": "nav",
|
|
145
|
+
"component": "Nav",
|
|
146
|
+
"children": [
|
|
147
|
+
"nav-item",
|
|
148
|
+
"nav-group",
|
|
149
|
+
"nav-group-2",
|
|
150
|
+
"divider",
|
|
151
|
+
"nav-item-8"
|
|
152
|
+
]
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
"id": "root",
|
|
156
|
+
"component": "Sidebar",
|
|
157
|
+
"slot": "leading",
|
|
158
|
+
"name": "demo-nav-3",
|
|
159
|
+
"children": [
|
|
160
|
+
"admin-topbar",
|
|
161
|
+
"nav"
|
|
162
|
+
]
|
|
163
|
+
}
|
|
164
|
+
]
|
|
165
|
+
}
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "admin-sidebar-workspace-switcher",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "admin-sidebar",
|
|
5
|
+
"page": "/site/patterns/admin-sidebar.html",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {
|
|
9
|
+
"slot": "leading",
|
|
10
|
+
"name": "demo-sw-1"
|
|
11
|
+
},
|
|
12
|
+
"html": "<admin-sidebar slot=\"leading\" name=\"demo-sw-1\">\n <admin-topbar slot=\"header\">\n <select-ui value=\"adia-studio\" variant=\"ghost\" style=\"flex:1\">\n <option value=\"adia-studio\">Adia Studio</option>\n <option value=\"adia-cloud\">Adia Cloud</option>\n <option value=\"adia-labs\">Adia Labs</option>\n </select-ui>\n </admin-topbar>\n <section-ui>\n <nav-ui>\n <nav-item-ui icon=\"house\" text=\"Home\" selected></nav-item-ui>\n <nav-item-ui icon=\"tray\" text=\"Inbox\"></nav-item-ui>\n <nav-item-ui icon=\"chart-bar\" text=\"Reports\"></nav-item-ui>\n </nav-ui>\n </section-ui>\n <admin-statusbar slot=\"footer\">\n <select-ui value=\"maya\" variant=\"ghost\" style=\"flex:1\">\n <option value=\"maya\">Maya Chen</option>\n <option value=\"alex\">Alex Park</option>\n </select-ui>\n </admin-statusbar>\n </admin-sidebar>",
|
|
13
|
+
"source": "site/pages/patterns/admin-sidebar.html",
|
|
14
|
+
"metadata": {
|
|
15
|
+
"domain": "navigation",
|
|
16
|
+
"description": "Admin sidebar rail with workspace + user switchers — select-ui at both the header band (workspace) and footer band (user), nav rail between. For authenticated multi-workspace apps.",
|
|
17
|
+
"keywords": [
|
|
18
|
+
"admin",
|
|
19
|
+
"sidebar",
|
|
20
|
+
"workspace",
|
|
21
|
+
"switcher",
|
|
22
|
+
"user",
|
|
23
|
+
"select-ui",
|
|
24
|
+
"authenticated",
|
|
25
|
+
"multi-workspace",
|
|
26
|
+
"nav",
|
|
27
|
+
"rail",
|
|
28
|
+
"header",
|
|
29
|
+
"footer",
|
|
30
|
+
"admin-sidebar",
|
|
31
|
+
"admin-topbar",
|
|
32
|
+
"admin-statusbar",
|
|
33
|
+
"navigation",
|
|
34
|
+
"account",
|
|
35
|
+
"team"
|
|
36
|
+
]
|
|
37
|
+
},
|
|
38
|
+
"captured_at": "2026-06-09T18:16:34.245Z",
|
|
39
|
+
"template": [
|
|
40
|
+
{
|
|
41
|
+
"id": "choice-picker",
|
|
42
|
+
"component": "ChoicePicker",
|
|
43
|
+
"value": "adia-studio",
|
|
44
|
+
"variant": "ghost",
|
|
45
|
+
"options": [
|
|
46
|
+
{
|
|
47
|
+
"value": "adia-studio",
|
|
48
|
+
"label": "Adia Studio"
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"value": "adia-cloud",
|
|
52
|
+
"label": "Adia Cloud"
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"value": "adia-labs",
|
|
56
|
+
"label": "Adia Labs"
|
|
57
|
+
}
|
|
58
|
+
]
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"id": "admin-topbar",
|
|
62
|
+
"component": "AdminTopbar",
|
|
63
|
+
"slot": "header",
|
|
64
|
+
"children": [
|
|
65
|
+
"choice-picker"
|
|
66
|
+
]
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"id": "nav-item",
|
|
70
|
+
"component": "NavItem",
|
|
71
|
+
"icon": "house",
|
|
72
|
+
"selected": true,
|
|
73
|
+
"text": "Home"
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"id": "nav-item-2",
|
|
77
|
+
"component": "NavItem",
|
|
78
|
+
"icon": "tray",
|
|
79
|
+
"text": "Inbox"
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"id": "nav-item-3",
|
|
83
|
+
"component": "NavItem",
|
|
84
|
+
"icon": "chart-bar",
|
|
85
|
+
"text": "Reports"
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"id": "nav",
|
|
89
|
+
"component": "Nav",
|
|
90
|
+
"children": [
|
|
91
|
+
"nav-item",
|
|
92
|
+
"nav-item-2",
|
|
93
|
+
"nav-item-3"
|
|
94
|
+
]
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
"id": "choice-picker-2",
|
|
98
|
+
"component": "ChoicePicker",
|
|
99
|
+
"value": "maya",
|
|
100
|
+
"variant": "ghost",
|
|
101
|
+
"options": [
|
|
102
|
+
{
|
|
103
|
+
"value": "maya",
|
|
104
|
+
"label": "Maya Chen"
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"value": "alex",
|
|
108
|
+
"label": "Alex Park"
|
|
109
|
+
}
|
|
110
|
+
]
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
"id": "admin-statusbar",
|
|
114
|
+
"component": "AdminStatusbar",
|
|
115
|
+
"slot": "footer",
|
|
116
|
+
"children": [
|
|
117
|
+
"choice-picker-2"
|
|
118
|
+
]
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
"id": "root",
|
|
122
|
+
"component": "Sidebar",
|
|
123
|
+
"slot": "leading",
|
|
124
|
+
"name": "demo-sw-1",
|
|
125
|
+
"children": [
|
|
126
|
+
"admin-topbar",
|
|
127
|
+
"nav",
|
|
128
|
+
"admin-statusbar"
|
|
129
|
+
]
|
|
130
|
+
}
|
|
131
|
+
]
|
|
132
|
+
}
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "admin-topbar-breadcrumb-actions",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "admin-topbar",
|
|
5
|
+
"page": "/site/patterns/admin-content-topbar.html",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {},
|
|
9
|
+
"html": "<admin-topbar>\n <button-ui data-sidebar-toggle=\"leading\" icon=\"sidebar\" variant=\"ghost\" size=\"sm\" title=\"Toggle sidebar\"></button-ui>\n <breadcrumb-ui>\n <a href=\"#\">Workspace</a>\n <a href=\"#\">Reports</a>\n <span>Q4 Summary</span>\n </breadcrumb-ui>\n <span data-spacer></span>\n <div data-actions>\n <button-ui text=\"Export\" icon=\"download\" variant=\"outline\" size=\"sm\"></button-ui>\n <button-ui text=\"Share\" icon=\"share-network\" variant=\"primary\" size=\"sm\"></button-ui>\n </div>\n </admin-topbar>",
|
|
10
|
+
"source": "site/pages/patterns/admin-content-topbar.html",
|
|
11
|
+
"metadata": {
|
|
12
|
+
"domain": "navigation",
|
|
13
|
+
"description": "Canonical app-chrome topbar — sidebar-toggle, breadcrumb trail, spacer, then a trailing actions cluster (Export, Share). The standard admin-content top band.",
|
|
14
|
+
"keywords": [
|
|
15
|
+
"admin",
|
|
16
|
+
"topbar",
|
|
17
|
+
"breadcrumb",
|
|
18
|
+
"actions",
|
|
19
|
+
"sidebar",
|
|
20
|
+
"toggle",
|
|
21
|
+
"export",
|
|
22
|
+
"share",
|
|
23
|
+
"app",
|
|
24
|
+
"chrome",
|
|
25
|
+
"navigation",
|
|
26
|
+
"admin-topbar",
|
|
27
|
+
"breadcrumb-ui",
|
|
28
|
+
"data-actions",
|
|
29
|
+
"header",
|
|
30
|
+
"band"
|
|
31
|
+
]
|
|
32
|
+
},
|
|
33
|
+
"captured_at": "2026-06-09T18:16:34.245Z",
|
|
34
|
+
"template": [
|
|
35
|
+
{
|
|
36
|
+
"id": "button",
|
|
37
|
+
"component": "Button",
|
|
38
|
+
"icon": "sidebar",
|
|
39
|
+
"size": "sm",
|
|
40
|
+
"variant": "ghost",
|
|
41
|
+
"data-sidebar-toggle": "leading"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"id": "text",
|
|
45
|
+
"component": "Text",
|
|
46
|
+
"textContent": "Workspace",
|
|
47
|
+
"variant": "body"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"id": "link",
|
|
51
|
+
"component": "Link",
|
|
52
|
+
"href": "#",
|
|
53
|
+
"text": "Workspace",
|
|
54
|
+
"children": [
|
|
55
|
+
"text"
|
|
56
|
+
]
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"id": "text-2",
|
|
60
|
+
"component": "Text",
|
|
61
|
+
"textContent": "Reports",
|
|
62
|
+
"variant": "body"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"id": "link-2",
|
|
66
|
+
"component": "Link",
|
|
67
|
+
"href": "#",
|
|
68
|
+
"text": "Reports",
|
|
69
|
+
"children": [
|
|
70
|
+
"text-2"
|
|
71
|
+
]
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"id": "text-3",
|
|
75
|
+
"component": "Text",
|
|
76
|
+
"variant": "body",
|
|
77
|
+
"textContent": "Q4 Summary"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"id": "breadcrumb",
|
|
81
|
+
"component": "Breadcrumb",
|
|
82
|
+
"children": [
|
|
83
|
+
"link",
|
|
84
|
+
"link-2",
|
|
85
|
+
"text-3"
|
|
86
|
+
]
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"id": "text-4",
|
|
90
|
+
"component": "Text",
|
|
91
|
+
"variant": "body",
|
|
92
|
+
"data-spacer": ""
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
"id": "button-2",
|
|
96
|
+
"component": "Button",
|
|
97
|
+
"icon": "download",
|
|
98
|
+
"size": "sm",
|
|
99
|
+
"text": "Export",
|
|
100
|
+
"variant": "outline"
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
"id": "button-3",
|
|
104
|
+
"component": "Button",
|
|
105
|
+
"icon": "share-network",
|
|
106
|
+
"size": "sm",
|
|
107
|
+
"text": "Share",
|
|
108
|
+
"variant": "primary"
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
"id": "column",
|
|
112
|
+
"component": "Column",
|
|
113
|
+
"data-actions": "",
|
|
114
|
+
"children": [
|
|
115
|
+
"button-2",
|
|
116
|
+
"button-3"
|
|
117
|
+
]
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"id": "root",
|
|
121
|
+
"component": "AdminTopbar",
|
|
122
|
+
"children": [
|
|
123
|
+
"button",
|
|
124
|
+
"breadcrumb",
|
|
125
|
+
"text-4",
|
|
126
|
+
"column"
|
|
127
|
+
]
|
|
128
|
+
}
|
|
129
|
+
]
|
|
130
|
+
}
|