wally-ui 1.10.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/button/button.html +3 -9
- package/playground/showcase/src/app/components/button/button.ts +28 -2
- 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 +291 -28
- package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.html +825 -404
- package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.ts +36 -9
- 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/index.html +13 -6
package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.html
CHANGED
|
@@ -1,31 +1,49 @@
|
|
|
1
|
-
<
|
|
2
|
-
<div class="max-w-4xl mx-auto
|
|
3
|
-
<div class="mb-4">
|
|
4
|
-
<wally-breadcrumb [items]="breadcrumbItems"></wally-breadcrumb>
|
|
5
|
-
</div>
|
|
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">
|
|
6
3
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
4
|
+
<!-- Breadcrumb Navigation -->
|
|
5
|
+
<nav class="mb-8" aria-label="Breadcrumb navigation">
|
|
6
|
+
<wally-breadcrumb [items]="breadcrumbItems"></wally-breadcrumb>
|
|
7
|
+
</nav>
|
|
8
|
+
|
|
9
|
+
<!-- Header -->
|
|
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">
|
|
16
24
|
<a [href]="claudeUrl" target="_blank"
|
|
17
|
-
class="
|
|
18
|
-
|
|
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">
|
|
19
31
|
<path fill="currentColor"
|
|
20
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" />
|
|
21
33
|
</svg>
|
|
22
|
-
|
|
23
|
-
|
|
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>
|
|
24
38
|
</a>
|
|
25
39
|
|
|
26
40
|
<a [href]="chatGptUrl" target="_blank"
|
|
27
|
-
class="
|
|
28
|
-
|
|
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">
|
|
29
47
|
<path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
|
|
30
48
|
d="M18.38 27.94v-14.4l11.19-6.46c6.2-3.58 17.3 5.25 12.64 13.33" />
|
|
31
49
|
<path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
|
|
@@ -39,407 +57,691 @@
|
|
|
39
57
|
<path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
|
|
40
58
|
d="m24.44 31.44l-12.47-7.2V11.31c0-7.16 13.2-12.36 17.86-4.28" />
|
|
41
59
|
</svg>
|
|
42
|
-
|
|
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
|
-
</
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212] text-center">
|
|
59
|
-
<div class="flex flex-col gap-4">
|
|
60
|
-
<wally-button>Wally Button</wally-button>
|
|
61
|
-
<wally-button>
|
|
62
|
-
Send
|
|
63
|
-
<svg slot="icon-left" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
|
64
|
-
stroke="currentColor" class="size-5">
|
|
65
|
-
<path stroke-linecap="round" stroke-linejoin="round"
|
|
66
|
-
d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
|
67
|
-
</svg>
|
|
68
|
-
</wally-button>
|
|
69
|
-
<wally-button [disabled]="true">Disabled</wally-button>
|
|
70
|
-
<wally-button [loading]="true">
|
|
71
|
-
Loading
|
|
72
|
-
</wally-button>
|
|
73
|
-
<wally-button variant="primary">Primary Button</wally-button>
|
|
74
|
-
<wally-button variant="secondary">Secondary Button</wally-button>
|
|
75
|
-
<wally-button variant="secondary" [disabled]="true">Secondary Disabled</wally-button>
|
|
76
|
-
<wally-button variant="secondary" [loading]="true">Secondary Loading</wally-button>
|
|
77
|
-
|
|
78
|
-
<div class="w-full flex justify-center items-center gap-2">
|
|
79
|
-
<div class="w-full">
|
|
80
|
-
<wally-button [showNotification]="true">
|
|
81
|
-
Messages
|
|
82
|
-
</wally-button>
|
|
83
|
-
</div>
|
|
84
|
-
|
|
85
|
-
<div class="flex justify-center">
|
|
86
|
-
<wally-button [showNotification]="true">
|
|
87
|
-
<svg slot="icon-left" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
88
|
-
stroke-width="1.5" stroke="currentColor" class="size-5">
|
|
89
|
-
<path stroke-linecap="round" stroke-linejoin="round"
|
|
90
|
-
d="M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h3.218a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859m-19.5.338V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 0 0-2.15-1.588H6.911a2.25 2.25 0 0 0-2.15 1.588L2.35 13.177a2.25 2.25 0 0 0-.1.661Z" />
|
|
91
|
-
</svg>
|
|
92
|
-
</wally-button>
|
|
93
|
-
</div>
|
|
94
|
-
|
|
95
|
-
<div class="flex justify-center">
|
|
96
|
-
<wally-button [showNotification]="true">
|
|
97
|
-
<svg slot="icon-left" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
98
|
-
stroke-width="1.5" stroke="currentColor" class="size-5">
|
|
99
|
-
<path stroke-linecap="round" stroke-linejoin="round"
|
|
100
|
-
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M3.124 7.5A8.969 8.969 0 0 1 5.292 3m13.416 0a8.969 8.969 0 0 1 2.168 4.5" />
|
|
101
|
-
</svg>
|
|
102
|
-
</wally-button>
|
|
103
|
-
</div>
|
|
104
|
-
</div>
|
|
105
|
-
</div>
|
|
106
|
-
</div>
|
|
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>
|
|
107
78
|
</section>
|
|
108
79
|
|
|
109
80
|
<!-- Import -->
|
|
110
|
-
<section class="mb-
|
|
111
|
-
<h2
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
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>
|
|
115
89
|
</div>
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
<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>
|
|
119
92
|
</div>
|
|
120
93
|
</div>
|
|
121
94
|
</section>
|
|
122
95
|
|
|
123
96
|
<!-- Basic Usage -->
|
|
124
|
-
<section class="mb-
|
|
125
|
-
<h2
|
|
126
|
-
|
|
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 ]
|
|
127
101
|
</h2>
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
135
|
-
<wally-button>Wally Button</wally-button>
|
|
136
|
-
</div>
|
|
137
|
-
</div>
|
|
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">
|
|
107
|
+
<wally-button>Click me</wally-button>
|
|
138
108
|
</div>
|
|
139
109
|
</section>
|
|
140
110
|
|
|
141
|
-
<!--
|
|
142
|
-
<section class="mb-
|
|
143
|
-
<h2
|
|
144
|
-
|
|
111
|
+
<!-- All Variants Preview -->
|
|
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 ]
|
|
145
116
|
</h2>
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
<
|
|
151
|
-
|
|
152
|
-
</
|
|
153
|
-
<
|
|
154
|
-
|
|
155
|
-
</div>
|
|
156
|
-
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
157
|
-
<wally-button variant="primary">Primary Button</wally-button>
|
|
158
|
-
</div>
|
|
159
|
-
</div>
|
|
160
|
-
|
|
161
|
-
<!-- Secondary Variant -->
|
|
162
|
-
<div>
|
|
163
|
-
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">
|
|
164
|
-
Secondary
|
|
165
|
-
</h3>
|
|
166
|
-
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
167
|
-
<pre><code [innerHTML]="secondaryVariantCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
168
|
-
</div>
|
|
169
|
-
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
170
|
-
<div class="flex flex-col gap-2">
|
|
171
|
-
<wally-button variant="secondary">Secondary Button</wally-button>
|
|
172
|
-
<wally-button variant="secondary" [disabled]="true">Secondary Disabled</wally-button>
|
|
173
|
-
<wally-button variant="secondary" [loading]="true">Secondary Loading</wally-button>
|
|
174
|
-
</div>
|
|
175
|
-
</div>
|
|
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">
|
|
119
|
+
<div class="flex flex-col gap-4">
|
|
120
|
+
<wally-button variant="primary">Primary</wally-button>
|
|
121
|
+
<wally-button variant="secondary">Secondary</wally-button>
|
|
122
|
+
<wally-button variant="destructive">Destructive</wally-button>
|
|
123
|
+
<wally-button variant="outline">Outline</wally-button>
|
|
124
|
+
<wally-button variant="ghost">Ghost</wally-button>
|
|
125
|
+
<wally-button variant="link" href="/components">Link</wally-button>
|
|
176
126
|
</div>
|
|
177
127
|
</div>
|
|
178
128
|
</section>
|
|
179
129
|
|
|
180
|
-
<!--
|
|
181
|
-
<section class="mb-
|
|
182
|
-
<h2
|
|
183
|
-
|
|
130
|
+
<!-- Variants Documentation -->
|
|
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 ]
|
|
184
135
|
</h2>
|
|
185
136
|
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
<
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
137
|
+
<!-- Primary -->
|
|
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">
|
|
144
|
+
High emphasis. Use for main actions and CTAs.
|
|
145
|
+
</p>
|
|
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>
|
|
148
|
+
</div>
|
|
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">
|
|
152
|
+
<wally-button variant="primary">Primary</wally-button>
|
|
153
|
+
<wally-button variant="primary" [disabled]="true">Disabled</wally-button>
|
|
154
|
+
<wally-button variant="primary" [loading]="true">Loading</wally-button>
|
|
194
155
|
</div>
|
|
195
|
-
|
|
196
|
-
|
|
156
|
+
</div>
|
|
157
|
+
</article>
|
|
158
|
+
|
|
159
|
+
<!-- Secondary -->
|
|
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">
|
|
166
|
+
Medium emphasis. Use for secondary actions.
|
|
167
|
+
</p>
|
|
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>
|
|
170
|
+
</div>
|
|
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">
|
|
174
|
+
<wally-button variant="secondary">Secondary</wally-button>
|
|
175
|
+
<wally-button variant="secondary" [disabled]="true">Disabled</wally-button>
|
|
176
|
+
<wally-button variant="secondary" [loading]="true">Loading</wally-button>
|
|
197
177
|
</div>
|
|
198
178
|
</div>
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
<
|
|
206
|
-
|
|
179
|
+
</article>
|
|
180
|
+
|
|
181
|
+
<!-- Destructive -->
|
|
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">
|
|
188
|
+
Use for dangerous actions like delete or remove.
|
|
189
|
+
</p>
|
|
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>
|
|
192
|
+
</div>
|
|
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">
|
|
196
|
+
<wally-button variant="destructive">Delete</wally-button>
|
|
197
|
+
<wally-button variant="destructive" [disabled]="true">Disabled</wally-button>
|
|
198
|
+
<wally-button variant="destructive" [loading]="true">Deleting...</wally-button>
|
|
207
199
|
</div>
|
|
208
|
-
|
|
209
|
-
|
|
200
|
+
</div>
|
|
201
|
+
</article>
|
|
202
|
+
|
|
203
|
+
<!-- Outline -->
|
|
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">
|
|
210
|
+
Low emphasis with border. Use for tertiary actions.
|
|
211
|
+
</p>
|
|
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>
|
|
214
|
+
</div>
|
|
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">
|
|
218
|
+
<wally-button variant="outline">Outline</wally-button>
|
|
219
|
+
<wally-button variant="outline" [disabled]="true">Disabled</wally-button>
|
|
220
|
+
<wally-button variant="outline" [loading]="true">Loading</wally-button>
|
|
210
221
|
</div>
|
|
211
222
|
</div>
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
<
|
|
219
|
-
|
|
223
|
+
</article>
|
|
224
|
+
|
|
225
|
+
<!-- Ghost -->
|
|
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">
|
|
232
|
+
Minimal styling. Use for less prominent actions.
|
|
233
|
+
</p>
|
|
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>
|
|
236
|
+
</div>
|
|
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">
|
|
240
|
+
<wally-button variant="ghost">Ghost</wally-button>
|
|
241
|
+
<wally-button variant="ghost" [disabled]="true">Disabled</wally-button>
|
|
242
|
+
<wally-button variant="ghost" [loading]="true">Loading</wally-button>
|
|
220
243
|
</div>
|
|
221
|
-
|
|
222
|
-
|
|
244
|
+
</div>
|
|
245
|
+
</article>
|
|
246
|
+
|
|
247
|
+
<!-- Link -->
|
|
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">
|
|
254
|
+
Styled as a link. Supports internal routing and external URLs.
|
|
255
|
+
</p>
|
|
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>
|
|
258
|
+
</div>
|
|
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">
|
|
262
|
+
<wally-button variant="link" href="/components">Internal Link</wally-button>
|
|
263
|
+
<wally-button variant="link" href="https://github.com">External Link</wally-button>
|
|
264
|
+
<wally-button variant="link" [disabled]="true">Disabled</wally-button>
|
|
223
265
|
</div>
|
|
224
266
|
</div>
|
|
225
|
-
</
|
|
267
|
+
</article>
|
|
226
268
|
</section>
|
|
227
269
|
|
|
228
|
-
<!--
|
|
229
|
-
<section class="mb-
|
|
230
|
-
<h2
|
|
231
|
-
|
|
270
|
+
<!-- Production Examples -->
|
|
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 ]
|
|
232
275
|
</h2>
|
|
233
276
|
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
</div>
|
|
277
|
+
<!-- CTA -->
|
|
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>
|
|
243
285
|
</div>
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
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">
|
|
288
|
+
<wally-button>
|
|
289
|
+
Get Started Free
|
|
290
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
|
291
|
+
stroke="currentColor" class="size-5">
|
|
292
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
|
|
293
|
+
</svg>
|
|
294
|
+
</wally-button>
|
|
295
|
+
</div>
|
|
296
|
+
</article>
|
|
252
297
|
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
298
|
+
<!-- Login Form -->
|
|
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>
|
|
258
307
|
</div>
|
|
259
|
-
<div class="bg-
|
|
260
|
-
<pre><code [innerHTML]="
|
|
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>
|
|
261
310
|
</div>
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
</p>
|
|
269
|
-
}
|
|
270
|
-
</div>
|
|
311
|
+
</div>
|
|
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">
|
|
314
|
+
<div class="flex gap-2">
|
|
315
|
+
<wally-button type="submit">Sign In</wally-button>
|
|
316
|
+
<wally-button variant="secondary">Create Account</wally-button>
|
|
271
317
|
</div>
|
|
272
318
|
</div>
|
|
273
|
-
</
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
<div
|
|
285
|
-
|
|
286
|
-
<div class="
|
|
287
|
-
<
|
|
319
|
+
</article>
|
|
320
|
+
|
|
321
|
+
<!-- Delete Confirmation -->
|
|
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">
|
|
332
|
+
<div class="flex gap-2 justify-end">
|
|
333
|
+
<wally-button variant="ghost">Cancel</wally-button>
|
|
334
|
+
<wally-button variant="destructive">Delete Account</wally-button>
|
|
288
335
|
</div>
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
336
|
+
</div>
|
|
337
|
+
</article>
|
|
338
|
+
|
|
339
|
+
<!-- Dashboard Actions -->
|
|
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">
|
|
350
|
+
<div class="flex gap-2">
|
|
351
|
+
<wally-button variant="outline">
|
|
352
|
+
Export
|
|
292
353
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
293
354
|
stroke="currentColor" class="size-5">
|
|
294
355
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
295
|
-
d="
|
|
356
|
+
d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
|
|
296
357
|
</svg>
|
|
297
358
|
</wally-button>
|
|
298
|
-
</div>
|
|
299
|
-
</div>
|
|
300
|
-
|
|
301
|
-
<!-- Icon Only -->
|
|
302
|
-
<div>
|
|
303
|
-
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Icon Only</h3>
|
|
304
|
-
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
305
|
-
<pre><code [innerHTML]="iconNotificationCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
306
|
-
</div>
|
|
307
|
-
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
308
359
|
<wally-button>
|
|
309
|
-
|
|
360
|
+
Create New
|
|
361
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
|
310
362
|
stroke="currentColor" class="size-5">
|
|
311
|
-
<path stroke-linecap="round" stroke-linejoin="round"
|
|
312
|
-
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M3.124 7.5A8.969 8.969 0 0 1 5.292 3m13.416 0a8.969 8.969 0 0 1 2.168 4.5" />
|
|
363
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
|
313
364
|
</svg>
|
|
314
365
|
</wally-button>
|
|
315
366
|
</div>
|
|
316
367
|
</div>
|
|
317
|
-
</
|
|
368
|
+
</article>
|
|
318
369
|
</section>
|
|
319
370
|
|
|
320
|
-
<!--
|
|
321
|
-
<section class="mb-
|
|
322
|
-
<h2
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
<
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
</div>
|
|
371
|
+
<!-- States -->
|
|
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>
|
|
377
|
+
|
|
378
|
+
<!-- Disabled -->
|
|
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">
|
|
389
|
+
<wally-button [disabled]="true">Disabled Button</wally-button>
|
|
340
390
|
</div>
|
|
391
|
+
</article>
|
|
392
|
+
|
|
393
|
+
<!-- Loading -->
|
|
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">
|
|
404
|
+
<wally-button [loading]="true">Loading...</wally-button>
|
|
405
|
+
</div>
|
|
406
|
+
</article>
|
|
407
|
+
|
|
408
|
+
<!-- Notification -->
|
|
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">
|
|
419
|
+
<wally-button [showNotification]="true" ariaLabel="View messages">
|
|
420
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
421
|
+
stroke="currentColor" class="size-5">
|
|
422
|
+
<path stroke-linecap="round" stroke-linejoin="round"
|
|
423
|
+
d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
|
|
424
|
+
</svg>
|
|
425
|
+
</wally-button>
|
|
426
|
+
</div>
|
|
427
|
+
</article>
|
|
428
|
+
</section>
|
|
341
429
|
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
430
|
+
<!-- Button Types -->
|
|
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>
|
|
436
|
+
|
|
437
|
+
<!-- Submit -->
|
|
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>
|
|
353
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">
|
|
448
|
+
<wally-button type="submit">Submit Form</wally-button>
|
|
449
|
+
</div>
|
|
450
|
+
</article>
|
|
451
|
+
|
|
452
|
+
<!-- Reset -->
|
|
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">
|
|
463
|
+
<wally-button type="reset" variant="ghost">Reset</wally-button>
|
|
464
|
+
</div>
|
|
465
|
+
</article>
|
|
466
|
+
</section>
|
|
354
467
|
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
468
|
+
<!-- Events -->
|
|
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>
|
|
474
|
+
|
|
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>
|
|
478
|
+
</div>
|
|
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>
|
|
366
481
|
</div>
|
|
367
482
|
</div>
|
|
368
|
-
</section>
|
|
369
483
|
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Property</th>
|
|
380
|
-
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Type</th>
|
|
381
|
-
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Default</th>
|
|
382
|
-
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Description</th>
|
|
383
|
-
</tr>
|
|
384
|
-
</thead>
|
|
385
|
-
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
|
|
386
|
-
<tr>
|
|
387
|
-
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">type</td>
|
|
388
|
-
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">string</td>
|
|
389
|
-
<td class="p-4 font-mono text-green-600 dark:text-green-400">'button'</td>
|
|
390
|
-
<td class="p-4 text-gray-700 dark:text-gray-300">HTML button type (button, submit, reset)</td>
|
|
391
|
-
</tr>
|
|
392
|
-
<tr>
|
|
393
|
-
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">variant</td>
|
|
394
|
-
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">'primary' | 'secondary'</td>
|
|
395
|
-
<td class="p-4 font-mono text-green-600 dark:text-green-400">'primary'</td>
|
|
396
|
-
<td class="p-4 text-gray-700 dark:text-gray-300">Button visual style variant</td>
|
|
397
|
-
</tr>
|
|
398
|
-
<tr>
|
|
399
|
-
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">disabled</td>
|
|
400
|
-
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">boolean</td>
|
|
401
|
-
<td class="p-4 font-mono text-green-600 dark:text-green-400">false</td>
|
|
402
|
-
<td class="p-4 text-gray-700 dark:text-gray-300">Whether the button is disabled</td>
|
|
403
|
-
</tr>
|
|
404
|
-
<tr>
|
|
405
|
-
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">loading</td>
|
|
406
|
-
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">boolean</td>
|
|
407
|
-
<td class="p-4 font-mono text-green-600 dark:text-green-400">false</td>
|
|
408
|
-
<td class="p-4 text-gray-700 dark:text-gray-300">Shows loading spinner and disables button</td>
|
|
409
|
-
</tr>
|
|
410
|
-
<tr>
|
|
411
|
-
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">showNotification</td>
|
|
412
|
-
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">boolean</td>
|
|
413
|
-
<td class="p-4 font-mono text-green-600 dark:text-green-400">false</td>
|
|
414
|
-
<td class="p-4 text-gray-700 dark:text-gray-300">Shows notification badge indicator</td>
|
|
415
|
-
</tr>
|
|
416
|
-
<tr>
|
|
417
|
-
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">ariaLabel</td>
|
|
418
|
-
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">string</td>
|
|
419
|
-
<td class="p-4 font-mono text-green-600 dark:text-green-400">''</td>
|
|
420
|
-
<td class="p-4 text-gray-700 dark:text-gray-300">Accessible label for screen readers (essential for icon-only buttons)</td>
|
|
421
|
-
</tr>
|
|
422
|
-
<tr>
|
|
423
|
-
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">ariaPressed</td>
|
|
424
|
-
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">boolean | undefined</td>
|
|
425
|
-
<td class="p-4 font-mono text-green-600 dark:text-green-400">undefined</td>
|
|
426
|
-
<td class="p-4 text-gray-700 dark:text-gray-300">Indicates pressed state for toggle buttons</td>
|
|
427
|
-
</tr>
|
|
428
|
-
<tr>
|
|
429
|
-
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">ariaDescribedBy</td>
|
|
430
|
-
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">string</td>
|
|
431
|
-
<td class="p-4 font-mono text-green-600 dark:text-green-400">''</td>
|
|
432
|
-
<td class="p-4 text-gray-700 dark:text-gray-300">References element(s) that describe the button</td>
|
|
433
|
-
</tr>
|
|
434
|
-
</tbody>
|
|
435
|
-
</table>
|
|
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">
|
|
486
|
+
<div class="flex flex-col gap-2 text-center">
|
|
487
|
+
<wally-button (click)="handleClick()">Click Me</wally-button>
|
|
488
|
+
@if (clickMessage()) {
|
|
489
|
+
<p class="text-sm text-green-600 dark:text-green-400 font-medium">
|
|
490
|
+
{{ clickMessage() }}
|
|
491
|
+
</p>
|
|
492
|
+
}
|
|
436
493
|
</div>
|
|
437
494
|
</div>
|
|
495
|
+
</section>
|
|
496
|
+
|
|
497
|
+
<!-- Icons -->
|
|
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>
|
|
503
|
+
|
|
504
|
+
<!-- Icon with Text -->
|
|
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">
|
|
514
|
+
<wally-button>
|
|
515
|
+
Save Changes
|
|
516
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
517
|
+
stroke="currentColor" class="size-5">
|
|
518
|
+
<path stroke-linecap="round" stroke-linejoin="round"
|
|
519
|
+
d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
|
520
|
+
</svg>
|
|
521
|
+
</wally-button>
|
|
522
|
+
</div>
|
|
523
|
+
</article>
|
|
524
|
+
|
|
525
|
+
<!-- Icon Only -->
|
|
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">
|
|
535
|
+
<wally-button ariaLabel="Notifications">
|
|
536
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
537
|
+
stroke="currentColor" class="size-5">
|
|
538
|
+
<path stroke-linecap="round" stroke-linejoin="round"
|
|
539
|
+
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M3.124 7.5A8.969 8.969 0 0 1 5.292 3m13.416 0a8.969 8.969 0 0 1 2.168 4.5" />
|
|
540
|
+
</svg>
|
|
541
|
+
</wally-button>
|
|
542
|
+
</div>
|
|
543
|
+
</article>
|
|
544
|
+
|
|
545
|
+
<!-- Icon Left -->
|
|
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">
|
|
555
|
+
<wally-button>
|
|
556
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
|
557
|
+
stroke="currentColor" class="size-5">
|
|
558
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
|
|
559
|
+
</svg>
|
|
560
|
+
Back
|
|
561
|
+
</wally-button>
|
|
562
|
+
</div>
|
|
563
|
+
</article>
|
|
564
|
+
</section>
|
|
565
|
+
|
|
566
|
+
<!-- Accessibility -->
|
|
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>
|
|
572
|
+
|
|
573
|
+
<!-- ARIA Label -->
|
|
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">
|
|
584
|
+
<wally-button ariaLabel="Save document">
|
|
585
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
586
|
+
stroke="currentColor" class="size-5">
|
|
587
|
+
<path stroke-linecap="round" stroke-linejoin="round"
|
|
588
|
+
d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z" />
|
|
589
|
+
</svg>
|
|
590
|
+
</wally-button>
|
|
591
|
+
</div>
|
|
592
|
+
</article>
|
|
593
|
+
|
|
594
|
+
<!-- Toggle Button -->
|
|
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">
|
|
605
|
+
<wally-button [ariaPressed]="toggleState()">
|
|
606
|
+
{{ toggleState() ? 'On' : 'Off' }}
|
|
607
|
+
</wally-button>
|
|
608
|
+
</div>
|
|
609
|
+
</article>
|
|
610
|
+
|
|
611
|
+
<!-- Loading State ARIA -->
|
|
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">
|
|
621
|
+
<wally-button [loading]="true">Processing...</wally-button>
|
|
622
|
+
</div>
|
|
623
|
+
</article>
|
|
624
|
+
|
|
625
|
+
<!-- ARIA Described By -->
|
|
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">
|
|
636
|
+
<wally-button ariaDescribedBy="save-description">Save</wally-button>
|
|
637
|
+
<p id="save-description" class="text-xs text-neutral-600 dark:text-neutral-400 mt-2">
|
|
638
|
+
Saves your changes permanently
|
|
639
|
+
</p>
|
|
640
|
+
</div>
|
|
641
|
+
</article>
|
|
642
|
+
</section>
|
|
643
|
+
|
|
644
|
+
<!-- API Reference -->
|
|
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>
|
|
438
650
|
|
|
439
|
-
<!--
|
|
440
|
-
<
|
|
441
|
-
<h3
|
|
442
|
-
|
|
651
|
+
<!-- Input Properties -->
|
|
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">
|
|
658
|
+
<div class="overflow-x-auto">
|
|
659
|
+
<table class="w-full text-sm">
|
|
660
|
+
<thead class="bg-gray-50 dark:bg-gray-900">
|
|
661
|
+
<tr>
|
|
662
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Property</th>
|
|
663
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Type</th>
|
|
664
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Default</th>
|
|
665
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Description</th>
|
|
666
|
+
</tr>
|
|
667
|
+
</thead>
|
|
668
|
+
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
|
|
669
|
+
<tr>
|
|
670
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">type</td>
|
|
671
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">string</td>
|
|
672
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">'button'</td>
|
|
673
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">HTML button type: 'button', 'submit', or 'reset'
|
|
674
|
+
</td>
|
|
675
|
+
</tr>
|
|
676
|
+
<tr>
|
|
677
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">variant</td>
|
|
678
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">'primary' | 'secondary' |
|
|
679
|
+
'destructive' | 'outline' | 'ghost' | 'link'</td>
|
|
680
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">'primary'</td>
|
|
681
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Visual style variant of the button</td>
|
|
682
|
+
</tr>
|
|
683
|
+
<tr>
|
|
684
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">href</td>
|
|
685
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">string</td>
|
|
686
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">''</td>
|
|
687
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">URL for navigation (used with variant="link").
|
|
688
|
+
Supports internal routes and external URLs</td>
|
|
689
|
+
</tr>
|
|
690
|
+
<tr>
|
|
691
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">disabled</td>
|
|
692
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">boolean</td>
|
|
693
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">false</td>
|
|
694
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Disables the button, preventing user interaction
|
|
695
|
+
</td>
|
|
696
|
+
</tr>
|
|
697
|
+
<tr>
|
|
698
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">loading</td>
|
|
699
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">boolean</td>
|
|
700
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">false</td>
|
|
701
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Shows loading spinner and disables button.
|
|
702
|
+
Automatically sets aria-busy="true"</td>
|
|
703
|
+
</tr>
|
|
704
|
+
<tr>
|
|
705
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">showNotification</td>
|
|
706
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">boolean</td>
|
|
707
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">false</td>
|
|
708
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Shows animated notification badge in top-right
|
|
709
|
+
corner</td>
|
|
710
|
+
</tr>
|
|
711
|
+
<tr>
|
|
712
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">ariaLabel</td>
|
|
713
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">string</td>
|
|
714
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">''</td>
|
|
715
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Accessible label for screen readers. Essential for
|
|
716
|
+
icon-only buttons</td>
|
|
717
|
+
</tr>
|
|
718
|
+
<tr>
|
|
719
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">ariaPressed</td>
|
|
720
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">boolean | undefined</td>
|
|
721
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">undefined</td>
|
|
722
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Indicates pressed state for toggle buttons. Use
|
|
723
|
+
true/false for toggle functionality</td>
|
|
724
|
+
</tr>
|
|
725
|
+
<tr>
|
|
726
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">ariaDescribedBy</td>
|
|
727
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">string</td>
|
|
728
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">''</td>
|
|
729
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">ID(s) of element(s) that describe the button for
|
|
730
|
+
screen readers</td>
|
|
731
|
+
</tr>
|
|
732
|
+
</tbody>
|
|
733
|
+
</table>
|
|
734
|
+
</div>
|
|
735
|
+
</div>
|
|
736
|
+
</article>
|
|
737
|
+
|
|
738
|
+
<!-- Output Events -->
|
|
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">
|
|
443
745
|
<div class="overflow-x-auto">
|
|
444
746
|
<table class="w-full text-sm">
|
|
445
747
|
<thead class="bg-gray-50 dark:bg-gray-900">
|
|
@@ -453,71 +755,190 @@
|
|
|
453
755
|
<tr>
|
|
454
756
|
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">click</td>
|
|
455
757
|
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">void</td>
|
|
456
|
-
<td class="p-4 text-gray-700 dark:text-gray-300">Emitted when button is clicked
|
|
758
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Emitted when button is clicked. Also handles
|
|
759
|
+
navigation for link variant</td>
|
|
457
760
|
</tr>
|
|
458
761
|
</tbody>
|
|
459
762
|
</table>
|
|
460
763
|
</div>
|
|
461
764
|
</div>
|
|
462
|
-
</
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
765
|
+
</article>
|
|
766
|
+
|
|
767
|
+
<!-- Methods -->
|
|
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">
|
|
773
|
+
<div class="overflow-x-auto">
|
|
774
|
+
<table class="w-full text-sm">
|
|
775
|
+
<thead class="bg-gray-50 dark:bg-gray-900">
|
|
776
|
+
<tr>
|
|
777
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Method</th>
|
|
778
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Parameters</th>
|
|
779
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Return</th>
|
|
780
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Description</th>
|
|
781
|
+
</tr>
|
|
782
|
+
</thead>
|
|
783
|
+
<tbody>
|
|
784
|
+
<tr>
|
|
785
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">handleClick()</td>
|
|
786
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">event: MouseEvent</td>
|
|
787
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">void</td>
|
|
788
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Internal click handler. Manages navigation for link
|
|
789
|
+
variant and emits click event</td>
|
|
790
|
+
</tr>
|
|
791
|
+
</tbody>
|
|
792
|
+
</table>
|
|
474
793
|
</div>
|
|
475
|
-
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
476
|
-
Additional button styles including outline, ghost, and destructive variants.
|
|
477
|
-
</p>
|
|
478
794
|
</div>
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
795
|
+
</article>
|
|
796
|
+
|
|
797
|
+
<!-- Computed Properties -->
|
|
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">
|
|
804
|
+
<div class="overflow-x-auto">
|
|
805
|
+
<table class="w-full text-sm">
|
|
806
|
+
<thead class="bg-gray-50 dark:bg-gray-900">
|
|
807
|
+
<tr>
|
|
808
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Property</th>
|
|
809
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Type</th>
|
|
810
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Description</th>
|
|
811
|
+
</tr>
|
|
812
|
+
</thead>
|
|
813
|
+
<tbody>
|
|
814
|
+
<tr>
|
|
815
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">variantClasses</td>
|
|
816
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">Signal<string></td>
|
|
817
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Computed signal that returns CSS classes based on
|
|
818
|
+
variant. Automatically updates when variant changes</td>
|
|
819
|
+
</tr>
|
|
820
|
+
</tbody>
|
|
821
|
+
</table>
|
|
484
822
|
</div>
|
|
485
|
-
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
486
|
-
Visual feedback with ripple animation on button press for enhanced user experience.
|
|
487
|
-
</p>
|
|
488
823
|
</div>
|
|
824
|
+
</article>
|
|
825
|
+
</section>
|
|
489
826
|
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
Built-in tooltip integration for providing additional context and information.
|
|
497
|
-
</p>
|
|
498
|
-
</div>
|
|
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>
|
|
499
833
|
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
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>
|
|
504
849
|
</div>
|
|
505
|
-
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
506
|
-
Button that functions as a link with href support while maintaining button styling.
|
|
507
|
-
</p>
|
|
508
850
|
</div>
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
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>
|
|
514
868
|
</div>
|
|
515
|
-
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
516
|
-
Group multiple buttons together with proper spacing and border handling.
|
|
517
|
-
</p>
|
|
518
869
|
</div>
|
|
519
|
-
</
|
|
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>
|
|
520
941
|
</section>
|
|
521
942
|
|
|
522
943
|
</div>
|
|
523
|
-
</
|
|
944
|
+
</main>
|