refactor(demo): use separate stylesheet for StyledBadgesDemo

Author: paodb

src/test/java/com/flowingcode/vaadin/addons/badgelist/StyledBadgesDemo.java

@@ -2,7 +2,7 @@
  * #%L
  * Badge List Add-on
  * %%
- * Copyright (C) 2023 - 2024 Flowing Code
+ * Copyright (C) 2023 - 2026 Flowing Code
  * %%
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,6 +21,7 @@
 
 import com.flowingcode.vaadin.addons.demo.DemoSource;
 import com.flowingcode.vaadin.addons.demo.SourceCodeViewer;
+import com.vaadin.flow.component.dependency.CssImport;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.Span;
 import com.vaadin.flow.component.icon.Icon;
@@ -31,8 +32,13 @@
 import java.util.List;
 
 @DemoSource
+//#if vaadin eq 0
+@DemoSource(value = "/src/test/resources/META-INF/resources/frontend/styles/styled-badges-demo.css",
+    caption = "styled-badges-demo.css")
+//#endif
 @PageTitle("Styled Badges Demo")
 @SuppressWarnings("serial")
+@CssImport("./styles/styled-badges-demo.css")
 @Route(value = "badge-list/styled", layout = BadgeListDemoView.class)
 public class StyledBadgesDemo extends BaseBadgeListDemo {
 

src/test/resources/META-INF/frontend/styles/badge-list-demo-styles.css

@@ -2,7 +2,7 @@
  * #%L
  * Badge List Add-on
  * %%
- * Copyright (C) 2023 - 2024 Flowing Code
+ * Copyright (C) 2023 - 2026 Flowing Code
  * %%
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -28,11 +28,4 @@
 	font-weight: 600;
 	display: block;
 	padding: 5px 0 10px 0;
-} 
-
-fc-badge-list[class="styled-badges-second-example"]::part(overflow-badge), .custom-styled-badge {
-	background-color: lightgreen;
-	color: green;
-	border: 1px green dashed;
-	border-radius: 0;
 }

src/test/resources/META-INF/frontend/styles/styled-badges-demo.css

@@ -0,0 +1,27 @@
+/*-
+ * #%L
+ * Badge List Add-on
+ * %%
+ * Copyright (C) 2023 - 2026 Flowing Code
+ * %%
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * #L%
+ */
+ 
+fc-badge-list.styled-badges-second-example::part(overflow-badge), .custom-styled-badge {
+    background-color: lightgreen;
+    color: green;
+    border: 1px green dashed;
+    border-radius: 0;
+}
+