@@ -3,46 +3,46 @@ import { Badge } from 'kampsy-ui';
33
44<div class="flex flex-col gap-2"> 
55	<div class="flex gap-1 capitalize"> 
6- 		<Badge variant="gray">gray</Badge> 
7- 		<Badge variant="gray-subtle">gray-subtle</Badge> 
6+ 		<Badge variant="gray" aria-label="gray" >gray</Badge> 
7+ 		<Badge variant="gray-subtle" aria-label="gray-subtle" >gray-subtle</Badge> 
88	</div> 
99
1010	<div class="flex gap-1 capitalize"> 
11- 		<Badge variant="blue">blue</Badge> 
12- 		<Badge variant="blue-subtle">blue-subtle</Badge> 
11+ 		<Badge variant="blue" aria-label="blue" >blue</Badge> 
12+ 		<Badge variant="blue-subtle" aria-label="blue-subtle" >blue-subtle</Badge> 
1313	</div> 
1414
1515	<div class="flex gap-1 capitalize"> 
16- 		<Badge variant="purple">purple</Badge> 
17- 		<Badge variant="purple-subtle">purple-subtle</Badge> 
16+ 		<Badge variant="purple" aria-label="purple" >purple</Badge> 
17+ 		<Badge variant="purple-subtle" aria-label="purple-subtle" >purple-subtle</Badge> 
1818	</div> 
1919
2020	<div class="flex gap-1 capitalize"> 
21- 		<Badge variant="amber">amber</Badge> 
22- 		<Badge variant="amber-subtle">amber-subtle</Badge> 
21+ 		<Badge variant="amber" aria-label="amber" >amber</Badge> 
22+ 		<Badge variant="amber-subtle" aria-label="amber-subtle" >amber-subtle</Badge> 
2323	</div> 
2424
2525	<div class="flex gap-1 capitalize"> 
26- 		<Badge variant="red">red</Badge> 
27- 		<Badge variant="red-subtle">red-subtle</Badge> 
26+ 		<Badge variant="red" aria-label="red" >red</Badge> 
27+ 		<Badge variant="red-subtle" aria-label="red-subtle" >red-subtle</Badge> 
2828	</div> 
2929
3030	<div class="flex gap-1 capitalize"> 
31- 		<Badge variant="pink">pink</Badge> 
32- 		<Badge variant="pink-subtle">pink-subtle</Badge> 
31+ 		<Badge variant="pink" aria-label="pink" >pink</Badge> 
32+ 		<Badge variant="pink-subtle" aria-label="pink-subtle" >pink-subtle</Badge> 
3333	</div> 
3434
3535	<div class="flex gap-1 capitalize"> 
36- 		<Badge variant="green">green</Badge> 
37- 		<Badge variant="green-subtle">green-subtle</Badge> 
36+ 		<Badge variant="green" aria-label="green" >green</Badge> 
37+ 		<Badge variant="green-subtle" aria-label="green-subtle" >green-subtle</Badge> 
3838	</div> 
3939
4040	<div class="flex gap-1 capitalize"> 
41- 		<Badge variant="teal">teal</Badge> 
42- 		<Badge variant="teal-subtle">teal-subtle</Badge> 
41+ 		<Badge variant="teal" aria-label="teal" >teal</Badge> 
42+ 		<Badge variant="teal-subtle" aria-label="teal-subtle" >teal-subtle</Badge> 
4343	</div> 
4444	<div class="flex gap-1 capitalize"> 
45- 		<Badge variant="inverted">inverted</Badge> 
45+ 		<Badge variant="inverted" aria-label="inverted" >inverted</Badge> 
4646	</div> 
4747</div>` ; 
4848
@@ -52,15 +52,15 @@ import { Badge } from 'kampsy-ui';
5252<div class="flex flex-col gap-2"> 
5353
5454	<div class="flex gap-1 capitalize"> 
55- 		<Badge size="sm"  >small</Badge> 
55+ 		<Badge size="small" aria-label="small" >small</Badge> 
5656	</div> 
5757
5858	<div class="flex gap-1 capitalize"> 
59- 		<Badge size="md"  >medium</Badge> 
59+ 		<Badge size="medium" aria-label="medium" >medium</Badge> 
6060	</div> 
6161
6262	<div class="flex gap-1 capitalize"> 
63- 		<Badge size="lg"  >large</Badge> 
63+ 		<Badge size="large" aria-label="large" >large</Badge> 
6464	</div> 
6565</div>` ; 
6666
@@ -71,80 +71,80 @@ import { Shield } from 'kampsy-ui/icons';
7171<div class="flex flex-col gap-2"> 
7272
7373	<div class="flex items-center gap-1 capitalize"> 
74- 		<Badge icon={Shield} size="lg " variant="gray">gray</Badge> 
75- 		<Badge icon={Shield} size="md " variant="gray" >gray</Badge> 
76- 		<Badge icon={Shield} size="sm " variant="gray">gray</Badge> 
77- 		<Badge icon={Shield} size="sm " variant="gray-subtle">gray</Badge> 
78- 		<Badge icon={Shield} size="md " variant="gray-subtle" >gray</Badge> 
79- 		<Badge icon={Shield} size="lg " variant="gray-subtle">gray</Badge> 
74+ 		<Badge icon={Shield} size="large " variant="gray" aria-label="icon large  gray">gray</Badge> 
75+ 		<Badge icon={Shield} size="medium " variant="gray" aria-label="icon medium gray" >gray</Badge> 
76+ 		<Badge icon={Shield} size="small " variant="gray" aria-label="icon small  gray">gray</Badge> 
77+ 		<Badge icon={Shield} size="small " variant="gray-subtle" aria-label="icon small  gray-subtle">gray</Badge> 
78+ 		<Badge icon={Shield} size="medium " variant="gray-subtle" aria-label="icon medium gray-subtle" >gray</Badge> 
79+ 		<Badge icon={Shield} size="large " variant="gray-subtle" aria-label="icon large  gray-subtle">gray</Badge> 
8080	</div> 
8181
8282	<div class="flex items-center gap-1 capitalize"> 
83- 		<Badge icon={Shield} size="lg " variant="blue">blue</Badge> 
84- 		<Badge icon={Shield} size="md " variant="blue" >blue</Badge> 
85- 		<Badge icon={Shield} size="sm " variant="blue">blue</Badge> 
86- 		<Badge icon={Shield} size="sm " variant="blue-subtle">blue</Badge> 
87- 		<Badge icon={Shield} size="md " variant="blue-subtle" >blue</Badge> 
88- 		<Badge icon={Shield} size="lg " variant="blue-subtle">blue</Badge> 
83+ 		<Badge icon={Shield} size="large " variant="blue" aria-label="icon large  blue">blue</Badge> 
84+ 		<Badge icon={Shield} size="medium " variant="blue" aria-label="icon medium blue" >blue</Badge> 
85+ 		<Badge icon={Shield} size="small " variant="blue" aria-label="icon small  blue">blue</Badge> 
86+ 		<Badge icon={Shield} size="small " variant="blue-subtle" aria-label="icon small  blue-subtle">blue</Badge> 
87+ 		<Badge icon={Shield} size="medium " variant="blue-subtle" aria-label="icon medium blue-subtle" >blue</Badge> 
88+ 		<Badge icon={Shield} size="large " variant="blue-subtle" aria-label="icon large  blue-subtle">blue</Badge> 
8989	</div> 
9090
9191	<div class="flex items-center gap-1 capitalize"> 
92- 		<Badge icon={Shield} size="lg " variant="purple">purple</Badge> 
93- 		<Badge icon={Shield} size="md " variant="purple" >purple</Badge> 
94- 		<Badge icon={Shield} size="sm " variant="purple">purple</Badge> 
95- 		<Badge icon={Shield} size="sm " variant="purple-subtle">purple</Badge> 
96- 		<Badge icon={Shield} size="md " variant="purple-subtle" >purple</Badge> 
97- 		<Badge icon={Shield} size="lg " variant="purple-subtle">purple</Badge> 
92+ 		<Badge icon={Shield} size="large " variant="purple" aria-label="icon large  purple">purple</Badge> 
93+ 		<Badge icon={Shield} size="medium " variant="purple" aria-label="icon medium purple" >purple</Badge> 
94+ 		<Badge icon={Shield} size="small " variant="purple" aria-label="icon small  purple">purple</Badge> 
95+ 		<Badge icon={Shield} size="small " variant="purple-subtle" aria-label="icon small  purple-subtle">purple</Badge> 
96+ 		<Badge icon={Shield} size="medium " variant="purple-subtle" aria-label="icon medium purple-subtle" >purple</Badge> 
97+ 		<Badge icon={Shield} size="large " variant="purple-subtle" aria-label="icon large  purple-subtle">purple</Badge> 
9898	</div> 
9999
100100	<div class="flex items-center gap-1 capitalize"> 
101- 		<Badge icon={Shield} size="lg " variant="amber">amber</Badge> 
102- 		<Badge icon={Shield} size="md " variant="amber" >amber</Badge> 
103- 		<Badge icon={Shield} size="sm " variant="amber">amber</Badge> 
104- 		<Badge icon={Shield} size="sm " variant="amber-subtle">amber</Badge> 
105- 		<Badge icon={Shield} size="md " variant="amber-subtle" >amber</Badge> 
106- 		<Badge icon={Shield} size="lg " variant="amber-subtle">amber</Badge> 
101+ 		<Badge icon={Shield} size="large " variant="amber" aria-label="icon large  amber">amber</Badge> 
102+ 		<Badge icon={Shield} size="medium " variant="amber" aria-label="icon medium amber" >amber</Badge> 
103+ 		<Badge icon={Shield} size="small " variant="amber" aria-label="icon small  amber">amber</Badge> 
104+ 		<Badge icon={Shield} size="small " variant="amber-subtle" aria-label="icon small  amber-subtle">amber</Badge> 
105+ 		<Badge icon={Shield} size="medium " variant="amber-subtle" aria-label="icon medium amber-subtle" >amber</Badge> 
106+ 		<Badge icon={Shield} size="large " variant="amber-subtle" aria-label="icon large  amber-subtle">amber</Badge> 
107107	</div> 
108108
109109	<div class="flex items-center gap-1 capitalize"> 
110- 		<Badge icon={Shield} size="lg " variant="red">red</Badge> 
111- 		<Badge icon={Shield} size="md " variant="red" >red</Badge> 
112- 		<Badge icon={Shield} size="sm " variant="red">red</Badge> 
113- 		<Badge icon={Shield} size="sm " variant="red-subtle">red</Badge> 
114- 		<Badge icon={Shield} size="md " variant="red-subtle" >red</Badge> 
115- 		<Badge icon={Shield} size="lg " variant="red-subtle">red</Badge> 
110+ 		<Badge icon={Shield} size="large " variant="red" aria-label="icon large  red">red</Badge> 
111+ 		<Badge icon={Shield} size="medium " variant="red" aria-label="icon medium red" >red</Badge> 
112+ 		<Badge icon={Shield} size="small " variant="red" aria-label="icon small  red">red</Badge> 
113+ 		<Badge icon={Shield} size="small " variant="red-subtle" aria-label="icon small  red-subtle">red</Badge> 
114+ 		<Badge icon={Shield} size="medium " variant="red-subtle" aria-label="icon medium red-subtle" >red</Badge> 
115+ 		<Badge icon={Shield} size="large " variant="red-subtle" aria-label="icon large  red-subtle">red</Badge> 
116116	</div> 
117117
118118	<div class="flex items-center gap-1 capitalize"> 
119- 		<Badge icon={Shield} size="lg " variant="pink">pink</Badge> 
120- 		<Badge icon={Shield} size="md " variant="pink" >pink</Badge> 
121- 		<Badge icon={Shield} size="sm " variant="pink">pink</Badge> 
122- 		<Badge icon={Shield} size="sm " variant="pink-subtle">pink</Badge> 
123- 		<Badge icon={Shield} size="md " variant="pink-subtle" >pink</Badge> 
124- 		<Badge icon={Shield} size="lg " variant="pink-subtle">pink</Badge> 
119+ 		<Badge icon={Shield} size="large " variant="pink" aria-label="icon large  pink">pink</Badge> 
120+ 		<Badge icon={Shield} size="medium " variant="pink" aria-label="icon medium pink" >pink</Badge> 
121+ 		<Badge icon={Shield} size="small " variant="pink" aria-label="icon small  pink">pink</Badge> 
122+ 		<Badge icon={Shield} size="small " variant="pink-subtle" aria-label="icon small  pink-subtle">pink</Badge> 
123+ 		<Badge icon={Shield} size="medium " variant="pink-subtle" aria-label="icon medium pink-subtle" >pink</Badge> 
124+ 		<Badge icon={Shield} size="large " variant="pink-subtle" aria-label="icon large  pink-subtle">pink</Badge> 
125125	</div> 
126126
127127	<div class="flex items-center gap-1 capitalize"> 
128- 		<Badge icon={Shield} size="lg " variant="green">green</Badge> 
129- 		<Badge icon={Shield} size="md " variant="green" >green</Badge> 
130- 		<Badge icon={Shield} size="sm " variant="green">green</Badge> 
131- 		<Badge icon={Shield} size="sm " variant="green-subtle">green</Badge> 
132- 		<Badge icon={Shield} size="md " variant="green-subtle" >green</Badge> 
133- 		<Badge icon={Shield} size="lg " variant="green-subtle">green</Badge> 
128+ 		<Badge icon={Shield} size="large " variant="green">green</Badge> 
129+ 		<Badge icon={Shield} size="medium " variant="green" >green</Badge> 
130+ 		<Badge icon={Shield} size="small " variant="green">green</Badge> 
131+ 		<Badge icon={Shield} size="small " variant="green-subtle">green</Badge> 
132+ 		<Badge icon={Shield} size="medium " variant="green-subtle" >green</Badge> 
133+ 		<Badge icon={Shield} size="large " variant="green-subtle">green</Badge> 
134134	</div>	 
135135
136136	<div class="flex items-center gap-1 capitalize"> 
137- 		<Badge icon={Shield} size="lg " variant="teal">teal</Badge> 
138- 		<Badge icon={Shield} size="md " variant="teal" >teal</Badge> 
139- 		<Badge icon={Shield} size="sm " variant="teal">teal</Badge> 
140- 		<Badge icon={Shield} size="sm " variant="teal-subtle">teal</Badge> 
141- 		<Badge icon={Shield} size="md " variant="teal-subtle" >teal</Badge> 
142- 		<Badge icon={Shield} size="lg " variant="teal-subtle">teal</Badge> 
137+ 		<Badge icon={Shield} size="large " variant="teal" aria-label="icon large  teal">teal</Badge> 
138+ 		<Badge icon={Shield} size="medium " variant="teal" aria-label="icon medium teal" >teal</Badge> 
139+ 		<Badge icon={Shield} size="small " variant="teal" aria-label="icon" aria-label="icon small  teal">teal</Badge> 
140+ 		<Badge icon={Shield} size="small " variant="teal-subtle" aria-label="icon small  teal-subtle">teal</Badge> 
141+ 		<Badge icon={Shield} size="medium " variant="teal-subtle" aria-label="icon medium teal-subtle" >teal</Badge> 
142+ 		<Badge icon={Shield} size="large " variant="teal-subtle" aria-label="icon large  teal-subtle">teal</Badge> 
143143	</div> 
144144
145145	<div class="flex items-center gap-1 capitalize"> 
146- 		<Badge icon={Shield} size="lg " variant="inverted">inverted</Badge> 
147- 		<Badge icon={Shield} size="md " variant="inverted" >inverted</Badge> 
148- 		<Badge icon={Shield} size="sm " variant="inverted">inverted</Badge> 
146+ 		<Badge icon={Shield} size="large " variant="inverted" aria-label="icon large  inverted">inverted</Badge> 
147+ 		<Badge icon={Shield} size="medium " variant="inverted" aria-label="icon medium inverted" >inverted</Badge> 
148+ 		<Badge icon={Shield} size="small " variant="inverted" aria-label="icon small  inverted">inverted</Badge> 
149149	</div> 
150150</div>` ; 
0 commit comments