wally-ui 1.11.0 → 1.11.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +89 -93
- package/package.json +1 -1
- package/playground/showcase/src/app/components/carousel/carousel.html +33 -1
- package/playground/showcase/src/app/components/carousel/carousel.ts +251 -199
- package/playground/showcase/src/app/pages/documentation/components/breadcrumb-docs/breadcrumb-docs.html +186 -114
- package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.examples.ts +114 -0
- package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.html +516 -248
- package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.ts +11 -0
- package/playground/showcase/src/app/pages/documentation/components/carousel-docs/carousel-docs.html +326 -253
- package/playground/showcase/src/app/pages/documentation/components/components.html +136 -74
- package/playground/showcase/src/app/pages/documentation/components/input-docs/input-docs.html +370 -292
- package/playground/showcase/src/app/pages/documentation/documentation.html +204 -153
- package/playground/showcase/src/app/pages/home/home.html +153 -50
- package/playground/showcase/src/app/pages/home/home.ts +2 -1
- package/playground/showcase/src/app/pages/mcp/mcp.html +235 -179
package/playground/showcase/src/app/pages/documentation/components/carousel-docs/carousel-docs.html
CHANGED
|
@@ -1,59 +1,83 @@
|
|
|
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
|
-
|
|
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>Carousel
|
|
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 carousel component with touch/swipe gestures, keyboard navigation, circular buffer algorithm, and comprehensive ARIA accessibility. GPU-accelerated transitions with zero configuration required.
|
|
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"
|
|
19
|
+
aria-label="Open documentation in AI coding assistants">
|
|
20
|
+
<a [href]="claudeUrl" target="_blank"
|
|
21
|
+
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"
|
|
22
|
+
rel="noopener noreferrer" role="listitem"
|
|
23
|
+
aria-label="Open Carousel component documentation in Claude AI assistant (opens in new tab)">
|
|
24
|
+
<svg xmlns="http://www.w3.org/2000/svg"
|
|
25
|
+
class="size-5 text-[#0a0a0a] dark:text-neutral-400 group-hover:text-white dark:group-hover:text-[#0a0a0a] transition-colors duration-150"
|
|
26
|
+
viewBox="0 0 24 24" aria-hidden="true">
|
|
27
|
+
<path fill="currentColor"
|
|
28
|
+
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" />
|
|
29
|
+
</svg>
|
|
30
|
+
<span
|
|
31
|
+
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">
|
|
32
|
+
Open in Claude
|
|
33
|
+
</span>
|
|
34
|
+
</a>
|
|
35
|
+
|
|
36
|
+
<a [href]="chatGptUrl" target="_blank"
|
|
37
|
+
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"
|
|
38
|
+
rel="noopener noreferrer" role="listitem"
|
|
39
|
+
aria-label="Open Carousel component documentation in ChatGPT AI assistant (opens in new tab)">
|
|
40
|
+
<svg xmlns="http://www.w3.org/2000/svg"
|
|
41
|
+
class="size-5 text-[#0a0a0a] dark:text-neutral-400 group-hover:text-white dark:group-hover:text-[#0a0a0a] transition-colors duration-150"
|
|
42
|
+
viewBox="0 0 48 48" aria-hidden="true">
|
|
43
|
+
<path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
|
|
44
|
+
d="M18.38 27.94v-14.4l11.19-6.46c6.2-3.58 17.3 5.25 12.64 13.33" />
|
|
45
|
+
<path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
|
|
46
|
+
d="m18.38 20.94l12.47-7.2l11.19 6.46c6.2 3.58 4.1 17.61-5.23 17.61" />
|
|
47
|
+
<path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
|
|
48
|
+
d="m24.44 17.44l12.47 7.2v12.93c0 7.16-13.2 12.36-17.86 4.28" />
|
|
49
|
+
<path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
|
|
50
|
+
d="M30.5 21.2v14.14L19.31 41.8c-6.2 3.58-17.3-5.25-12.64-13.33" />
|
|
51
|
+
<path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
|
|
52
|
+
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" />
|
|
53
|
+
<path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
|
|
54
|
+
d="m24.44 31.44l-12.47-7.2V11.31c0-7.16 13.2-12.36 17.86-4.28" />
|
|
55
|
+
</svg>
|
|
56
|
+
<span
|
|
57
|
+
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">
|
|
58
|
+
Open in ChatGPT
|
|
59
|
+
</span>
|
|
60
|
+
</a>
|
|
61
|
+
</div>
|
|
62
|
+
</header>
|
|
44
63
|
|
|
45
64
|
<!-- Installation -->
|
|
46
|
-
<section class="mb-
|
|
47
|
-
<h2 class="text-
|
|
48
|
-
|
|
49
|
-
|
|
65
|
+
<section id="installation" class="mb-12" aria-labelledby="installation-heading">
|
|
66
|
+
<h2 id="installation-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
67
|
+
[ Installation ]
|
|
68
|
+
</h2>
|
|
69
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
70
|
+
<pre><code [innerHTML]="installationCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
50
71
|
</div>
|
|
51
72
|
</section>
|
|
52
73
|
|
|
53
74
|
<!-- Preview -->
|
|
54
|
-
<section class="mb-
|
|
55
|
-
<h2 class="text-
|
|
56
|
-
|
|
75
|
+
<section id="preview" class="mb-12" aria-labelledby="preview-heading">
|
|
76
|
+
<h2 id="preview-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
77
|
+
[ Preview ]
|
|
78
|
+
</h2>
|
|
79
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
80
|
+
aria-label="Live preview of carousel with 3 slides showing blue, green, and purple backgrounds">
|
|
57
81
|
<div class="flex justify-center">
|
|
58
82
|
<div class="w-96 h-96">
|
|
59
83
|
<wally-carousel>
|
|
@@ -63,8 +87,7 @@
|
|
|
63
87
|
<div class="w-full h-full bg-green-500 text-white flex items-center justify-center text-lg font-semibold">
|
|
64
88
|
Slide 2
|
|
65
89
|
</div>
|
|
66
|
-
<div
|
|
67
|
-
class="w-full h-full bg-purple-500 text-white flex items-center justify-center text-lg font-semibold">
|
|
90
|
+
<div class="w-full h-full bg-purple-500 text-white flex items-center justify-center text-lg font-semibold">
|
|
68
91
|
Slide 3
|
|
69
92
|
</div>
|
|
70
93
|
</wally-carousel>
|
|
@@ -74,33 +97,40 @@
|
|
|
74
97
|
</section>
|
|
75
98
|
|
|
76
99
|
<!-- Import -->
|
|
77
|
-
<section class="mb-
|
|
78
|
-
<h2 class="text-
|
|
100
|
+
<section id="import" class="mb-12" aria-labelledby="import-heading">
|
|
101
|
+
<h2 id="import-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
102
|
+
[ Import ]
|
|
103
|
+
</h2>
|
|
79
104
|
<div class="space-y-4">
|
|
80
|
-
<div class="bg-
|
|
81
|
-
<pre><code [innerHTML]="importCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
105
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
106
|
+
<pre><code [innerHTML]="importCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
82
107
|
</div>
|
|
83
108
|
|
|
84
|
-
<div class="bg-
|
|
85
|
-
<pre><code [innerHTML]="componentImportCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
109
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
110
|
+
<pre><code [innerHTML]="componentImportCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
86
111
|
</div>
|
|
87
112
|
</div>
|
|
88
113
|
</section>
|
|
89
114
|
|
|
90
115
|
<!-- Basic Usage -->
|
|
91
|
-
<section class="mb-
|
|
92
|
-
<h2 class="text-
|
|
93
|
-
|
|
116
|
+
<section id="basic-usage" class="mb-12" aria-labelledby="basic-usage-heading">
|
|
117
|
+
<h2 id="basic-usage-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
118
|
+
[ Basic Usage ]
|
|
119
|
+
</h2>
|
|
120
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-6 leading-relaxed">
|
|
94
121
|
Simple carousel setup - just wrap your content elements. No configuration required.
|
|
95
122
|
</p>
|
|
96
123
|
|
|
97
|
-
<!-- Simple
|
|
98
|
-
<
|
|
99
|
-
<h3 class="text-
|
|
100
|
-
|
|
101
|
-
|
|
124
|
+
<!-- Simple Carousel -->
|
|
125
|
+
<article class="mb-8" aria-labelledby="simple-carousel-heading">
|
|
126
|
+
<h3 id="simple-carousel-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
127
|
+
<span aria-hidden="true">> </span>Simple Carousel
|
|
128
|
+
</h3>
|
|
129
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
130
|
+
<pre><code [innerHTML]="basicUsageCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
102
131
|
</div>
|
|
103
|
-
<div class="p-
|
|
132
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
133
|
+
aria-label="Live example of simple carousel with 2 items">
|
|
104
134
|
<div class="flex justify-center">
|
|
105
135
|
<div class="w-96 h-96">
|
|
106
136
|
<wally-carousel>
|
|
@@ -114,15 +144,18 @@
|
|
|
114
144
|
</div>
|
|
115
145
|
</div>
|
|
116
146
|
</div>
|
|
117
|
-
</
|
|
147
|
+
</article>
|
|
118
148
|
|
|
119
149
|
<!-- With Navigation Indicators -->
|
|
120
|
-
<
|
|
121
|
-
<h3 class="text-
|
|
122
|
-
|
|
123
|
-
|
|
150
|
+
<article class="mb-8" aria-labelledby="navigation-indicators-heading">
|
|
151
|
+
<h3 id="navigation-indicators-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
152
|
+
<span aria-hidden="true">> </span>With Navigation Indicators
|
|
153
|
+
</h3>
|
|
154
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
155
|
+
<pre><code [innerHTML]="withNavigationIndicatorsCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
124
156
|
</div>
|
|
125
|
-
<div class="p-
|
|
157
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
158
|
+
aria-label="Carousel with navigation dot indicators example (currently commented out)">
|
|
126
159
|
<div class="flex justify-center">
|
|
127
160
|
<div class="w-96 h-96">
|
|
128
161
|
<wally-carousel [isNavigationIndicator]="true">
|
|
@@ -136,15 +169,18 @@
|
|
|
136
169
|
</div>
|
|
137
170
|
</div>
|
|
138
171
|
</div>
|
|
139
|
-
</
|
|
172
|
+
</article>
|
|
140
173
|
|
|
141
174
|
<!-- Product Showcase -->
|
|
142
|
-
<
|
|
143
|
-
<h3 class="text-
|
|
144
|
-
|
|
145
|
-
|
|
175
|
+
<!-- <article class="mb-8" aria-labelledby="product-showcase-heading">
|
|
176
|
+
<h3 id="product-showcase-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
177
|
+
<span aria-hidden="true">> </span>Product Showcase
|
|
178
|
+
</h3>
|
|
179
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-4">
|
|
180
|
+
<pre><code [innerHTML]="productShowcaseCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
146
181
|
</div>
|
|
147
|
-
<div class="p-
|
|
182
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
183
|
+
aria-label="Product showcase carousel displaying MacBook Pro, iPhone 15, and iPad Air with prices">
|
|
148
184
|
<div class="w-full h-96">
|
|
149
185
|
<wally-carousel>
|
|
150
186
|
<div class="w-full h-full bg-white dark:bg-[#1a1a1a] border border-gray-200 dark:border-gray-700 rounded-lg p-8 flex flex-col items-center justify-center">
|
|
@@ -168,29 +204,38 @@
|
|
|
168
204
|
</wally-carousel>
|
|
169
205
|
</div>
|
|
170
206
|
</div>
|
|
171
|
-
</
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
207
|
+
</article> -->
|
|
208
|
+
|
|
209
|
+
<!-- Tip Box -->
|
|
210
|
+
<aside class="mt-6 p-4 bg-amber-50 dark:bg-amber-900/10 border-2 border-amber-400 dark:border-amber-700" role="note"
|
|
211
|
+
aria-labelledby="tip-heading">
|
|
212
|
+
<h3 id="tip-heading" class="text-sm sm:text-base font-bold text-amber-800 dark:text-amber-300 mb-2 uppercase">
|
|
213
|
+
Tip
|
|
214
|
+
</h3>
|
|
215
|
+
<p class="text-xs sm:text-sm text-amber-700 dark:text-amber-400 leading-relaxed">
|
|
176
216
|
The carousel automatically detects child elements and creates navigation.
|
|
177
217
|
Try swiping on mobile or using keyboard arrows when focused!
|
|
178
218
|
</p>
|
|
179
|
-
</
|
|
219
|
+
</aside>
|
|
180
220
|
</section>
|
|
181
221
|
|
|
182
222
|
|
|
183
223
|
<!-- Advanced Examples -->
|
|
184
|
-
<section class="mb-
|
|
185
|
-
<h2
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
224
|
+
<section id="advanced-examples" class="mb-12" aria-labelledby="advanced-heading">
|
|
225
|
+
<h2 id="advanced-heading"
|
|
226
|
+
class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
227
|
+
[ Advanced Examples ]
|
|
228
|
+
</h2>
|
|
229
|
+
|
|
230
|
+
<article class="mb-8" aria-labelledby="custom-content-heading">
|
|
231
|
+
<h3 id="custom-content-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
232
|
+
<span aria-hidden="true">> </span>Custom Content
|
|
233
|
+
</h3>
|
|
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]="customContentCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
192
236
|
</div>
|
|
193
|
-
<div class="p-
|
|
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 example of carousel with custom rich content and gradient backgrounds">
|
|
194
239
|
<div class="flex justify-center">
|
|
195
240
|
<div class="w-96 h-96">
|
|
196
241
|
<wally-carousel>
|
|
@@ -213,47 +258,53 @@
|
|
|
213
258
|
</div>
|
|
214
259
|
</div>
|
|
215
260
|
</div>
|
|
216
|
-
</
|
|
261
|
+
</article>
|
|
217
262
|
</section>
|
|
218
263
|
|
|
219
264
|
<!-- Responsive Design -->
|
|
220
|
-
<section class="mb-
|
|
221
|
-
<h2
|
|
222
|
-
|
|
265
|
+
<section id="responsive-design" class="mb-12" aria-labelledby="responsive-heading">
|
|
266
|
+
<h2 id="responsive-heading"
|
|
267
|
+
class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
268
|
+
[ Responsive Design ]
|
|
269
|
+
</h2>
|
|
270
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-4 leading-relaxed">
|
|
223
271
|
The carousel is 100% responsive and adapts to any container size. Simply set the parent container dimensions and
|
|
224
272
|
the carousel will fill it completely.
|
|
225
273
|
</p>
|
|
226
|
-
<div class="bg-
|
|
227
|
-
<pre><code [innerHTML]="responsiveExampleCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
274
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 mb-8">
|
|
275
|
+
<pre><code [innerHTML]="responsiveExampleCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
228
276
|
</div>
|
|
229
277
|
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
<div class="p-
|
|
278
|
+
<div class="space-y-8" role="list" aria-label="Responsive carousel examples">
|
|
279
|
+
<article role="listitem" aria-labelledby="hero-carousel-heading">
|
|
280
|
+
<h3 id="hero-carousel-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
281
|
+
<span aria-hidden="true">> </span>Hero Carousel (w-full h-96)
|
|
282
|
+
</h3>
|
|
283
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
284
|
+
aria-label="Live example of hero carousel with full width and 96 height">
|
|
236
285
|
<div class="w-full h-96">
|
|
237
286
|
<wally-carousel>
|
|
238
287
|
<div
|
|
239
288
|
class="w-full h-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white flex flex-col items-center justify-center p-6">
|
|
240
|
-
<
|
|
289
|
+
<h4 class="text-2xl font-bold mb-2">Hero Slide 1</h4>
|
|
241
290
|
<p class="text-center">Perfect for landing page heroes</p>
|
|
242
291
|
</div>
|
|
243
292
|
<div
|
|
244
293
|
class="w-full h-full bg-gradient-to-r from-purple-600 to-pink-600 text-white flex flex-col items-center justify-center p-6">
|
|
245
|
-
<
|
|
294
|
+
<h4 class="text-2xl font-bold mb-2">Hero Slide 2</h4>
|
|
246
295
|
<p class="text-center">Responsive and touch-friendly</p>
|
|
247
296
|
</div>
|
|
248
297
|
</wally-carousel>
|
|
249
298
|
</div>
|
|
250
299
|
</div>
|
|
251
|
-
</
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
300
|
+
</article>
|
|
301
|
+
|
|
302
|
+
<article role="listitem" aria-labelledby="compact-carousel-heading">
|
|
303
|
+
<h3 id="compact-carousel-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
304
|
+
<span aria-hidden="true">> </span>Compact Carousel (w-full h-48)
|
|
305
|
+
</h3>
|
|
306
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
307
|
+
aria-label="Live example of compact carousel with full width and 48 height">
|
|
257
308
|
<div class="w-full h-48">
|
|
258
309
|
<wally-carousel>
|
|
259
310
|
<div
|
|
@@ -273,221 +324,234 @@
|
|
|
273
324
|
</wally-carousel>
|
|
274
325
|
</div>
|
|
275
326
|
</div>
|
|
276
|
-
</
|
|
327
|
+
</article>
|
|
277
328
|
</div>
|
|
278
329
|
</section>
|
|
279
330
|
|
|
280
331
|
<!-- Accessibility -->
|
|
281
|
-
<section class="mb-
|
|
282
|
-
<h2
|
|
283
|
-
|
|
332
|
+
<section id="accessibility" class="mb-12" aria-labelledby="accessibility-heading">
|
|
333
|
+
<h2 id="accessibility-heading"
|
|
334
|
+
class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
335
|
+
[ Accessibility ]
|
|
336
|
+
</h2>
|
|
337
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-6 leading-relaxed">
|
|
284
338
|
The carousel is built with comprehensive accessibility features and follows WCAG guidelines for inclusive design.
|
|
285
339
|
</p>
|
|
286
340
|
|
|
287
341
|
<div class="space-y-8">
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
342
|
+
<article aria-labelledby="aria-attributes-heading">
|
|
343
|
+
<h3 id="aria-attributes-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
344
|
+
<span aria-hidden="true">> </span>ARIA Attributes
|
|
345
|
+
</h3>
|
|
346
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]">
|
|
292
347
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
293
348
|
<div class="space-y-3">
|
|
294
349
|
<div>
|
|
295
|
-
<code class="text-sm dark:text-white bg-
|
|
296
|
-
<p class="text-xs text-
|
|
350
|
+
<code class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white bg-neutral-100 dark:bg-[#1a1a1a] px-2 py-1">role="region"</code>
|
|
351
|
+
<p class="text-xs text-neutral-600 dark:text-neutral-400 mt-1">Identifies the carousel as a landmark region</p>
|
|
297
352
|
</div>
|
|
298
353
|
<div>
|
|
299
|
-
<code class="text-sm dark:text-white bg-
|
|
300
|
-
<p class="text-xs text-
|
|
354
|
+
<code class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white bg-neutral-100 dark:bg-[#1a1a1a] px-2 py-1">aria-label="Carousel"</code>
|
|
355
|
+
<p class="text-xs text-neutral-600 dark:text-neutral-400 mt-1">Provides accessible name for screen readers</p>
|
|
301
356
|
</div>
|
|
302
357
|
</div>
|
|
303
358
|
<div class="space-y-3">
|
|
304
359
|
<div>
|
|
305
|
-
<code class="text-sm dark:text-white bg-
|
|
306
|
-
<p class="text-xs text-
|
|
360
|
+
<code class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white bg-neutral-100 dark:bg-[#1a1a1a] px-2 py-1">tabindex="0"</code>
|
|
361
|
+
<p class="text-xs text-neutral-600 dark:text-neutral-400 mt-1">Makes carousel keyboard focusable</p>
|
|
307
362
|
</div>
|
|
308
363
|
<div>
|
|
309
|
-
<code class="text-sm dark:text-white bg-
|
|
310
|
-
<p class="text-xs text-
|
|
364
|
+
<code class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white bg-neutral-100 dark:bg-[#1a1a1a] px-2 py-1">aria-label="Navigate to slide X"</code>
|
|
365
|
+
<p class="text-xs text-neutral-600 dark:text-neutral-400 mt-1">Descriptive labels for navigation indicators</p>
|
|
311
366
|
</div>
|
|
312
367
|
</div>
|
|
313
368
|
</div>
|
|
314
369
|
</div>
|
|
315
|
-
</
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
370
|
+
</article>
|
|
371
|
+
|
|
372
|
+
<article aria-labelledby="keyboard-example-heading">
|
|
373
|
+
<h3 id="keyboard-example-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
374
|
+
<span aria-hidden="true">> </span>Keyboard Navigation Example
|
|
375
|
+
</h3>
|
|
376
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-4 leading-relaxed">
|
|
377
|
+
Click the carousel below to focus it, then use keyboard arrows to navigate:
|
|
378
|
+
</p>
|
|
379
|
+
<div class="p-8 border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="img"
|
|
380
|
+
aria-label="Live example demonstrating keyboard navigation with arrow keys">
|
|
324
381
|
<div class="w-full h-64">
|
|
325
382
|
<wally-carousel>
|
|
326
383
|
<div class="w-full h-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white flex flex-col items-center justify-center p-6">
|
|
327
|
-
<
|
|
384
|
+
<h4 class="text-xl font-bold mb-2">Keyboard Accessible</h4>
|
|
328
385
|
<p class="text-center text-sm">Use ← → arrows when focused</p>
|
|
329
386
|
</div>
|
|
330
387
|
<div class="w-full h-full bg-gradient-to-r from-purple-600 to-pink-600 text-white flex flex-col items-center justify-center p-6">
|
|
331
|
-
<
|
|
388
|
+
<h4 class="text-xl font-bold mb-2">Screen Reader Friendly</h4>
|
|
332
389
|
<p class="text-center text-sm">Proper ARIA attributes included</p>
|
|
333
390
|
</div>
|
|
334
391
|
<div class="w-full h-full bg-gradient-to-r from-pink-600 to-rose-600 text-white flex flex-col items-center justify-center p-6">
|
|
335
|
-
<
|
|
392
|
+
<h4 class="text-xl font-bold mb-2">WCAG Compliant</h4>
|
|
336
393
|
<p class="text-center text-sm">WCAG accessibility standards</p>
|
|
337
394
|
</div>
|
|
338
395
|
</wally-carousel>
|
|
339
396
|
</div>
|
|
340
397
|
</div>
|
|
341
|
-
</
|
|
342
|
-
|
|
398
|
+
</article>
|
|
343
399
|
</div>
|
|
344
400
|
</section>
|
|
345
401
|
|
|
346
402
|
<!-- Properties -->
|
|
347
|
-
<section class="mb-
|
|
348
|
-
<h2
|
|
349
|
-
|
|
403
|
+
<section id="properties" class="mb-12" aria-labelledby="properties-heading">
|
|
404
|
+
<h2 id="properties-heading"
|
|
405
|
+
class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
406
|
+
[ Properties ]
|
|
407
|
+
</h2>
|
|
408
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-4 leading-relaxed">
|
|
350
409
|
The carousel component accepts one optional input property and automatically manages its internal state.
|
|
351
410
|
</p>
|
|
352
411
|
|
|
353
|
-
<div class="space-y-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
412
|
+
<div class="space-y-8">
|
|
413
|
+
<article aria-labelledby="input-properties-heading">
|
|
414
|
+
<h3 id="input-properties-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
415
|
+
<span aria-hidden="true">> </span>Input Properties
|
|
416
|
+
</h3>
|
|
357
417
|
<div class="space-y-2">
|
|
358
|
-
<div class="bg-
|
|
359
|
-
<pre><code [innerHTML]="propertyIsNavigationIndicatorCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
418
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
419
|
+
<pre><code [innerHTML]="propertyIsNavigationIndicatorCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
360
420
|
</div>
|
|
361
|
-
<p class="text-sm text-
|
|
421
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">
|
|
362
422
|
Controls whether navigation indicators (dots) are displayed below the carousel.
|
|
363
423
|
</p>
|
|
364
424
|
</div>
|
|
365
|
-
</
|
|
425
|
+
</article>
|
|
366
426
|
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
427
|
+
<article aria-labelledby="readonly-properties-heading">
|
|
428
|
+
<h3 id="readonly-properties-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
429
|
+
<span aria-hidden="true">> </span>Read-only Properties
|
|
430
|
+
</h3>
|
|
370
431
|
<div class="space-y-4">
|
|
371
432
|
<div class="space-y-2">
|
|
372
|
-
<div class="bg-
|
|
373
|
-
<pre><code [innerHTML]="propertyTotalItemsCountCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
433
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
434
|
+
<pre><code [innerHTML]="propertyTotalItemsCountCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
374
435
|
</div>
|
|
375
|
-
<p class="text-sm text-
|
|
436
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">Automatically detected number of child elements in the carousel</p>
|
|
376
437
|
</div>
|
|
377
438
|
|
|
378
439
|
<div class="space-y-2">
|
|
379
|
-
<div class="bg-
|
|
380
|
-
<pre><code [innerHTML]="propertyCurrentVisibleItemIndexCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
440
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
441
|
+
<pre><code [innerHTML]="propertyCurrentVisibleItemIndexCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
381
442
|
</div>
|
|
382
|
-
<p class="text-sm text-
|
|
443
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">Zero-based index of the currently visible slide</p>
|
|
383
444
|
</div>
|
|
384
445
|
|
|
385
446
|
<div class="space-y-2">
|
|
386
|
-
<div class="bg-
|
|
387
|
-
<pre><code [innerHTML]="propertyNavigationIndicatorsArrayCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
447
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
448
|
+
<pre><code [innerHTML]="propertyNavigationIndicatorsArrayCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
388
449
|
</div>
|
|
389
|
-
<p class="text-sm text-
|
|
450
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">Auto-generated array used for rendering navigation indicators</p>
|
|
390
451
|
</div>
|
|
391
452
|
</div>
|
|
392
|
-
</
|
|
453
|
+
</article>
|
|
393
454
|
</div>
|
|
394
455
|
</section>
|
|
395
456
|
|
|
396
457
|
<!-- API Methods -->
|
|
397
|
-
<section class="mb-
|
|
398
|
-
<h2
|
|
399
|
-
|
|
458
|
+
<section id="api-methods" class="mb-12" aria-labelledby="api-heading">
|
|
459
|
+
<h2 id="api-heading"
|
|
460
|
+
class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
461
|
+
[ API Methods ]
|
|
462
|
+
</h2>
|
|
463
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-4 leading-relaxed">
|
|
400
464
|
Public methods available for programmatic control of the carousel. Access these methods through a template reference or ViewChild.
|
|
401
465
|
</p>
|
|
402
466
|
|
|
403
467
|
<div class="overflow-x-auto">
|
|
404
|
-
<table class="w-full border-collapse border border-
|
|
468
|
+
<table class="w-full border-collapse border-2 border-neutral-300 dark:border-neutral-700">
|
|
405
469
|
<thead>
|
|
406
|
-
<tr class="bg-
|
|
407
|
-
<th class="border border-
|
|
408
|
-
<th class="border border-
|
|
409
|
-
<th class="border border-
|
|
410
|
-
<th class="border border-
|
|
470
|
+
<tr class="bg-neutral-100 dark:bg-[#1a1a1a]">
|
|
471
|
+
<th class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-3 text-left text-xs sm:text-sm font-bold text-[#0a0a0a] dark:text-white">Method</th>
|
|
472
|
+
<th class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-3 text-left text-xs sm:text-sm font-bold text-[#0a0a0a] dark:text-white">Parameters</th>
|
|
473
|
+
<th class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-3 text-left text-xs sm:text-sm font-bold text-[#0a0a0a] dark:text-white">Return</th>
|
|
474
|
+
<th class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-3 text-left text-xs sm:text-sm font-bold text-[#0a0a0a] dark:text-white">Description</th>
|
|
411
475
|
</tr>
|
|
412
476
|
</thead>
|
|
413
477
|
<tbody>
|
|
414
478
|
<!-- Navigation Methods -->
|
|
415
479
|
<tr class="bg-blue-50 dark:bg-blue-900/20">
|
|
416
|
-
<td colspan="4" class="border border-
|
|
480
|
+
<td colspan="4" class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-2 text-xs sm:text-sm font-bold text-blue-900 dark:text-blue-100 uppercase">Navigation Methods</td>
|
|
417
481
|
</tr>
|
|
418
482
|
<tr>
|
|
419
|
-
<td class="border border-
|
|
420
|
-
<code class="bg-
|
|
483
|
+
<td class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-3 text-xs sm:text-sm">
|
|
484
|
+
<code class="bg-neutral-100 dark:bg-[#1a1a1a] text-[#0a0a0a] dark:text-white px-2 py-1 text-xs">navigateToNextItem()</code>
|
|
421
485
|
</td>
|
|
422
|
-
<td class="border border-
|
|
423
|
-
<td class="border border-
|
|
424
|
-
<td class="border border-
|
|
486
|
+
<td class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-3 text-xs sm:text-sm text-neutral-600 dark:text-neutral-400">None</td>
|
|
487
|
+
<td class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-3 text-xs sm:text-sm text-neutral-600 dark:text-neutral-400">void</td>
|
|
488
|
+
<td class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-3 text-xs sm:text-sm text-neutral-700 dark:text-neutral-300">Navigate to the next slide with circular navigation</td>
|
|
425
489
|
</tr>
|
|
426
490
|
<tr>
|
|
427
|
-
<td class="border border-
|
|
428
|
-
<code class="bg-
|
|
491
|
+
<td class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-3 text-xs sm:text-sm">
|
|
492
|
+
<code class="bg-neutral-100 dark:bg-[#1a1a1a] text-[#0a0a0a] dark:text-white px-2 py-1 text-xs">navigateToPreviousItem()</code>
|
|
429
493
|
</td>
|
|
430
|
-
<td class="border border-
|
|
431
|
-
<td class="border border-
|
|
432
|
-
<td class="border border-
|
|
494
|
+
<td class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-3 text-xs sm:text-sm text-neutral-600 dark:text-neutral-400">None</td>
|
|
495
|
+
<td class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-3 text-xs sm:text-sm text-neutral-600 dark:text-neutral-400">void</td>
|
|
496
|
+
<td class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-3 text-xs sm:text-sm text-neutral-700 dark:text-neutral-300">Navigate to the previous slide with circular navigation</td>
|
|
433
497
|
</tr>
|
|
434
498
|
<tr>
|
|
435
|
-
<td class="border border-
|
|
436
|
-
<code class="bg-
|
|
499
|
+
<td class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-3 text-xs sm:text-sm">
|
|
500
|
+
<code class="bg-neutral-100 dark:bg-[#1a1a1a] text-[#0a0a0a] dark:text-white px-2 py-1 text-xs">navigateToSpecificItem()</code>
|
|
437
501
|
</td>
|
|
438
|
-
<td class="border border-
|
|
502
|
+
<td class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-3 text-xs sm:text-sm text-neutral-600 dark:text-neutral-400">
|
|
439
503
|
<code class="text-xs">index: number</code>
|
|
440
504
|
</td>
|
|
441
|
-
<td class="border border-
|
|
442
|
-
<td class="border border-
|
|
505
|
+
<td class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-3 text-xs sm:text-sm text-neutral-600 dark:text-neutral-400">void</td>
|
|
506
|
+
<td class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-3 text-xs sm:text-sm text-neutral-700 dark:text-neutral-300">Jump directly to a specific slide by index (0-based)</td>
|
|
443
507
|
</tr>
|
|
444
508
|
|
|
445
509
|
<!-- Calculation Methods -->
|
|
446
510
|
<tr class="bg-green-50 dark:bg-green-900/20">
|
|
447
|
-
<td colspan="4" class="border border-
|
|
511
|
+
<td colspan="4" class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-2 text-xs sm:text-sm font-bold text-green-900 dark:text-green-100 uppercase">Calculation Methods</td>
|
|
448
512
|
</tr>
|
|
449
513
|
<tr>
|
|
450
|
-
<td class="border border-
|
|
451
|
-
<code class="bg-
|
|
514
|
+
<td class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-3 text-xs sm:text-sm">
|
|
515
|
+
<code class="bg-neutral-100 dark:bg-[#1a1a1a] text-[#0a0a0a] dark:text-white px-2 py-1 text-xs">calculateNextItemIndex()</code>
|
|
452
516
|
</td>
|
|
453
|
-
<td class="border border-
|
|
517
|
+
<td class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-3 text-xs sm:text-sm text-neutral-600 dark:text-neutral-400">
|
|
454
518
|
<code class="text-xs">current: number</code>
|
|
455
519
|
</td>
|
|
456
|
-
<td class="border border-
|
|
457
|
-
<td class="border border-
|
|
520
|
+
<td class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-3 text-xs sm:text-sm text-neutral-600 dark:text-neutral-400">number</td>
|
|
521
|
+
<td class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-3 text-xs sm:text-sm text-neutral-700 dark:text-neutral-300">Calculate the next index using circular buffer algorithm</td>
|
|
458
522
|
</tr>
|
|
459
523
|
<tr>
|
|
460
|
-
<td class="border border-
|
|
461
|
-
<code class="bg-
|
|
524
|
+
<td class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-3 text-xs sm:text-sm">
|
|
525
|
+
<code class="bg-neutral-100 dark:bg-[#1a1a1a] text-[#0a0a0a] dark:text-white px-2 py-1 text-xs">calculatePreviousItemIndex()</code>
|
|
462
526
|
</td>
|
|
463
|
-
<td class="border border-
|
|
527
|
+
<td class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-3 text-xs sm:text-sm text-neutral-600 dark:text-neutral-400">
|
|
464
528
|
<code class="text-xs">current: number</code>
|
|
465
529
|
</td>
|
|
466
|
-
<td class="border border-
|
|
467
|
-
<td class="border border-
|
|
530
|
+
<td class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-3 text-xs sm:text-sm text-neutral-600 dark:text-neutral-400">number</td>
|
|
531
|
+
<td class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-3 text-xs sm:text-sm text-neutral-700 dark:text-neutral-300">Calculate the previous index using circular buffer algorithm</td>
|
|
468
532
|
</tr>
|
|
469
533
|
|
|
470
534
|
<!-- Positioning Methods -->
|
|
471
535
|
<tr class="bg-purple-50 dark:bg-purple-900/20">
|
|
472
|
-
<td colspan="4" class="border border-
|
|
536
|
+
<td colspan="4" class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-2 text-xs sm:text-sm font-bold text-purple-900 dark:text-purple-100 uppercase">Positioning Methods</td>
|
|
473
537
|
</tr>
|
|
474
538
|
<tr>
|
|
475
|
-
<td class="border border-
|
|
476
|
-
<code class="bg-
|
|
539
|
+
<td class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-3 text-xs sm:text-sm">
|
|
540
|
+
<code class="bg-neutral-100 dark:bg-[#1a1a1a] text-[#0a0a0a] dark:text-white px-2 py-1 text-xs">updateItemElementPosition()</code>
|
|
477
541
|
</td>
|
|
478
|
-
<td class="border border-
|
|
542
|
+
<td class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-3 text-xs sm:text-sm text-neutral-600 dark:text-neutral-400">
|
|
479
543
|
<code class="text-xs">element: HTMLElement<br>index: number</code>
|
|
480
544
|
</td>
|
|
481
|
-
<td class="border border-
|
|
482
|
-
<td class="border border-
|
|
545
|
+
<td class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-3 text-xs sm:text-sm text-neutral-600 dark:text-neutral-400">void</td>
|
|
546
|
+
<td class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-3 text-xs sm:text-sm text-neutral-700 dark:text-neutral-300">Update position of a specific carousel item element</td>
|
|
483
547
|
</tr>
|
|
484
548
|
<tr>
|
|
485
|
-
<td class="border border-
|
|
486
|
-
<code class="bg-
|
|
549
|
+
<td class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-3 text-xs sm:text-sm">
|
|
550
|
+
<code class="bg-neutral-100 dark:bg-[#1a1a1a] text-[#0a0a0a] dark:text-white px-2 py-1 text-xs">updateAllItemElementPositions()</code>
|
|
487
551
|
</td>
|
|
488
|
-
<td class="border border-
|
|
489
|
-
<td class="border border-
|
|
490
|
-
<td class="border border-
|
|
552
|
+
<td class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-3 text-xs sm:text-sm text-neutral-600 dark:text-neutral-400">None</td>
|
|
553
|
+
<td class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-3 text-xs sm:text-sm text-neutral-600 dark:text-neutral-400">void</td>
|
|
554
|
+
<td class="border-2 border-neutral-300 dark:border-neutral-700 px-4 py-3 text-xs sm:text-sm text-neutral-700 dark:text-neutral-300">Update positions of all carousel item elements</td>
|
|
491
555
|
</tr>
|
|
492
556
|
</tbody>
|
|
493
557
|
</table>
|
|
@@ -495,91 +559,100 @@
|
|
|
495
559
|
</section>
|
|
496
560
|
|
|
497
561
|
<!-- Keyboard Navigation -->
|
|
498
|
-
<section class="mb-
|
|
499
|
-
<h2
|
|
500
|
-
|
|
562
|
+
<section id="keyboard-navigation" class="mb-12" aria-labelledby="keyboard-heading">
|
|
563
|
+
<h2 id="keyboard-heading"
|
|
564
|
+
class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
565
|
+
[ Keyboard Navigation ]
|
|
566
|
+
</h2>
|
|
567
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-4 leading-relaxed">
|
|
501
568
|
When the carousel has focus, users can navigate using these keyboard shortcuts.
|
|
502
569
|
</p>
|
|
503
|
-
<div class="bg-
|
|
504
|
-
<pre><code [innerHTML]="keyboardShortcutsCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
570
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
571
|
+
<pre><code [innerHTML]="keyboardShortcutsCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
505
572
|
</div>
|
|
506
573
|
</section>
|
|
507
574
|
|
|
508
575
|
<!-- Touch Gestures -->
|
|
509
|
-
<section class="mb-
|
|
510
|
-
<h2
|
|
511
|
-
|
|
576
|
+
<section id="touch-gestures" class="mb-12" aria-labelledby="gestures-heading">
|
|
577
|
+
<h2 id="gestures-heading"
|
|
578
|
+
class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
579
|
+
[ Touch & Mouse Gestures ]
|
|
580
|
+
</h2>
|
|
581
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-4 leading-relaxed">
|
|
512
582
|
Interactive gestures supported on both mobile and desktop devices.
|
|
513
583
|
</p>
|
|
514
|
-
<div class="bg-
|
|
515
|
-
<pre><code [innerHTML]="touchGesturesCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
584
|
+
<div class="bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3">
|
|
585
|
+
<pre><code [innerHTML]="touchGesturesCode" class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
516
586
|
</div>
|
|
517
587
|
</section>
|
|
518
588
|
|
|
519
589
|
<!-- Features -->
|
|
520
|
-
<section class="mb-
|
|
521
|
-
<h2
|
|
522
|
-
|
|
523
|
-
|
|
590
|
+
<!-- <section id="features" class="mb-12" aria-labelledby="features-heading">
|
|
591
|
+
<h2 id="features-heading"
|
|
592
|
+
class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
593
|
+
[ Features ]
|
|
594
|
+
</h2>
|
|
595
|
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-0 border-2 border-neutral-300 dark:border-neutral-700">
|
|
596
|
+
<article class="p-6 border-b-2 md:border-b-0 md:border-r-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]">
|
|
524
597
|
<div class="flex items-center gap-3 mb-2">
|
|
525
598
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-5 text-blue-500">
|
|
526
599
|
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
|
|
527
600
|
</svg>
|
|
528
|
-
<h3 class="font-
|
|
601
|
+
<h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white uppercase">Touch & Swipe</h3>
|
|
529
602
|
</div>
|
|
530
|
-
<p class="text-sm text-
|
|
531
|
-
</
|
|
603
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">Full touch gesture support with configurable thresholds for distance and velocity detection.</p>
|
|
604
|
+
</article>
|
|
532
605
|
|
|
533
|
-
<
|
|
606
|
+
<article class="p-6 border-b-2 md:border-b-0 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]">
|
|
534
607
|
<div class="flex items-center gap-3 mb-2">
|
|
535
608
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-5 text-green-500">
|
|
536
609
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
|
537
610
|
</svg>
|
|
538
|
-
<h3 class="font-
|
|
611
|
+
<h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white uppercase">Accessibility</h3>
|
|
539
612
|
</div>
|
|
540
|
-
<p class="text-sm text-
|
|
541
|
-
</
|
|
613
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">ARIA attributes, keyboard navigation (arrows, home, end), and screen reader support built-in.</p>
|
|
614
|
+
</article>
|
|
542
615
|
|
|
543
|
-
<
|
|
616
|
+
<article class="p-6 border-b-2 md:border-b-0 md:border-r-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]">
|
|
544
617
|
<div class="flex items-center gap-3 mb-2">
|
|
545
618
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-5 text-purple-500">
|
|
546
619
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
|
|
547
620
|
</svg>
|
|
548
|
-
<h3 class="font-
|
|
621
|
+
<h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white uppercase">100% Responsive</h3>
|
|
549
622
|
</div>
|
|
550
|
-
<p class="text-sm text-
|
|
551
|
-
</
|
|
623
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">Adapts to any container size automatically. Set parent dimensions and carousel fills completely.</p>
|
|
624
|
+
</article>
|
|
552
625
|
|
|
553
|
-
<
|
|
626
|
+
<article class="p-6 border-b-2 md:border-b-0 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]">
|
|
554
627
|
<div class="flex items-center gap-3 mb-2">
|
|
555
628
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-5 text-orange-500">
|
|
556
629
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5 10 4.5m0 0L16.25 13.5M10 4.5V21" />
|
|
557
630
|
</svg>
|
|
558
|
-
<h3 class="font-
|
|
631
|
+
<h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white uppercase">Performance</h3>
|
|
559
632
|
</div>
|
|
560
|
-
<p class="text-sm text-
|
|
561
|
-
</
|
|
633
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">GPU-accelerated animations, optimized event handling, and proper memory cleanup.</p>
|
|
634
|
+
</article>
|
|
562
635
|
|
|
563
|
-
<
|
|
636
|
+
<article class="p-6 border-b-2 md:border-b-0 md:border-r-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]">
|
|
564
637
|
<div class="flex items-center gap-3 mb-2">
|
|
565
638
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-5 text-indigo-500">
|
|
566
639
|
<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
|
|
567
640
|
</svg>
|
|
568
|
-
<h3 class="font-
|
|
641
|
+
<h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white uppercase">Infinite Loop</h3>
|
|
569
642
|
</div>
|
|
570
|
-
<p class="text-sm text-
|
|
571
|
-
</
|
|
643
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">Circular buffer algorithm provides seamless infinite navigation between slides.</p>
|
|
644
|
+
</article>
|
|
572
645
|
|
|
573
|
-
<
|
|
646
|
+
<article class="p-6 bg-white dark:bg-[#0a0a0a]">
|
|
574
647
|
<div class="flex items-center gap-3 mb-2">
|
|
575
648
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-5 text-red-500">
|
|
576
649
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-6.364-.386 1.591-1.591M3 12h2.25m.386-6.364 1.591 1.591" />
|
|
577
650
|
</svg>
|
|
578
|
-
<h3 class="font-
|
|
651
|
+
<h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white uppercase">Zero Config</h3>
|
|
579
652
|
</div>
|
|
580
|
-
<p class="text-sm text-
|
|
581
|
-
</
|
|
653
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">No configuration required. Just wrap your content and it works. Automatically detects child elements.</p>
|
|
654
|
+
</article>
|
|
582
655
|
</div>
|
|
583
|
-
</section>
|
|
656
|
+
</section> -->
|
|
584
657
|
</div>
|
|
585
|
-
</
|
|
658
|
+
</main>
|