wally-ui 1.11.0 → 1.11.1
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/README.md +89 -93
- package/package.json +1 -1
- package/playground/showcase/src/app/components/carousel/carousel.html +33 -1
- package/playground/showcase/src/app/components/carousel/carousel.ts +251 -199
- package/playground/showcase/src/app/pages/documentation/components/breadcrumb-docs/breadcrumb-docs.html +186 -114
- package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.examples.ts +114 -0
- package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.html +516 -248
- package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.ts +11 -0
- package/playground/showcase/src/app/pages/documentation/components/carousel-docs/carousel-docs.html +326 -253
- package/playground/showcase/src/app/pages/documentation/components/components.html +136 -74
- package/playground/showcase/src/app/pages/documentation/components/input-docs/input-docs.html +370 -292
- package/playground/showcase/src/app/pages/documentation/documentation.html +204 -153
- package/playground/showcase/src/app/pages/home/home.html +153 -50
- package/playground/showcase/src/app/pages/home/home.ts +2 -1
- package/playground/showcase/src/app/pages/mcp/mcp.html +235 -179
package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.html
CHANGED
|
@@ -1,32 +1,49 @@
|
|
|
1
|
-
<
|
|
2
|
-
<div class="max-w-4xl mx-auto
|
|
3
|
-
|
|
1
|
+
<main class="min-h-dvh bg-white dark:bg-[#0a0a0a] font-mono" role="main">
|
|
2
|
+
<div class="max-w-4xl mx-auto px-4 py-8 sm:px-6 md:px-8">
|
|
3
|
+
|
|
4
|
+
<!-- Breadcrumb Navigation -->
|
|
5
|
+
<nav class="mb-8" aria-label="Breadcrumb navigation">
|
|
4
6
|
<wally-breadcrumb [items]="breadcrumbItems"></wally-breadcrumb>
|
|
5
|
-
</
|
|
7
|
+
</nav>
|
|
6
8
|
|
|
7
9
|
<!-- Header -->
|
|
8
|
-
<
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
10
|
+
<header class="mb-12" role="banner">
|
|
11
|
+
<h1 id="page-title" class="text-3xl sm:text-4xl font-bold text-[#0a0a0a] dark:text-white mb-4 uppercase">
|
|
12
|
+
<span aria-hidden="true">>_ </span>Button
|
|
13
|
+
</h1>
|
|
14
|
+
<p
|
|
15
|
+
class="text-sm sm:text-base text-neutral-700 dark:text-neutral-300 border-l-2 border-neutral-300 dark:border-neutral-700 pl-4 leading-relaxed">
|
|
16
|
+
Production-ready button component with multiple variants, loading states, notifications, and comprehensive
|
|
17
|
+
accessibility support. Built with Angular Signals and optimized for modern applications.
|
|
18
|
+
</p>
|
|
19
|
+
</header>
|
|
20
|
+
|
|
21
|
+
<!-- AI Assistant Links -->
|
|
22
|
+
<div class="flex flex-wrap gap-0 mt-6 mb-12 border-2 border-neutral-300 dark:border-neutral-700" role="list"
|
|
23
|
+
aria-label="Open documentation in AI coding assistants">
|
|
18
24
|
<a [href]="claudeUrl" target="_blank"
|
|
19
|
-
class="
|
|
20
|
-
|
|
25
|
+
class="group flex-1 min-w-[200px] flex items-center justify-center gap-2 px-4 py-3 bg-white dark:bg-[#0a0a0a] border-b-2 sm:border-b-0 sm:border-r-2 border-neutral-300 dark:border-neutral-700 hover:bg-[#0a0a0a] dark:hover:bg-white transition-all duration-150 cursor-pointer"
|
|
26
|
+
rel="noopener noreferrer" role="listitem"
|
|
27
|
+
aria-label="Open Button component documentation in Claude AI assistant (opens in new tab)">
|
|
28
|
+
<svg xmlns="http://www.w3.org/2000/svg"
|
|
29
|
+
class="size-5 text-[#0a0a0a] dark:text-neutral-400 group-hover:text-white dark:group-hover:text-[#0a0a0a] transition-colors duration-150"
|
|
30
|
+
viewBox="0 0 24 24" aria-hidden="true">
|
|
21
31
|
<path fill="currentColor"
|
|
22
32
|
d="m4.714 15.956l4.718-2.648l.079-.23l-.08-.128h-.23l-.79-.048l-2.695-.073l-2.337-.097l-2.265-.122l-.57-.121l-.535-.704l.055-.353l.48-.321l.685.06l1.518.104l2.277.157l1.651.098l2.447.255h.389l.054-.158l-.133-.097l-.103-.098l-2.356-1.596l-2.55-1.688l-1.336-.972l-.722-.491L2 6.223l-.158-1.008l.656-.722l.88.06l.224.061l.893.686l1.906 1.476l2.49 1.833l.364.304l.146-.104l.018-.072l-.164-.274l-1.354-2.446l-1.445-2.49l-.644-1.032l-.17-.619a3 3 0 0 1-.103-.729L6.287.133L6.7 0l.995.134l.42.364l.619 1.415L9.735 4.14l1.555 3.03l.455.898l.243.832l.09.255h.159V9.01l.127-1.706l.237-2.095l.23-2.695l.08-.76l.376-.91l.747-.492l.583.28l.48.685l-.067.444l-.286 1.851l-.558 2.903l-.365 1.942h.213l.243-.242l.983-1.306l1.652-2.064l.728-.82l.85-.904l.547-.431h1.032l.759 1.129l-.34 1.166l-1.063 1.347l-.88 1.142l-1.263 1.7l-.79 1.36l.074.11l.188-.02l2.853-.606l1.542-.28l1.84-.315l.832.388l.09.395l-.327.807l-1.967.486l-2.307.462l-3.436.813l-.043.03l.049.061l1.548.146l.662.036h1.62l3.018.225l.79.522l.473.638l-.08.485l-1.213.62l-1.64-.389l-3.825-.91l-1.31-.329h-.183v.11l1.093 1.068l2.003 1.81l2.508 2.33l.127.578l-.321.455l-.34-.049l-2.204-1.657l-.85-.747l-1.925-1.62h-.127v.17l.443.649l2.343 3.521l.122 1.08l-.17.353l-.607.213l-.668-.122l-1.372-1.924l-1.415-2.168l-1.141-1.943l-.14.08l-.674 7.254l-.316.37l-.728.28l-.607-.461l-.322-.747l.322-1.476l.388-1.924l.316-1.53l.285-1.9l.17-.632l-.012-.042l-.14.018l-1.432 1.967l-2.18 2.945l-1.724 1.845l-.413.164l-.716-.37l.066-.662l.401-.589l2.386-3.036l1.439-1.882l.929-1.086l-.006-.158h-.055L4.138 18.56l-1.13.146l-.485-.456l.06-.746l.231-.243l1.907-1.312Z" />
|
|
23
33
|
</svg>
|
|
24
|
-
|
|
34
|
+
<span
|
|
35
|
+
class="text-xs sm:text-sm font-medium text-[#0a0a0a] dark:text-neutral-400 group-hover:text-white dark:group-hover:text-[#0a0a0a] transition-colors duration-150">
|
|
36
|
+
Open in Claude
|
|
37
|
+
</span>
|
|
25
38
|
</a>
|
|
26
39
|
|
|
27
40
|
<a [href]="chatGptUrl" target="_blank"
|
|
28
|
-
class="
|
|
29
|
-
|
|
41
|
+
class="group flex-1 min-w-[200px] flex items-center justify-center gap-2 px-4 py-3 bg-white dark:bg-[#0a0a0a] hover:bg-[#0a0a0a] dark:hover:bg-white transition-all duration-150 cursor-pointer"
|
|
42
|
+
rel="noopener noreferrer" role="listitem"
|
|
43
|
+
aria-label="Open Button component documentation in ChatGPT AI assistant (opens in new tab)">
|
|
44
|
+
<svg xmlns="http://www.w3.org/2000/svg"
|
|
45
|
+
class="size-5 text-[#0a0a0a] dark:text-neutral-400 group-hover:text-white dark:group-hover:text-[#0a0a0a] transition-colors duration-150"
|
|
46
|
+
viewBox="0 0 48 48" aria-hidden="true">
|
|
30
47
|
<path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
|
|
31
48
|
d="M18.38 27.94v-14.4l11.19-6.46c6.2-3.58 17.3 5.25 12.64 13.33" />
|
|
32
49
|
<path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
|
|
@@ -40,46 +57,65 @@
|
|
|
40
57
|
<path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
|
|
41
58
|
d="m24.44 31.44l-12.47-7.2V11.31c0-7.16 13.2-12.36 17.86-4.28" />
|
|
42
59
|
</svg>
|
|
43
|
-
|
|
60
|
+
<span
|
|
61
|
+
class="text-xs sm:text-sm font-medium text-[#0a0a0a] dark:text-neutral-400 group-hover:text-white dark:group-hover:text-[#0a0a0a] transition-colors duration-150">
|
|
62
|
+
Open in ChatGPT
|
|
63
|
+
</span>
|
|
44
64
|
</a>
|
|
45
65
|
</div>
|
|
46
66
|
|
|
47
67
|
<!-- Installation -->
|
|
48
|
-
<section class="mb-
|
|
49
|
-
<h2
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
</
|
|
68
|
+
<section id="installation" class="mb-12" aria-labelledby="installation-heading">
|
|
69
|
+
<h2 id="installation-heading"
|
|
70
|
+
class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
71
|
+
[ Installation ]
|
|
72
|
+
</h2>
|
|
73
|
+
<code
|
|
74
|
+
class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white block bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3"
|
|
75
|
+
aria-label="Installation command for Button component">
|
|
76
|
+
<pre><code [innerHTML]="basicUsageCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
77
|
+
</code>
|
|
53
78
|
</section>
|
|
54
79
|
|
|
55
80
|
<!-- Import -->
|
|
56
|
-
<section class="mb-
|
|
57
|
-
<h2
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
81
|
+
<section id="import" class="mb-12" aria-labelledby="import-heading">
|
|
82
|
+
<h2 id="import-heading"
|
|
83
|
+
class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
84
|
+
[ Import ]
|
|
85
|
+
</h2>
|
|
86
|
+
<div class="space-y-3">
|
|
87
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
88
|
+
<pre><code [innerHTML]="importCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
61
89
|
</div>
|
|
62
|
-
<div class="bg-
|
|
63
|
-
<pre><code [innerHTML]="componentImportCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
90
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
91
|
+
<pre><code [innerHTML]="componentImportCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
64
92
|
</div>
|
|
65
93
|
</div>
|
|
66
94
|
</section>
|
|
67
95
|
|
|
68
96
|
<!-- Basic Usage -->
|
|
69
|
-
<section class="mb-
|
|
70
|
-
<h2
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
</
|
|
74
|
-
<div class="
|
|
97
|
+
<section id="basic-usage" class="mb-12" aria-labelledby="basic-usage-heading">
|
|
98
|
+
<h2 id="basic-usage-heading"
|
|
99
|
+
class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
100
|
+
[ Basic Usage ]
|
|
101
|
+
</h2>
|
|
102
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
103
|
+
<pre><code [innerHTML]="basicUsageTemplateCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
104
|
+
</div>
|
|
105
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
106
|
+
aria-label="Live preview of basic button">
|
|
75
107
|
<wally-button>Click me</wally-button>
|
|
76
108
|
</div>
|
|
77
109
|
</section>
|
|
78
110
|
|
|
79
111
|
<!-- All Variants Preview -->
|
|
80
|
-
<section class="mb-
|
|
81
|
-
<h2
|
|
82
|
-
|
|
112
|
+
<section id="all-variants" class="mb-12" aria-labelledby="variants-preview-heading">
|
|
113
|
+
<h2 id="variants-preview-heading"
|
|
114
|
+
class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
115
|
+
[ All Variants ]
|
|
116
|
+
</h2>
|
|
117
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
118
|
+
aria-label="Live preview of all button variants">
|
|
83
119
|
<div class="flex flex-col gap-4">
|
|
84
120
|
<wally-button variant="primary">Primary</wally-button>
|
|
85
121
|
<wally-button variant="secondary">Secondary</wally-button>
|
|
@@ -92,129 +128,163 @@
|
|
|
92
128
|
</section>
|
|
93
129
|
|
|
94
130
|
<!-- Variants Documentation -->
|
|
95
|
-
<section class="mb-
|
|
96
|
-
<h2
|
|
131
|
+
<section id="variants" class="mb-12" aria-labelledby="variants-heading">
|
|
132
|
+
<h2 id="variants-heading"
|
|
133
|
+
class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
134
|
+
[ Variants ]
|
|
135
|
+
</h2>
|
|
97
136
|
|
|
98
137
|
<!-- Primary -->
|
|
99
|
-
<
|
|
100
|
-
<h3
|
|
101
|
-
|
|
138
|
+
<article class="mb-8" aria-labelledby="primary-variant-heading">
|
|
139
|
+
<h3 id="primary-variant-heading"
|
|
140
|
+
class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
141
|
+
<span aria-hidden="true">> </span>Primary (Default)
|
|
142
|
+
</h3>
|
|
143
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-3 leading-relaxed">
|
|
102
144
|
High emphasis. Use for main actions and CTAs.
|
|
103
145
|
</p>
|
|
104
|
-
<div class="bg-
|
|
105
|
-
<pre><code [innerHTML]="primaryVariantCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
146
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
147
|
+
<pre><code [innerHTML]="primaryVariantCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
106
148
|
</div>
|
|
107
|
-
<div class="p-
|
|
108
|
-
|
|
149
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
150
|
+
aria-label="Live preview of primary button variant in normal, disabled, and loading states">
|
|
151
|
+
<div class="flex flex-col gap-4">
|
|
109
152
|
<wally-button variant="primary">Primary</wally-button>
|
|
110
153
|
<wally-button variant="primary" [disabled]="true">Disabled</wally-button>
|
|
111
154
|
<wally-button variant="primary" [loading]="true">Loading</wally-button>
|
|
112
155
|
</div>
|
|
113
156
|
</div>
|
|
114
|
-
</
|
|
157
|
+
</article>
|
|
115
158
|
|
|
116
159
|
<!-- Secondary -->
|
|
117
|
-
<
|
|
118
|
-
<h3
|
|
119
|
-
|
|
160
|
+
<article class="mb-8" aria-labelledby="secondary-variant-heading">
|
|
161
|
+
<h3 id="secondary-variant-heading"
|
|
162
|
+
class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
163
|
+
<span aria-hidden="true">> </span>Secondary
|
|
164
|
+
</h3>
|
|
165
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-3 leading-relaxed">
|
|
120
166
|
Medium emphasis. Use for secondary actions.
|
|
121
167
|
</p>
|
|
122
|
-
<div class="bg-
|
|
123
|
-
<pre><code [innerHTML]="secondaryVariantCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
168
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
169
|
+
<pre><code [innerHTML]="secondaryVariantCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
124
170
|
</div>
|
|
125
|
-
<div class="p-
|
|
126
|
-
|
|
171
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
172
|
+
aria-label="Live preview of secondary button variant in normal, disabled, and loading states">
|
|
173
|
+
<div class="flex flex-col gap-4">
|
|
127
174
|
<wally-button variant="secondary">Secondary</wally-button>
|
|
128
175
|
<wally-button variant="secondary" [disabled]="true">Disabled</wally-button>
|
|
129
176
|
<wally-button variant="secondary" [loading]="true">Loading</wally-button>
|
|
130
177
|
</div>
|
|
131
178
|
</div>
|
|
132
|
-
</
|
|
179
|
+
</article>
|
|
133
180
|
|
|
134
181
|
<!-- Destructive -->
|
|
135
|
-
<
|
|
136
|
-
<h3
|
|
137
|
-
|
|
182
|
+
<article class="mb-8" aria-labelledby="destructive-variant-heading">
|
|
183
|
+
<h3 id="destructive-variant-heading"
|
|
184
|
+
class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
185
|
+
<span aria-hidden="true">> </span>Destructive
|
|
186
|
+
</h3>
|
|
187
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-3 leading-relaxed">
|
|
138
188
|
Use for dangerous actions like delete or remove.
|
|
139
189
|
</p>
|
|
140
|
-
<div class="bg-
|
|
141
|
-
<pre><code [innerHTML]="destructiveVariantCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
190
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
191
|
+
<pre><code [innerHTML]="destructiveVariantCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
142
192
|
</div>
|
|
143
|
-
<div class="p-
|
|
144
|
-
|
|
193
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
194
|
+
aria-label="Live preview of destructive button variant in normal, disabled, and loading states">
|
|
195
|
+
<div class="flex flex-col gap-4">
|
|
145
196
|
<wally-button variant="destructive">Delete</wally-button>
|
|
146
197
|
<wally-button variant="destructive" [disabled]="true">Disabled</wally-button>
|
|
147
198
|
<wally-button variant="destructive" [loading]="true">Deleting...</wally-button>
|
|
148
199
|
</div>
|
|
149
200
|
</div>
|
|
150
|
-
</
|
|
201
|
+
</article>
|
|
151
202
|
|
|
152
203
|
<!-- Outline -->
|
|
153
|
-
<
|
|
154
|
-
<h3
|
|
155
|
-
|
|
204
|
+
<article class="mb-8" aria-labelledby="outline-variant-heading">
|
|
205
|
+
<h3 id="outline-variant-heading"
|
|
206
|
+
class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
207
|
+
<span aria-hidden="true">> </span>Outline
|
|
208
|
+
</h3>
|
|
209
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-3 leading-relaxed">
|
|
156
210
|
Low emphasis with border. Use for tertiary actions.
|
|
157
211
|
</p>
|
|
158
|
-
<div class="bg-
|
|
159
|
-
<pre><code [innerHTML]="outlineVariantCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
212
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
213
|
+
<pre><code [innerHTML]="outlineVariantCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
160
214
|
</div>
|
|
161
|
-
<div class="p-
|
|
162
|
-
|
|
215
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
216
|
+
aria-label="Live preview of outline button variant in normal, disabled, and loading states">
|
|
217
|
+
<div class="flex flex-col gap-4">
|
|
163
218
|
<wally-button variant="outline">Outline</wally-button>
|
|
164
219
|
<wally-button variant="outline" [disabled]="true">Disabled</wally-button>
|
|
165
220
|
<wally-button variant="outline" [loading]="true">Loading</wally-button>
|
|
166
221
|
</div>
|
|
167
222
|
</div>
|
|
168
|
-
</
|
|
223
|
+
</article>
|
|
169
224
|
|
|
170
225
|
<!-- Ghost -->
|
|
171
|
-
<
|
|
172
|
-
<h3
|
|
173
|
-
|
|
226
|
+
<article class="mb-8" aria-labelledby="ghost-variant-heading">
|
|
227
|
+
<h3 id="ghost-variant-heading"
|
|
228
|
+
class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
229
|
+
<span aria-hidden="true">> </span>Ghost
|
|
230
|
+
</h3>
|
|
231
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-3 leading-relaxed">
|
|
174
232
|
Minimal styling. Use for less prominent actions.
|
|
175
233
|
</p>
|
|
176
|
-
<div class="bg-
|
|
177
|
-
<pre><code [innerHTML]="ghostVariantCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
234
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
235
|
+
<pre><code [innerHTML]="ghostVariantCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
178
236
|
</div>
|
|
179
|
-
<div class="p-
|
|
180
|
-
|
|
237
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
238
|
+
aria-label="Live preview of ghost button variant in normal, disabled, and loading states">
|
|
239
|
+
<div class="flex flex-col gap-4">
|
|
181
240
|
<wally-button variant="ghost">Ghost</wally-button>
|
|
182
241
|
<wally-button variant="ghost" [disabled]="true">Disabled</wally-button>
|
|
183
242
|
<wally-button variant="ghost" [loading]="true">Loading</wally-button>
|
|
184
243
|
</div>
|
|
185
244
|
</div>
|
|
186
|
-
</
|
|
245
|
+
</article>
|
|
187
246
|
|
|
188
247
|
<!-- Link -->
|
|
189
|
-
<
|
|
190
|
-
<h3
|
|
191
|
-
|
|
248
|
+
<article class="mb-8" aria-labelledby="link-variant-heading">
|
|
249
|
+
<h3 id="link-variant-heading"
|
|
250
|
+
class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
251
|
+
<span aria-hidden="true">> </span>Link
|
|
252
|
+
</h3>
|
|
253
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-3 leading-relaxed">
|
|
192
254
|
Styled as a link. Supports internal routing and external URLs.
|
|
193
255
|
</p>
|
|
194
|
-
<div class="bg-
|
|
195
|
-
<pre><code [innerHTML]="linkVariantCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
256
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
257
|
+
<pre><code [innerHTML]="linkVariantCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
196
258
|
</div>
|
|
197
|
-
<div class="p-
|
|
198
|
-
|
|
259
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
260
|
+
aria-label="Live preview of link button variant with internal route, external URL, and disabled state">
|
|
261
|
+
<div class="flex flex-col gap-4">
|
|
199
262
|
<wally-button variant="link" href="/components">Internal Link</wally-button>
|
|
200
263
|
<wally-button variant="link" href="https://github.com">External Link</wally-button>
|
|
201
264
|
<wally-button variant="link" [disabled]="true">Disabled</wally-button>
|
|
202
265
|
</div>
|
|
203
266
|
</div>
|
|
204
|
-
</
|
|
267
|
+
</article>
|
|
205
268
|
</section>
|
|
206
269
|
|
|
207
270
|
<!-- Production Examples -->
|
|
208
|
-
<section class="mb-
|
|
209
|
-
<h2
|
|
271
|
+
<section id="production-examples" class="mb-12" aria-labelledby="production-heading">
|
|
272
|
+
<h2 id="production-heading"
|
|
273
|
+
class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
274
|
+
[ Production Examples ]
|
|
275
|
+
</h2>
|
|
210
276
|
|
|
211
277
|
<!-- CTA -->
|
|
212
|
-
<
|
|
213
|
-
<h3
|
|
214
|
-
|
|
215
|
-
<
|
|
216
|
-
</
|
|
217
|
-
<div class="
|
|
278
|
+
<article class="mb-8" aria-labelledby="cta-example-heading">
|
|
279
|
+
<h3 id="cta-example-heading"
|
|
280
|
+
class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
281
|
+
<span aria-hidden="true">> </span>Call-to-Action Button
|
|
282
|
+
</h3>
|
|
283
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
284
|
+
<pre><code [innerHTML]="ctaExampleCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
285
|
+
</div>
|
|
286
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
287
|
+
aria-label="Live preview of call-to-action button with icon">
|
|
218
288
|
<wally-button>
|
|
219
289
|
Get Started Free
|
|
220
290
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
|
@@ -223,48 +293,60 @@
|
|
|
223
293
|
</svg>
|
|
224
294
|
</wally-button>
|
|
225
295
|
</div>
|
|
226
|
-
</
|
|
296
|
+
</article>
|
|
227
297
|
|
|
228
298
|
<!-- Login Form -->
|
|
229
|
-
<
|
|
230
|
-
<h3
|
|
231
|
-
|
|
232
|
-
<
|
|
233
|
-
|
|
299
|
+
<article class="mb-8" aria-labelledby="login-example-heading">
|
|
300
|
+
<h3 id="login-example-heading"
|
|
301
|
+
class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
302
|
+
<span aria-hidden="true">> </span>Login Form
|
|
303
|
+
</h3>
|
|
304
|
+
<div class="space-y-3">
|
|
305
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
306
|
+
<pre><code [innerHTML]="loginExampleCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
234
307
|
</div>
|
|
235
|
-
<div class="bg-
|
|
236
|
-
<pre><code [innerHTML]="loginExampleTsCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
308
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
309
|
+
<pre><code [innerHTML]="loginExampleTsCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
237
310
|
</div>
|
|
238
311
|
</div>
|
|
239
|
-
<div class="p-
|
|
312
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a] mt-4" role="img"
|
|
313
|
+
aria-label="Live preview of login form buttons with primary submit and secondary create account">
|
|
240
314
|
<div class="flex gap-2">
|
|
241
315
|
<wally-button type="submit">Sign In</wally-button>
|
|
242
316
|
<wally-button variant="secondary">Create Account</wally-button>
|
|
243
317
|
</div>
|
|
244
318
|
</div>
|
|
245
|
-
</
|
|
319
|
+
</article>
|
|
246
320
|
|
|
247
321
|
<!-- Delete Confirmation -->
|
|
248
|
-
<
|
|
249
|
-
<h3
|
|
250
|
-
|
|
251
|
-
<
|
|
252
|
-
</
|
|
253
|
-
<div class="
|
|
322
|
+
<article class="mb-8" aria-labelledby="delete-example-heading">
|
|
323
|
+
<h3 id="delete-example-heading"
|
|
324
|
+
class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
325
|
+
<span aria-hidden="true">> </span>Delete Confirmation Modal
|
|
326
|
+
</h3>
|
|
327
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
328
|
+
<pre><code [innerHTML]="deleteExampleCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
329
|
+
</div>
|
|
330
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
331
|
+
aria-label="Live preview of delete confirmation modal buttons with ghost cancel and destructive delete">
|
|
254
332
|
<div class="flex gap-2 justify-end">
|
|
255
333
|
<wally-button variant="ghost">Cancel</wally-button>
|
|
256
334
|
<wally-button variant="destructive">Delete Account</wally-button>
|
|
257
335
|
</div>
|
|
258
336
|
</div>
|
|
259
|
-
</
|
|
337
|
+
</article>
|
|
260
338
|
|
|
261
339
|
<!-- Dashboard Actions -->
|
|
262
|
-
<
|
|
263
|
-
<h3
|
|
264
|
-
|
|
265
|
-
<
|
|
266
|
-
</
|
|
267
|
-
<div class="
|
|
340
|
+
<article class="mb-8" aria-labelledby="dashboard-example-heading">
|
|
341
|
+
<h3 id="dashboard-example-heading"
|
|
342
|
+
class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
343
|
+
<span aria-hidden="true">> </span>Dashboard Actions
|
|
344
|
+
</h3>
|
|
345
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
346
|
+
<pre><code [innerHTML]="dashboardExampleCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
347
|
+
</div>
|
|
348
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
349
|
+
aria-label="Live preview of dashboard action buttons with outline export and primary create new">
|
|
268
350
|
<div class="flex gap-2">
|
|
269
351
|
<wally-button variant="outline">
|
|
270
352
|
Export
|
|
@@ -283,42 +365,57 @@
|
|
|
283
365
|
</wally-button>
|
|
284
366
|
</div>
|
|
285
367
|
</div>
|
|
286
|
-
</
|
|
368
|
+
</article>
|
|
287
369
|
</section>
|
|
288
370
|
|
|
289
371
|
<!-- States -->
|
|
290
|
-
<section class="mb-
|
|
291
|
-
<h2
|
|
372
|
+
<section id="states" class="mb-12" aria-labelledby="states-heading">
|
|
373
|
+
<h2 id="states-heading"
|
|
374
|
+
class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
375
|
+
[ States ]
|
|
376
|
+
</h2>
|
|
292
377
|
|
|
293
378
|
<!-- Disabled -->
|
|
294
|
-
<
|
|
295
|
-
<h3
|
|
296
|
-
|
|
297
|
-
<
|
|
298
|
-
</
|
|
299
|
-
<div class="
|
|
379
|
+
<article class="mb-8" aria-labelledby="disabled-state-heading">
|
|
380
|
+
<h3 id="disabled-state-heading"
|
|
381
|
+
class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
382
|
+
<span aria-hidden="true">> </span>Disabled
|
|
383
|
+
</h3>
|
|
384
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
385
|
+
<pre><code [innerHTML]="disabledCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
386
|
+
</div>
|
|
387
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
388
|
+
aria-label="Live preview of disabled button state">
|
|
300
389
|
<wally-button [disabled]="true">Disabled Button</wally-button>
|
|
301
390
|
</div>
|
|
302
|
-
</
|
|
391
|
+
</article>
|
|
303
392
|
|
|
304
393
|
<!-- Loading -->
|
|
305
|
-
<
|
|
306
|
-
<h3
|
|
307
|
-
|
|
308
|
-
<
|
|
309
|
-
</
|
|
310
|
-
<div class="
|
|
394
|
+
<article class="mb-8" aria-labelledby="loading-state-heading">
|
|
395
|
+
<h3 id="loading-state-heading"
|
|
396
|
+
class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
397
|
+
<span aria-hidden="true">> </span>Loading
|
|
398
|
+
</h3>
|
|
399
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
400
|
+
<pre><code [innerHTML]="loadingCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
401
|
+
</div>
|
|
402
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
403
|
+
aria-label="Live preview of loading button state with spinner">
|
|
311
404
|
<wally-button [loading]="true">Loading...</wally-button>
|
|
312
405
|
</div>
|
|
313
|
-
</
|
|
406
|
+
</article>
|
|
314
407
|
|
|
315
408
|
<!-- Notification -->
|
|
316
|
-
<
|
|
317
|
-
<h3
|
|
318
|
-
|
|
319
|
-
<
|
|
320
|
-
</
|
|
321
|
-
<div class="
|
|
409
|
+
<article class="mb-8" aria-labelledby="notification-state-heading">
|
|
410
|
+
<h3 id="notification-state-heading"
|
|
411
|
+
class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
412
|
+
<span aria-hidden="true">> </span>With Notification Badge
|
|
413
|
+
</h3>
|
|
414
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
415
|
+
<pre><code [innerHTML]="notificationButtonCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
416
|
+
</div>
|
|
417
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
418
|
+
aria-label="Live preview of button with notification badge indicator">
|
|
322
419
|
<wally-button [showNotification]="true" ariaLabel="View messages">
|
|
323
420
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
324
421
|
stroke="currentColor" class="size-5">
|
|
@@ -327,50 +424,65 @@
|
|
|
327
424
|
</svg>
|
|
328
425
|
</wally-button>
|
|
329
426
|
</div>
|
|
330
|
-
</
|
|
427
|
+
</article>
|
|
331
428
|
</section>
|
|
332
429
|
|
|
333
430
|
<!-- Button Types -->
|
|
334
|
-
<section class="mb-
|
|
335
|
-
<h2
|
|
431
|
+
<section id="button-types" class="mb-12" aria-labelledby="types-heading">
|
|
432
|
+
<h2 id="types-heading"
|
|
433
|
+
class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
434
|
+
[ Button Types ]
|
|
435
|
+
</h2>
|
|
336
436
|
|
|
337
437
|
<!-- Submit -->
|
|
338
|
-
<
|
|
339
|
-
<h3
|
|
340
|
-
|
|
341
|
-
<
|
|
342
|
-
</
|
|
343
|
-
<div class="
|
|
438
|
+
<article class="mb-8" aria-labelledby="submit-type-heading">
|
|
439
|
+
<h3 id="submit-type-heading"
|
|
440
|
+
class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
441
|
+
<span aria-hidden="true">> </span>Submit Button
|
|
442
|
+
</h3>
|
|
443
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
444
|
+
<pre><code [innerHTML]="submitCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
445
|
+
</div>
|
|
446
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
447
|
+
aria-label="Live preview of submit type button for form submission">
|
|
344
448
|
<wally-button type="submit">Submit Form</wally-button>
|
|
345
449
|
</div>
|
|
346
|
-
</
|
|
450
|
+
</article>
|
|
347
451
|
|
|
348
452
|
<!-- Reset -->
|
|
349
|
-
<
|
|
350
|
-
<h3
|
|
351
|
-
|
|
352
|
-
<
|
|
353
|
-
</
|
|
354
|
-
<div class="
|
|
453
|
+
<article class="mb-8" aria-labelledby="reset-type-heading">
|
|
454
|
+
<h3 id="reset-type-heading"
|
|
455
|
+
class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
456
|
+
<span aria-hidden="true">> </span>Reset Button
|
|
457
|
+
</h3>
|
|
458
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
459
|
+
<pre><code [innerHTML]="resetCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
460
|
+
</div>
|
|
461
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
462
|
+
aria-label="Live preview of reset type button for form reset">
|
|
355
463
|
<wally-button type="reset" variant="ghost">Reset</wally-button>
|
|
356
464
|
</div>
|
|
357
|
-
</
|
|
465
|
+
</article>
|
|
358
466
|
</section>
|
|
359
467
|
|
|
360
468
|
<!-- Events -->
|
|
361
|
-
<section class="mb-
|
|
362
|
-
<h2
|
|
469
|
+
<section id="events" class="mb-12" aria-labelledby="events-heading">
|
|
470
|
+
<h2 id="events-heading"
|
|
471
|
+
class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
472
|
+
[ Click Events ]
|
|
473
|
+
</h2>
|
|
363
474
|
|
|
364
|
-
<div class="space-y-4">
|
|
365
|
-
<div class="bg-
|
|
366
|
-
<pre><code [innerHTML]="clickCodeHTML" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
475
|
+
<div class="space-y-3 mb-4">
|
|
476
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
477
|
+
<pre><code [innerHTML]="clickCodeHTML" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
367
478
|
</div>
|
|
368
|
-
<div class="bg-
|
|
369
|
-
<pre><code [innerHTML]="clickCodeTs" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
479
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
480
|
+
<pre><code [innerHTML]="clickCodeTs" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
370
481
|
</div>
|
|
371
482
|
</div>
|
|
372
483
|
|
|
373
|
-
<div class="p-
|
|
484
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
485
|
+
aria-label="Live preview of button click event handling with feedback message">
|
|
374
486
|
<div class="flex flex-col gap-2 text-center">
|
|
375
487
|
<wally-button (click)="handleClick()">Click Me</wally-button>
|
|
376
488
|
@if (clickMessage()) {
|
|
@@ -383,16 +495,22 @@
|
|
|
383
495
|
</section>
|
|
384
496
|
|
|
385
497
|
<!-- Icons -->
|
|
386
|
-
<section class="mb-
|
|
387
|
-
<h2
|
|
498
|
+
<section id="icons" class="mb-12" aria-labelledby="icons-heading">
|
|
499
|
+
<h2 id="icons-heading"
|
|
500
|
+
class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
501
|
+
[ Button with Icons ]
|
|
502
|
+
</h2>
|
|
388
503
|
|
|
389
504
|
<!-- Icon with Text -->
|
|
390
|
-
<
|
|
391
|
-
<h3 class="text-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
505
|
+
<article class="mb-8" aria-labelledby="icon-text-heading">
|
|
506
|
+
<h3 id="icon-text-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
507
|
+
<span aria-hidden="true">> </span>Icon with Text
|
|
508
|
+
</h3>
|
|
509
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
510
|
+
<pre><code [innerHTML]="iconCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
511
|
+
</div>
|
|
512
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
513
|
+
aria-label="Live preview of button with text and icon on the right">
|
|
396
514
|
<wally-button>
|
|
397
515
|
Save Changes
|
|
398
516
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
@@ -402,15 +520,18 @@
|
|
|
402
520
|
</svg>
|
|
403
521
|
</wally-button>
|
|
404
522
|
</div>
|
|
405
|
-
</
|
|
523
|
+
</article>
|
|
406
524
|
|
|
407
525
|
<!-- Icon Only -->
|
|
408
|
-
<
|
|
409
|
-
<h3 class="text-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
526
|
+
<article class="mb-8" aria-labelledby="icon-only-heading">
|
|
527
|
+
<h3 id="icon-only-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
528
|
+
<span aria-hidden="true">> </span>Icon Only
|
|
529
|
+
</h3>
|
|
530
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
531
|
+
<pre><code [innerHTML]="iconOnlyCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
532
|
+
</div>
|
|
533
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
534
|
+
aria-label="Live preview of icon-only button with ARIA label">
|
|
414
535
|
<wally-button ariaLabel="Notifications">
|
|
415
536
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
416
537
|
stroke="currentColor" class="size-5">
|
|
@@ -419,15 +540,18 @@
|
|
|
419
540
|
</svg>
|
|
420
541
|
</wally-button>
|
|
421
542
|
</div>
|
|
422
|
-
</
|
|
543
|
+
</article>
|
|
423
544
|
|
|
424
545
|
<!-- Icon Left -->
|
|
425
|
-
<
|
|
426
|
-
<h3 class="text-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
546
|
+
<article class="mb-8" aria-labelledby="icon-left-heading">
|
|
547
|
+
<h3 id="icon-left-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
548
|
+
<span aria-hidden="true">> </span>Icon Left
|
|
549
|
+
</h3>
|
|
550
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
551
|
+
<pre><code [innerHTML]="iconLeftCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
552
|
+
</div>
|
|
553
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
554
|
+
aria-label="Live preview of button with icon on the left and text on the right">
|
|
431
555
|
<wally-button>
|
|
432
556
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
|
433
557
|
stroke="currentColor" class="size-5">
|
|
@@ -436,21 +560,27 @@
|
|
|
436
560
|
Back
|
|
437
561
|
</wally-button>
|
|
438
562
|
</div>
|
|
439
|
-
</
|
|
563
|
+
</article>
|
|
440
564
|
</section>
|
|
441
565
|
|
|
442
566
|
<!-- Accessibility -->
|
|
443
|
-
<section class="mb-
|
|
444
|
-
<h2
|
|
567
|
+
<section id="accessibility" class="mb-12" aria-labelledby="accessibility-heading">
|
|
568
|
+
<h2 id="accessibility-heading"
|
|
569
|
+
class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
570
|
+
[ Accessibility ]
|
|
571
|
+
</h2>
|
|
445
572
|
|
|
446
573
|
<!-- ARIA Label -->
|
|
447
|
-
<
|
|
448
|
-
<h3
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
574
|
+
<article class="mb-8" aria-labelledby="aria-label-heading">
|
|
575
|
+
<h3 id="aria-label-heading"
|
|
576
|
+
class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
577
|
+
<span aria-hidden="true">> </span>ARIA Label (Essential for Icon-Only Buttons)
|
|
578
|
+
</h3>
|
|
579
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
580
|
+
<pre><code [innerHTML]="ariaLabelCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
581
|
+
</div>
|
|
582
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
583
|
+
aria-label="Live preview of icon-only button with ARIA label for screen readers">
|
|
454
584
|
<wally-button ariaLabel="Save document">
|
|
455
585
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
456
586
|
stroke="currentColor" class="size-5">
|
|
@@ -459,56 +589,72 @@
|
|
|
459
589
|
</svg>
|
|
460
590
|
</wally-button>
|
|
461
591
|
</div>
|
|
462
|
-
</
|
|
592
|
+
</article>
|
|
463
593
|
|
|
464
594
|
<!-- Toggle Button -->
|
|
465
|
-
<
|
|
466
|
-
<h3
|
|
467
|
-
|
|
468
|
-
<
|
|
469
|
-
</
|
|
470
|
-
<div class="
|
|
595
|
+
<article class="mb-8" aria-labelledby="aria-pressed-heading">
|
|
596
|
+
<h3 id="aria-pressed-heading"
|
|
597
|
+
class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
598
|
+
<span aria-hidden="true">> </span>Toggle Button with ARIA Pressed
|
|
599
|
+
</h3>
|
|
600
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
601
|
+
<pre><code [innerHTML]="ariaPressedCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
602
|
+
</div>
|
|
603
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
604
|
+
aria-label="Live preview of toggle button with ARIA pressed state">
|
|
471
605
|
<wally-button [ariaPressed]="toggleState()">
|
|
472
606
|
{{ toggleState() ? 'On' : 'Off' }}
|
|
473
607
|
</wally-button>
|
|
474
608
|
</div>
|
|
475
|
-
</
|
|
609
|
+
</article>
|
|
476
610
|
|
|
477
611
|
<!-- Loading State ARIA -->
|
|
478
|
-
<
|
|
479
|
-
<h3 class="text-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
612
|
+
<article class="mb-8" aria-labelledby="aria-busy-heading">
|
|
613
|
+
<h3 id="aria-busy-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
614
|
+
<span aria-hidden="true">> </span>Loading State (Automatic ARIA Busy)
|
|
615
|
+
</h3>
|
|
616
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
617
|
+
<pre><code [innerHTML]="ariaBusyCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
618
|
+
</div>
|
|
619
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
620
|
+
aria-label="Live preview of button in loading state with automatic ARIA busy attribute">
|
|
484
621
|
<wally-button [loading]="true">Processing...</wally-button>
|
|
485
622
|
</div>
|
|
486
|
-
</
|
|
623
|
+
</article>
|
|
487
624
|
|
|
488
625
|
<!-- ARIA Described By -->
|
|
489
|
-
<
|
|
490
|
-
<h3
|
|
491
|
-
|
|
492
|
-
<
|
|
493
|
-
</
|
|
494
|
-
<div class="
|
|
626
|
+
<article class="mb-8" aria-labelledby="aria-describedby-heading">
|
|
627
|
+
<h3 id="aria-describedby-heading"
|
|
628
|
+
class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
629
|
+
<span aria-hidden="true">> </span>ARIA Described By
|
|
630
|
+
</h3>
|
|
631
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
632
|
+
<pre><code [innerHTML]="ariaDescribedByCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
633
|
+
</div>
|
|
634
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
635
|
+
aria-label="Live preview of button with ARIA described by attribute linking to description element">
|
|
495
636
|
<wally-button ariaDescribedBy="save-description">Save</wally-button>
|
|
496
|
-
<p id="save-description" class="text-xs text-
|
|
637
|
+
<p id="save-description" class="text-xs text-neutral-600 dark:text-neutral-400 mt-2">
|
|
497
638
|
Saves your changes permanently
|
|
498
639
|
</p>
|
|
499
640
|
</div>
|
|
500
|
-
</
|
|
641
|
+
</article>
|
|
501
642
|
</section>
|
|
502
643
|
|
|
503
644
|
<!-- API Reference -->
|
|
504
|
-
<section class="mb-
|
|
505
|
-
<h2
|
|
645
|
+
<section id="api-reference" class="mb-12" aria-labelledby="api-heading">
|
|
646
|
+
<h2 id="api-heading"
|
|
647
|
+
class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
648
|
+
[ API Reference ]
|
|
649
|
+
</h2>
|
|
506
650
|
|
|
507
651
|
<!-- Input Properties -->
|
|
508
|
-
<
|
|
509
|
-
<h3
|
|
510
|
-
|
|
511
|
-
|
|
652
|
+
<article class="mb-8" aria-labelledby="input-properties-heading">
|
|
653
|
+
<h3 id="input-properties-heading"
|
|
654
|
+
class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-4 uppercase">
|
|
655
|
+
<span aria-hidden="true">> </span>Input Properties
|
|
656
|
+
</h3>
|
|
657
|
+
<div class="bg-white dark:bg-[#0f0f0f] border-2 border-neutral-300 dark:border-neutral-800 overflow-hidden">
|
|
512
658
|
<div class="overflow-x-auto">
|
|
513
659
|
<table class="w-full text-sm">
|
|
514
660
|
<thead class="bg-gray-50 dark:bg-gray-900">
|
|
@@ -587,13 +733,15 @@
|
|
|
587
733
|
</table>
|
|
588
734
|
</div>
|
|
589
735
|
</div>
|
|
590
|
-
</
|
|
736
|
+
</article>
|
|
591
737
|
|
|
592
738
|
<!-- Output Events -->
|
|
593
|
-
<
|
|
594
|
-
<h3
|
|
595
|
-
|
|
596
|
-
|
|
739
|
+
<article class="mb-8" aria-labelledby="output-events-heading">
|
|
740
|
+
<h3 id="output-events-heading"
|
|
741
|
+
class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-4 uppercase">
|
|
742
|
+
<span aria-hidden="true">> </span>Output Events
|
|
743
|
+
</h3>
|
|
744
|
+
<div class="bg-white dark:bg-[#0f0f0f] border-2 border-neutral-300 dark:border-neutral-800 overflow-hidden">
|
|
597
745
|
<div class="overflow-x-auto">
|
|
598
746
|
<table class="w-full text-sm">
|
|
599
747
|
<thead class="bg-gray-50 dark:bg-gray-900">
|
|
@@ -614,13 +762,14 @@
|
|
|
614
762
|
</table>
|
|
615
763
|
</div>
|
|
616
764
|
</div>
|
|
617
|
-
</
|
|
765
|
+
</article>
|
|
618
766
|
|
|
619
767
|
<!-- Methods -->
|
|
620
|
-
<
|
|
621
|
-
<h3 class="text-
|
|
622
|
-
|
|
623
|
-
|
|
768
|
+
<article class="mb-8" aria-labelledby="methods-heading">
|
|
769
|
+
<h3 id="methods-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-4 uppercase">
|
|
770
|
+
<span aria-hidden="true">> </span>Methods
|
|
771
|
+
</h3>
|
|
772
|
+
<div class="bg-white dark:bg-[#0f0f0f] border-2 border-neutral-300 dark:border-neutral-800 overflow-hidden">
|
|
624
773
|
<div class="overflow-x-auto">
|
|
625
774
|
<table class="w-full text-sm">
|
|
626
775
|
<thead class="bg-gray-50 dark:bg-gray-900">
|
|
@@ -643,13 +792,15 @@
|
|
|
643
792
|
</table>
|
|
644
793
|
</div>
|
|
645
794
|
</div>
|
|
646
|
-
</
|
|
795
|
+
</article>
|
|
647
796
|
|
|
648
797
|
<!-- Computed Properties -->
|
|
649
|
-
<
|
|
650
|
-
<h3
|
|
651
|
-
|
|
652
|
-
|
|
798
|
+
<article class="mb-8" aria-labelledby="computed-properties-heading">
|
|
799
|
+
<h3 id="computed-properties-heading"
|
|
800
|
+
class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-4 uppercase">
|
|
801
|
+
<span aria-hidden="true">> </span>Computed Properties
|
|
802
|
+
</h3>
|
|
803
|
+
<div class="bg-white dark:bg-[#0f0f0f] border-2 border-neutral-300 dark:border-neutral-800 overflow-hidden">
|
|
653
804
|
<div class="overflow-x-auto">
|
|
654
805
|
<table class="w-full text-sm">
|
|
655
806
|
<thead class="bg-gray-50 dark:bg-gray-900">
|
|
@@ -670,7 +821,124 @@
|
|
|
670
821
|
</table>
|
|
671
822
|
</div>
|
|
672
823
|
</div>
|
|
673
|
-
</
|
|
824
|
+
</article>
|
|
674
825
|
</section>
|
|
826
|
+
|
|
827
|
+
<!-- Advanced Usage & Edge Cases -->
|
|
828
|
+
<section id="advanced-usage" class="mb-12" aria-labelledby="advanced-heading">
|
|
829
|
+
<h2 id="advanced-heading"
|
|
830
|
+
class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
831
|
+
[ Advanced Usage & Edge Cases ]
|
|
832
|
+
</h2>
|
|
833
|
+
|
|
834
|
+
<!-- Form Integration -->
|
|
835
|
+
<article class="mb-8" aria-labelledby="form-integration-heading">
|
|
836
|
+
<h3 id="form-integration-heading"
|
|
837
|
+
class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
838
|
+
<span aria-hidden="true">> </span>Form Validation Integration
|
|
839
|
+
</h3>
|
|
840
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-4 leading-relaxed">
|
|
841
|
+
Button automatically integrates with Angular Forms. Combine disabled with form validation for better UX.
|
|
842
|
+
</p>
|
|
843
|
+
<div class="space-y-4">
|
|
844
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
845
|
+
<pre><code [innerHTML]="formIntegrationCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
846
|
+
</div>
|
|
847
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
848
|
+
<pre><code [innerHTML]="formIntegrationTsCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
849
|
+
</div>
|
|
850
|
+
</div>
|
|
851
|
+
</article>
|
|
852
|
+
|
|
853
|
+
<!-- Router Integration -->
|
|
854
|
+
<article class="mb-8" aria-labelledby="router-integration-heading">
|
|
855
|
+
<h3 id="router-integration-heading"
|
|
856
|
+
class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
857
|
+
<span aria-hidden="true">> </span>Router Integration
|
|
858
|
+
</h3>
|
|
859
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-4 leading-relaxed">
|
|
860
|
+
Use variant="link" for declarative navigation, or programmatic navigation with click events.
|
|
861
|
+
</p>
|
|
862
|
+
<div class="space-y-4">
|
|
863
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
864
|
+
<pre><code [innerHTML]="routerExampleCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
865
|
+
</div>
|
|
866
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
867
|
+
<pre><code [innerHTML]="routerExampleTsCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
868
|
+
</div>
|
|
869
|
+
</div>
|
|
870
|
+
</article>
|
|
871
|
+
|
|
872
|
+
<!-- Loading + Disabled Behavior -->
|
|
873
|
+
<article class="mb-8" aria-labelledby="loading-disabled-heading">
|
|
874
|
+
<h3 id="loading-disabled-heading"
|
|
875
|
+
class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
876
|
+
<span aria-hidden="true">> </span>Loading + Disabled Behavior
|
|
877
|
+
</h3>
|
|
878
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-4 leading-relaxed">
|
|
879
|
+
When both loading and disabled are set, loading takes precedence. The button will show the loading spinner.
|
|
880
|
+
</p>
|
|
881
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
882
|
+
<pre><code [innerHTML]="loadingDisabledExampleCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
883
|
+
</div>
|
|
884
|
+
</article>
|
|
885
|
+
|
|
886
|
+
<!-- Icon Recommendations -->
|
|
887
|
+
<article class="mb-8" aria-labelledby="icon-recommendations-heading">
|
|
888
|
+
<h3 id="icon-recommendations-heading"
|
|
889
|
+
class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
890
|
+
<span aria-hidden="true">> </span>Icon Library Recommendations
|
|
891
|
+
</h3>
|
|
892
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-4 leading-relaxed">
|
|
893
|
+
Use size-5 (20px) icons for optimal visual balance. Compatible with all SVG icon libraries.
|
|
894
|
+
</p>
|
|
895
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
896
|
+
<pre><code [innerHTML]="iconRecommendationsCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
897
|
+
</div>
|
|
898
|
+
</article>
|
|
899
|
+
|
|
900
|
+
<!-- Signals Pattern -->
|
|
901
|
+
<article class="mb-8" aria-labelledby="signals-pattern-heading">
|
|
902
|
+
<h3 id="signals-pattern-heading"
|
|
903
|
+
class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
904
|
+
<span aria-hidden="true">> </span>Using Angular Signals (Recommended)
|
|
905
|
+
</h3>
|
|
906
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-4 leading-relaxed">
|
|
907
|
+
Button properties work seamlessly with Angular Signals for reactive state management.
|
|
908
|
+
</p>
|
|
909
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
910
|
+
<pre><code [innerHTML]="signalsPatternCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
911
|
+
</div>
|
|
912
|
+
</article>
|
|
913
|
+
|
|
914
|
+
<!-- Button Type Explained -->
|
|
915
|
+
<article class="mb-8" aria-labelledby="button-type-heading">
|
|
916
|
+
<h3 id="button-type-heading"
|
|
917
|
+
class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
918
|
+
<span aria-hidden="true">> </span>Understanding Button Types
|
|
919
|
+
</h3>
|
|
920
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-4 leading-relaxed">
|
|
921
|
+
Always specify type="button" for non-form buttons to prevent accidental form submission.
|
|
922
|
+
</p>
|
|
923
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
924
|
+
<pre><code [innerHTML]="buttonTypeExplainedCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
925
|
+
</div>
|
|
926
|
+
</article>
|
|
927
|
+
|
|
928
|
+
<!-- Href Behavior -->
|
|
929
|
+
<article class="mb-8" aria-labelledby="href-behavior-heading">
|
|
930
|
+
<h3 id="href-behavior-heading"
|
|
931
|
+
class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
932
|
+
<span aria-hidden="true">> </span>Href Behavior (Important)
|
|
933
|
+
</h3>
|
|
934
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-4 leading-relaxed">
|
|
935
|
+
The href property only works when variant="link" is set. Otherwise, it's ignored.
|
|
936
|
+
</p>
|
|
937
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
938
|
+
<pre><code [innerHTML]="hrefBehaviorCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
939
|
+
</div>
|
|
940
|
+
</article>
|
|
941
|
+
</section>
|
|
942
|
+
|
|
675
943
|
</div>
|
|
676
|
-
</
|
|
944
|
+
</main>
|