wally-ui 1.11.0 → 1.11.2
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.ts +2 -1
- 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/input-docs/input-docs.html
CHANGED
|
@@ -1,60 +1,78 @@
|
|
|
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
|
+
<!-- Breadcrumb Navigation -->
|
|
4
|
+
<nav class="mb-8" aria-label="Breadcrumb navigation">
|
|
4
5
|
<wally-breadcrumb [items]="breadcrumbItems"></wally-breadcrumb>
|
|
5
|
-
</
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
<
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
6
|
+
</nav>
|
|
7
|
+
|
|
8
|
+
<!-- Header -->
|
|
9
|
+
<header class="mb-12" role="banner">
|
|
10
|
+
<h1 id="page-title" class="text-3xl sm:text-4xl font-bold text-[#0a0a0a] dark:text-white mb-4 uppercase">
|
|
11
|
+
<span aria-hidden="true">>_ </span>Input
|
|
12
|
+
</h1>
|
|
13
|
+
<p 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">
|
|
14
|
+
Production-ready input component with label support, loading states, validation styling, password toggle, and complete FormGroup integration. Enterprise-grade accessibility with ARIA support.
|
|
15
|
+
</p>
|
|
16
|
+
|
|
17
|
+
<!-- AI Assistant Links -->
|
|
18
|
+
<div class="flex flex-wrap gap-0 mt-6 border-2 border-neutral-300 dark:border-neutral-700" role="list" aria-label="Open documentation in AI coding assistants">
|
|
19
|
+
<a [href]="claudeUrl" target="_blank"
|
|
20
|
+
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"
|
|
21
|
+
rel="noopener noreferrer"
|
|
22
|
+
role="listitem"
|
|
23
|
+
aria-label="Open Input component documentation in Claude AI assistant (opens in new tab)">
|
|
24
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="size-5 text-[#0a0a0a] dark:text-neutral-400 group-hover:text-white dark:group-hover:text-[#0a0a0a] transition-colors duration-150" viewBox="0 0 24 24" aria-hidden="true">
|
|
25
|
+
<path fill="currentColor"
|
|
26
|
+
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" />
|
|
27
|
+
</svg>
|
|
28
|
+
<span 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">
|
|
29
|
+
Open in Claude
|
|
30
|
+
</span>
|
|
31
|
+
</a>
|
|
32
|
+
|
|
33
|
+
<a [href]="chatGptUrl" target="_blank"
|
|
34
|
+
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"
|
|
35
|
+
rel="noopener noreferrer"
|
|
36
|
+
role="listitem"
|
|
37
|
+
aria-label="Open Input component documentation in ChatGPT AI assistant (opens in new tab)">
|
|
38
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="size-5 text-[#0a0a0a] dark:text-neutral-400 group-hover:text-white dark:group-hover:text-[#0a0a0a] transition-colors duration-150" viewBox="0 0 48 48" aria-hidden="true">
|
|
39
|
+
<path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
|
|
40
|
+
d="M18.38 27.94v-14.4l11.19-6.46c6.2-3.58 17.3 5.25 12.64 13.33" />
|
|
41
|
+
<path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
|
|
42
|
+
d="m18.38 20.94l12.47-7.2l11.19 6.46c6.2 3.58 4.1 17.61-5.23 17.61" />
|
|
43
|
+
<path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
|
|
44
|
+
d="m24.44 17.44l12.47 7.2v12.93c0 7.16-13.2 12.36-17.86 4.28" />
|
|
45
|
+
<path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
|
|
46
|
+
d="M30.5 21.2v14.14L19.31 41.8c-6.2 3.58-17.3-5.25-12.64-13.33" />
|
|
47
|
+
<path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
|
|
48
|
+
d="m30.5 27.94l-12.47 7.2l-11.19-6.46c-6.21-3.59-4.11-17.61 5.22-17.61" />
|
|
49
|
+
<path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
|
|
50
|
+
d="m24.44 31.44l-12.47-7.2V11.31c0-7.16 13.2-12.36 17.86-4.28" />
|
|
51
|
+
</svg>
|
|
52
|
+
<span 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">
|
|
53
|
+
Open in ChatGPT
|
|
54
|
+
</span>
|
|
55
|
+
</a>
|
|
56
|
+
</div>
|
|
57
|
+
</header>
|
|
45
58
|
|
|
46
59
|
<!-- Installation -->
|
|
47
|
-
<section class="mb-
|
|
48
|
-
<h2 class="text-
|
|
49
|
-
|
|
50
|
-
|
|
60
|
+
<section id="installation" class="mb-12" aria-labelledby="installation-heading">
|
|
61
|
+
<h2 id="installation-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
62
|
+
[ Installation ]
|
|
63
|
+
</h2>
|
|
64
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
65
|
+
<pre><code [innerHTML]="installationCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
51
66
|
</div>
|
|
52
67
|
</section>
|
|
53
68
|
|
|
54
|
-
<!-- Preview -->
|
|
55
|
-
<section class="mb-
|
|
56
|
-
<h2 class="text-
|
|
57
|
-
|
|
69
|
+
<!-- All States Preview -->
|
|
70
|
+
<section id="preview" class="mb-12" aria-labelledby="preview-heading">
|
|
71
|
+
<h2 id="preview-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
72
|
+
[ All States Preview ]
|
|
73
|
+
</h2>
|
|
74
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
75
|
+
aria-label="Live preview showing all input component states: default, email, password, loading, valid, error, and disabled">
|
|
58
76
|
<form>
|
|
59
77
|
<div class="flex flex-col gap-4 w-full">
|
|
60
78
|
<wally-input label="Full Name" placeholder="Enter your name"></wally-input>
|
|
@@ -70,293 +88,353 @@
|
|
|
70
88
|
</section>
|
|
71
89
|
|
|
72
90
|
<!-- Import -->
|
|
73
|
-
<section class="mb-
|
|
74
|
-
<h2 class="text-
|
|
91
|
+
<section id="import" class="mb-12" aria-labelledby="import-heading">
|
|
92
|
+
<h2 id="import-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
93
|
+
[ Import ]
|
|
94
|
+
</h2>
|
|
75
95
|
<div class="space-y-4">
|
|
76
|
-
<div class="bg-
|
|
77
|
-
<pre><code [innerHTML]="importCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
96
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
97
|
+
<pre><code [innerHTML]="importCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
78
98
|
</div>
|
|
79
99
|
|
|
80
|
-
<div class="bg-
|
|
81
|
-
<pre><code [innerHTML]="componentImportCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
100
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
101
|
+
<pre><code [innerHTML]="componentImportCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
82
102
|
</div>
|
|
83
103
|
</div>
|
|
84
104
|
</section>
|
|
85
105
|
|
|
86
|
-
<!-- FormGroup
|
|
87
|
-
<section class="mb-
|
|
88
|
-
<
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
106
|
+
<!-- FormGroup Integration -->
|
|
107
|
+
<section id="formgroup" class="mb-12" aria-labelledby="formgroup-heading">
|
|
108
|
+
<h2 id="formgroup-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
109
|
+
[ FormGroup Integration ]
|
|
110
|
+
</h2>
|
|
111
|
+
|
|
112
|
+
<aside class="bg-blue-50 dark:bg-blue-900/10 border-2 border-blue-400 dark:border-blue-700 p-4 mb-8" role="note"
|
|
113
|
+
aria-labelledby="formgroup-note-heading">
|
|
114
|
+
<h3 id="formgroup-note-heading" class="text-sm sm:text-base font-bold text-blue-800 dark:text-blue-300 mb-2 uppercase">
|
|
115
|
+
ReactiveFormsModule Compatible
|
|
116
|
+
</h3>
|
|
117
|
+
<p class="text-xs sm:text-sm text-blue-700 dark:text-blue-400 leading-relaxed">
|
|
118
|
+
This input component implements ControlValueAccessor for full Angular Forms compatibility.
|
|
119
|
+
Use <span class="bg-blue-100 dark:bg-blue-800 px-1 py-0.5">formControlName</span> for seamless reactive forms integration.
|
|
95
120
|
</p>
|
|
96
|
-
</
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
<
|
|
102
|
-
|
|
103
|
-
|
|
121
|
+
</aside>
|
|
122
|
+
|
|
123
|
+
<!-- Template Setup -->
|
|
124
|
+
<article class="mb-8" aria-labelledby="template-setup-heading">
|
|
125
|
+
<h3 id="template-setup-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
126
|
+
<span aria-hidden="true">> </span>Template Setup
|
|
127
|
+
</h3>
|
|
128
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
129
|
+
<pre><code [innerHTML]="formGroupTemplateCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
104
130
|
</div>
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
</
|
|
131
|
+
</article>
|
|
132
|
+
|
|
133
|
+
<!-- Component Setup -->
|
|
134
|
+
<article class="mb-8" aria-labelledby="component-setup-heading">
|
|
135
|
+
<h3 id="component-setup-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
136
|
+
<span aria-hidden="true">> </span>Component Setup
|
|
137
|
+
</h3>
|
|
138
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
139
|
+
<pre><code [innerHTML]="formGroupSetupCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
111
140
|
</div>
|
|
141
|
+
</article>
|
|
142
|
+
|
|
143
|
+
<!-- Live Example -->
|
|
144
|
+
<article class="mb-8" aria-labelledby="live-example-heading">
|
|
145
|
+
<h3 id="live-example-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
146
|
+
<span aria-hidden="true">> </span>Live Example
|
|
147
|
+
</h3>
|
|
148
|
+
<form [formGroup]="basicForm" (ngSubmit)="onBasicSubmit()"
|
|
149
|
+
class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]"
|
|
150
|
+
aria-label="FormGroup integration live example with name and email fields">
|
|
151
|
+
<div class="flex flex-col gap-2 w-full">
|
|
152
|
+
<div>
|
|
153
|
+
<label class="block text-xs sm:text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Name</label>
|
|
154
|
+
<wally-input formControlName="name" placeholder="Enter your name"></wally-input>
|
|
155
|
+
</div>
|
|
112
156
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
<div class="flex flex-col gap-2 w-full">
|
|
117
|
-
<div>
|
|
118
|
-
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Name</label>
|
|
119
|
-
<wally-input formControlName="name" placeholder="Enter your name"></wally-input>
|
|
120
|
-
</div>
|
|
121
|
-
|
|
122
|
-
<div>
|
|
123
|
-
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email</label>
|
|
124
|
-
<wally-input formControlName="email" type="email" placeholder="Enter your email"></wally-input>
|
|
125
|
-
</div>
|
|
126
|
-
|
|
127
|
-
<wally-button type="submit" class="w-full">
|
|
128
|
-
Submit (Check Console)
|
|
129
|
-
</wally-button>
|
|
130
|
-
|
|
131
|
-
<div class="text-sm text-gray-600 dark:text-gray-400 mt-4">
|
|
132
|
-
Form Value: {{ basicForm.value | json }}
|
|
133
|
-
</div>
|
|
157
|
+
<div>
|
|
158
|
+
<label class="block text-xs sm:text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Email</label>
|
|
159
|
+
<wally-input formControlName="email" type="email" placeholder="Enter your email"></wally-input>
|
|
134
160
|
</div>
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
161
|
+
|
|
162
|
+
<wally-button type="submit" class="w-full">
|
|
163
|
+
Submit (Check Console)
|
|
164
|
+
</wally-button>
|
|
165
|
+
|
|
166
|
+
<div class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mt-4">
|
|
167
|
+
Form Value: {{ basicForm.value | json }}
|
|
168
|
+
</div>
|
|
169
|
+
</div>
|
|
170
|
+
</form>
|
|
171
|
+
</article>
|
|
138
172
|
</section>
|
|
139
173
|
|
|
140
174
|
<!-- Basic Usage -->
|
|
141
|
-
<section class="mb-
|
|
142
|
-
<h2 class="text-
|
|
175
|
+
<section id="basic-usage" class="mb-12" aria-labelledby="basic-usage-heading">
|
|
176
|
+
<h2 id="basic-usage-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
177
|
+
[ Basic Usage ]
|
|
178
|
+
</h2>
|
|
143
179
|
|
|
144
|
-
<div class="space-y-
|
|
145
|
-
<div>
|
|
146
|
-
<
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
<
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
</div>
|
|
180
|
+
<div class="space-y-4">
|
|
181
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
182
|
+
<pre><code [innerHTML]="basicSetupCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
183
|
+
</div>
|
|
184
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
185
|
+
<pre><code [innerHTML]="basicUsageCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
186
|
+
</div>
|
|
187
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
188
|
+
aria-label="Live preview of basic input component without label">
|
|
189
|
+
<wally-input placeholder="Enter text"></wally-input>
|
|
155
190
|
</div>
|
|
156
191
|
</div>
|
|
157
192
|
</section>
|
|
158
193
|
|
|
159
|
-
<!--
|
|
160
|
-
<section class="mb-
|
|
161
|
-
<h2 class="text-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
<wally-input label="Full Name" placeholder="Enter your name"></wally-input>
|
|
173
|
-
<wally-input label="Email Address" type="email" placeholder="Enter your email"></wally-input>
|
|
174
|
-
</div>
|
|
175
|
-
</div>
|
|
194
|
+
<!-- States & Features -->
|
|
195
|
+
<section id="states" class="mb-12" aria-labelledby="states-heading">
|
|
196
|
+
<h2 id="states-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
197
|
+
[ States & Features ]
|
|
198
|
+
</h2>
|
|
199
|
+
|
|
200
|
+
<!-- Labels -->
|
|
201
|
+
<article class="mb-8" aria-labelledby="labels-heading">
|
|
202
|
+
<h3 id="labels-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
203
|
+
<span aria-hidden="true">> </span>With Labels
|
|
204
|
+
</h3>
|
|
205
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
206
|
+
<pre><code [innerHTML]="labelCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
176
207
|
</div>
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
<pre><code [innerHTML]="loadingCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
183
|
-
</div>
|
|
184
|
-
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
185
|
-
<wally-input label="Processing..." [loading]="true" placeholder="Loading example"></wally-input>
|
|
208
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
209
|
+
aria-label="Live preview showing inputs with labels for Full Name and Email Address">
|
|
210
|
+
<div class="flex flex-col gap-4">
|
|
211
|
+
<wally-input label="Full Name" placeholder="Enter your name"></wally-input>
|
|
212
|
+
<wally-input label="Email Address" type="email" placeholder="Enter your email"></wally-input>
|
|
186
213
|
</div>
|
|
187
214
|
</div>
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
</div>
|
|
215
|
+
</article>
|
|
216
|
+
|
|
217
|
+
<!-- Loading State -->
|
|
218
|
+
<article class="mb-8" aria-labelledby="loading-heading">
|
|
219
|
+
<h3 id="loading-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
220
|
+
<span aria-hidden="true">> </span>Loading State
|
|
221
|
+
</h3>
|
|
222
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
223
|
+
<pre><code [innerHTML]="loadingCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
198
224
|
</div>
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Error State</h3>
|
|
203
|
-
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
204
|
-
<pre><code [innerHTML]="errorCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
205
|
-
</div>
|
|
206
|
-
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
207
|
-
<wally-input label="Email" errorMessage="Please enter a valid email address" placeholder="Enter email"></wally-input>
|
|
208
|
-
</div>
|
|
225
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
226
|
+
aria-label="Live preview of loading state with spinner and disabled input">
|
|
227
|
+
<wally-input label="Processing..." [loading]="true" placeholder="Loading example"></wally-input>
|
|
209
228
|
</div>
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
</div>
|
|
229
|
+
</article>
|
|
230
|
+
|
|
231
|
+
<!-- Valid State -->
|
|
232
|
+
<article class="mb-8" aria-labelledby="valid-heading">
|
|
233
|
+
<h3 id="valid-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
234
|
+
<span aria-hidden="true">> </span>Valid State
|
|
235
|
+
</h3>
|
|
236
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
237
|
+
<pre><code [innerHTML]="validCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
220
238
|
</div>
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Password with Toggle</h3>
|
|
225
|
-
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
226
|
-
<pre><code [innerHTML]="passwordCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
227
|
-
</div>
|
|
228
|
-
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
229
|
-
<form>
|
|
230
|
-
<wally-input label="Password" type="password" placeholder="Enter secure password"></wally-input>
|
|
231
|
-
</form>
|
|
232
|
-
</div>
|
|
239
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
240
|
+
aria-label="Live preview of valid state with green styling indicating successful validation">
|
|
241
|
+
<wally-input label="Username" [valid]="true" placeholder="Valid input example"></wally-input>
|
|
233
242
|
</div>
|
|
234
|
-
</
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
<div>
|
|
244
|
-
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Validation Setup</h3>
|
|
245
|
-
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
246
|
-
<pre><code [innerHTML]="validationSetupCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
247
|
-
</div>
|
|
243
|
+
</article>
|
|
244
|
+
|
|
245
|
+
<!-- Error State -->
|
|
246
|
+
<article class="mb-8" aria-labelledby="error-heading">
|
|
247
|
+
<h3 id="error-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
248
|
+
<span aria-hidden="true">> </span>Error State
|
|
249
|
+
</h3>
|
|
250
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
251
|
+
<pre><code [innerHTML]="errorCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
248
252
|
</div>
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
<
|
|
252
|
-
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
253
|
-
<pre><code [innerHTML]="validationTemplateCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
254
|
-
</div>
|
|
253
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
254
|
+
aria-label="Live preview of error state with red styling and error message below input">
|
|
255
|
+
<wally-input label="Email" errorMessage="Please enter a valid email address" placeholder="Enter email"></wally-input>
|
|
255
256
|
</div>
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
@if (validationForm.get('username')?.invalid && validationForm.get('username')?.touched) {
|
|
266
|
-
<div class="mt-2">
|
|
267
|
-
<span class="text-red-500 text-sm">
|
|
268
|
-
@if (validationForm.get('username')?.errors?.['required']) {
|
|
269
|
-
<span>Username is required</span>
|
|
270
|
-
}
|
|
271
|
-
@if (validationForm.get('username')?.errors?.['minlength']) {
|
|
272
|
-
<span>Username must be at least 3 characters</span>
|
|
273
|
-
}
|
|
274
|
-
</span>
|
|
275
|
-
</div>
|
|
276
|
-
}
|
|
277
|
-
</div>
|
|
278
|
-
|
|
279
|
-
<wally-button type="submit" [disabled]="validationForm.invalid" class="w-full">
|
|
280
|
-
Submit ({{ validationForm.valid ? 'Valid' : 'Invalid' }})
|
|
281
|
-
</wally-button>
|
|
282
|
-
</div>
|
|
283
|
-
</form>
|
|
257
|
+
</article>
|
|
258
|
+
|
|
259
|
+
<!-- Disabled State -->
|
|
260
|
+
<article class="mb-8" aria-labelledby="disabled-heading">
|
|
261
|
+
<h3 id="disabled-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
262
|
+
<span aria-hidden="true">> </span>Disabled State
|
|
263
|
+
</h3>
|
|
264
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
265
|
+
<pre><code [innerHTML]="disabledCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
284
266
|
</div>
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
<!-- Properties -->
|
|
289
|
-
<section class="mb-8">
|
|
290
|
-
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Properties</h2>
|
|
291
|
-
|
|
292
|
-
<div class="space-y-4">
|
|
293
|
-
<div class="space-y-2">
|
|
294
|
-
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
295
|
-
<pre><code [innerHTML]="propertyLabelCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
296
|
-
</div>
|
|
297
|
-
<p class="text-sm text-gray-700 dark:text-gray-400">Optional label text displayed above the input</p>
|
|
267
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
268
|
+
aria-label="Live preview of disabled state with reduced opacity and cursor-not-allowed">
|
|
269
|
+
<wally-input label="Username" [disabled]="true" placeholder="Disabled input"></wally-input>
|
|
298
270
|
</div>
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
<
|
|
271
|
+
</article>
|
|
272
|
+
|
|
273
|
+
<!-- Password with Toggle -->
|
|
274
|
+
<article class="mb-8" aria-labelledby="password-heading">
|
|
275
|
+
<h3 id="password-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
276
|
+
<span aria-hidden="true">> </span>Password with Toggle
|
|
277
|
+
</h3>
|
|
278
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
279
|
+
<pre><code [innerHTML]="passwordCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
305
280
|
</div>
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
<
|
|
309
|
-
<
|
|
310
|
-
</
|
|
311
|
-
<p class="text-sm text-gray-700 dark:text-gray-400">Placeholder text for the input</p>
|
|
281
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
282
|
+
aria-label="Live preview of password input with show/hide toggle button">
|
|
283
|
+
<form>
|
|
284
|
+
<wally-input label="Password" type="password" placeholder="Enter secure password"></wally-input>
|
|
285
|
+
</form>
|
|
312
286
|
</div>
|
|
287
|
+
</article>
|
|
288
|
+
</section>
|
|
313
289
|
|
|
314
|
-
<div class="space-y-2">
|
|
315
|
-
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
316
|
-
<pre><code [innerHTML]="propertyLoadingCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
317
|
-
</div>
|
|
318
|
-
<p class="text-sm text-gray-700 dark:text-gray-400">Shows loading spinner and disables input when true</p>
|
|
319
|
-
</div>
|
|
320
290
|
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
291
|
+
<!-- Form Validation -->
|
|
292
|
+
<section id="validation" class="mb-12" aria-labelledby="validation-heading">
|
|
293
|
+
<h2 id="validation-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
294
|
+
[ Form Validation ]
|
|
295
|
+
</h2>
|
|
296
|
+
|
|
297
|
+
<!-- Validation Setup -->
|
|
298
|
+
<article class="mb-8" aria-labelledby="validation-setup-heading">
|
|
299
|
+
<h3 id="validation-setup-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
300
|
+
<span aria-hidden="true">> </span>Validation Setup
|
|
301
|
+
</h3>
|
|
302
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
303
|
+
<pre><code [innerHTML]="validationSetupCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
326
304
|
</div>
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
<
|
|
305
|
+
</article>
|
|
306
|
+
|
|
307
|
+
<!-- Template with Validation -->
|
|
308
|
+
<article class="mb-8" aria-labelledby="validation-template-heading">
|
|
309
|
+
<h3 id="validation-template-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
310
|
+
<span aria-hidden="true">> </span>Template with Validation
|
|
311
|
+
</h3>
|
|
312
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
313
|
+
<pre><code [innerHTML]="validationTemplateCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
333
314
|
</div>
|
|
315
|
+
</article>
|
|
316
|
+
|
|
317
|
+
<!-- Live Validation Example -->
|
|
318
|
+
<article class="mb-8" aria-labelledby="validation-example-heading">
|
|
319
|
+
<h3 id="validation-example-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
320
|
+
<span aria-hidden="true">> </span>Live Validation Example
|
|
321
|
+
</h3>
|
|
322
|
+
<form [formGroup]="validationForm" (ngSubmit)="onValidationSubmit()"
|
|
323
|
+
class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]"
|
|
324
|
+
aria-label="Live validation example with username field requiring minimum 3 characters">
|
|
325
|
+
<div class="flex flex-col gap-2 w-full">
|
|
326
|
+
<div>
|
|
327
|
+
<label class="block text-xs sm:text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Username (min 3 chars)</label>
|
|
328
|
+
<wally-input formControlName="username" placeholder="Enter username"></wally-input>
|
|
329
|
+
|
|
330
|
+
@if (validationForm.get('username')?.invalid && validationForm.get('username')?.touched) {
|
|
331
|
+
<div class="mt-2">
|
|
332
|
+
<span class="text-red-500 text-xs sm:text-sm">
|
|
333
|
+
@if (validationForm.get('username')?.errors?.['required']) {
|
|
334
|
+
<span>Username is required</span>
|
|
335
|
+
}
|
|
336
|
+
@if (validationForm.get('username')?.errors?.['minlength']) {
|
|
337
|
+
<span>Username must be at least 3 characters</span>
|
|
338
|
+
}
|
|
339
|
+
</span>
|
|
340
|
+
</div>
|
|
341
|
+
}
|
|
342
|
+
</div>
|
|
334
343
|
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
344
|
+
<wally-button type="submit" [disabled]="validationForm.invalid" class="w-full">
|
|
345
|
+
Submit ({{ validationForm.valid ? 'Valid' : 'Invalid' }})
|
|
346
|
+
</wally-button>
|
|
338
347
|
</div>
|
|
339
|
-
|
|
348
|
+
</form>
|
|
349
|
+
</article>
|
|
350
|
+
</section>
|
|
351
|
+
|
|
352
|
+
<!-- API Reference -->
|
|
353
|
+
<section id="api" class="mb-12" aria-labelledby="api-heading">
|
|
354
|
+
<h2 id="api-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
355
|
+
[ API Reference ]
|
|
356
|
+
</h2>
|
|
357
|
+
|
|
358
|
+
<div class="bg-white dark:bg-[#0f0f0f] border-2 border-neutral-300 dark:border-neutral-800 overflow-hidden">
|
|
359
|
+
<div class="overflow-x-auto">
|
|
360
|
+
<table class="w-full text-xs sm:text-sm" role="table" aria-label="Input component API reference with properties, types, defaults, and descriptions">
|
|
361
|
+
<thead class="bg-gray-50 dark:bg-gray-900">
|
|
362
|
+
<tr>
|
|
363
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100" scope="col">Property</th>
|
|
364
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100" scope="col">Type</th>
|
|
365
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100" scope="col">Default</th>
|
|
366
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100" scope="col">Description</th>
|
|
367
|
+
</tr>
|
|
368
|
+
</thead>
|
|
369
|
+
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
|
|
370
|
+
<tr>
|
|
371
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">label</td>
|
|
372
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">string</td>
|
|
373
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">''</td>
|
|
374
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Optional label text displayed above the input</td>
|
|
375
|
+
</tr>
|
|
376
|
+
<tr>
|
|
377
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">type</td>
|
|
378
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">string</td>
|
|
379
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">'text'</td>
|
|
380
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">HTML input type (text, email, password, etc.)</td>
|
|
381
|
+
</tr>
|
|
382
|
+
<tr>
|
|
383
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">placeholder</td>
|
|
384
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">string</td>
|
|
385
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">''</td>
|
|
386
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Placeholder text for the input</td>
|
|
387
|
+
</tr>
|
|
388
|
+
<tr>
|
|
389
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">loading</td>
|
|
390
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">boolean</td>
|
|
391
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">false</td>
|
|
392
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Shows loading spinner and disables input when true</td>
|
|
393
|
+
</tr>
|
|
394
|
+
<tr>
|
|
395
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">valid</td>
|
|
396
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">boolean</td>
|
|
397
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">false</td>
|
|
398
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Shows green styling when input is valid</td>
|
|
399
|
+
</tr>
|
|
400
|
+
<tr>
|
|
401
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">errorMessage</td>
|
|
402
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">string</td>
|
|
403
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">''</td>
|
|
404
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Error message text - shows red styling and displays error below input</td>
|
|
405
|
+
</tr>
|
|
406
|
+
<tr>
|
|
407
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">disabled</td>
|
|
408
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">boolean</td>
|
|
409
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">false</td>
|
|
410
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Disables the input when true - shows visual disabled state and prevents interaction</td>
|
|
411
|
+
</tr>
|
|
412
|
+
</tbody>
|
|
413
|
+
</table>
|
|
340
414
|
</div>
|
|
341
415
|
</div>
|
|
342
416
|
</section>
|
|
343
417
|
|
|
344
418
|
<!-- Future Features -->
|
|
345
|
-
<section class="mb-
|
|
346
|
-
<h2 class="text-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
419
|
+
<section id="future" class="mb-12" aria-labelledby="future-heading">
|
|
420
|
+
<h2 id="future-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
421
|
+
[ Future Features ]
|
|
422
|
+
</h2>
|
|
423
|
+
|
|
424
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border-2 border-neutral-300 dark:border-neutral-700 p-4">
|
|
425
|
+
<div class="flex items-center gap-3 mb-3">
|
|
426
|
+
<h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white uppercase">
|
|
427
|
+
Styles-Only Directive
|
|
428
|
+
</h3>
|
|
429
|
+
<span class="text-[10px] font-bold bg-blue-500 text-white px-2 py-1 uppercase tracking-wider" aria-label="Status: Coming Soon Feature">
|
|
430
|
+
COMING SOON
|
|
431
|
+
</span>
|
|
357
432
|
</div>
|
|
433
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">
|
|
434
|
+
A lightweight directive for developers who want only the input styling without the full component logic.
|
|
435
|
+
</p>
|
|
358
436
|
</div>
|
|
359
437
|
</section>
|
|
360
438
|
|
|
361
439
|
</div>
|
|
362
|
-
</
|
|
440
|
+
</main>
|