refactor: replace badge styles import to use badge.css directly

pom.xml

@@ -4,7 +4,7 @@
 
 	<groupId>com.flowingcode.vaadin.addons</groupId>
 	<artifactId>badge-list-addon</artifactId>
-	<version>1.1.2-SNAPSHOT</version>
+	<version>1.2.0-SNAPSHOT</version>
 	<name>Badge List Add-on</name>
 	<description>Badge List Add-on for Vaadin Flow</description>
 	<url>https://www.flowingcode.com/en/open-source/</url>
@@ -470,6 +470,7 @@
 										<exclude>**/it/*</exclude>
 										<exclude>**/DemoView.class</exclude>
 										<exclude>**/DemoLayout.class</exclude>
+										<exclude>**/AppShellConfiguratorImpl.class</exclude>
 									</excludes>
 								</configuration>
 							</execution>
@@ -498,9 +499,16 @@
 			<properties>
 				<maven.compiler.source>21</maven.compiler.source>
 				<maven.compiler.target>21</maven.compiler.target>
-				<vaadin.version>25.0.0-beta2</vaadin.version>
+				<vaadin.version>25.0.2</vaadin.version>
 				<jetty.version>11.0.26</jetty.version>
 			</properties>		
+			<dependencies>
+                <dependency>
+                    <groupId>com.vaadin</groupId>
+                    <artifactId>vaadin-dev</artifactId>
+                    <optional>true</optional>
+                </dependency>
+            </dependencies>
 		</profile>
 
 	</profiles>

src/main/java/com/flowingcode/vaadin/addons/badgelist/BadgeList.java

@@ -24,6 +24,7 @@
 import com.vaadin.flow.component.HasSize;
 import com.vaadin.flow.component.HasTheme;
 import com.vaadin.flow.component.Tag;
+import com.vaadin.flow.component.dependency.CssImport;
 import com.vaadin.flow.component.dependency.JsModule;
 import java.util.ArrayList;
 import java.util.List;
@@ -34,8 +35,8 @@
  * @author Paola De Bartolo / Flowing Code
  */
 @SuppressWarnings("serial")
-@JsModule("@vaadin/vaadin-lumo-styles/badge-global.js")
 @JsModule("./src/fc-badge-list.ts")
+@CssImport("./styles/badge.css")
 @Tag("fc-badge-list")
 public class BadgeList extends Component implements HasTheme, HasSize, HasLabel {
 

src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts

@@ -20,7 +20,7 @@
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import '@vaadin/context-menu';
 import type { ContextMenuItem } from '@vaadin/context-menu';
-import { badge } from '@vaadin/vaadin-lumo-styles/badge.js';
+import badgeStylesContent from '../styles/badge.css?inline';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, query, queryAssignedNodes, state } from 'lit/decorators.js';
@@ -50,7 +50,7 @@ export class BadgeList extends ResizeMixin(ThemableMixin(LitElement)) {
   private overflowItems: ContextMenuItem[] = [];
 
   static styles = [
-    badge.styleSheet,
+    badgeStylesContent,
     css`      
 
     :host {

src/main/resources/META-INF/resources/frontend/styles/badge.css

@@ -0,0 +1,187 @@
+/*-
+ * #%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%
+ */
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+[theme~='badge'] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 0.4em calc(0.5em + var(--lumo-border-radius-s) / 4);
+  color: var(--lumo-primary-text-color);
+  background-color: var(--lumo-primary-color-10pct);
+  border-radius: var(--lumo-border-radius-s);
+  font-family: var(--lumo-font-family);
+  font-size: var(--lumo-font-size-s);
+  line-height: 1;
+  font-weight: 500;
+  text-transform: initial;
+  letter-spacing: initial;
+  min-width: calc(var(--lumo-line-height-xs) * 1em + 0.45em);
+  flex-shrink: 0;
+}
+
+/* Ensure proper vertical alignment */
+[theme~='badge']::before {
+  display: inline-block;
+  content: '\2003';
+  width: 0;
+}
+
+[theme~='badge'][theme~='small'] {
+  font-size: var(--lumo-font-size-xxs);
+  line-height: 1;
+}
+
+/* Colors */
+
+[theme~='badge'][theme~='success'] {
+  color: var(--lumo-success-text-color);
+  background-color: var(--lumo-success-color-10pct);
+}
+
+[theme~='badge'][theme~='error'] {
+  color: var(--lumo-error-text-color);
+  background-color: var(--lumo-error-color-10pct);
+}
+
+[theme~='badge'][theme~='warning'] {
+  color: var(--lumo-warning-text-color);
+  background-color: var(--lumo-warning-color-10pct);
+}
+
+[theme~='badge'][theme~='contrast'] {
+  color: var(--lumo-contrast-80pct);
+  background-color: var(--lumo-contrast-5pct);
+}
+
+/* Primary */
+
+[theme~='badge'][theme~='primary'] {
+  color: var(--lumo-primary-contrast-color);
+  background-color: var(--lumo-primary-color);
+}
+
+[theme~='badge'][theme~='success'][theme~='primary'] {
+  color: var(--lumo-success-contrast-color);
+  background-color: var(--lumo-success-color);
+}
+
+[theme~='badge'][theme~='error'][theme~='primary'] {
+  color: var(--lumo-error-contrast-color);
+  background-color: var(--lumo-error-color);
+}
+
+[theme~='badge'][theme~='warning'][theme~='primary'] {
+  color: var(--lumo-warning-contrast-color);
+  background-color: var(--lumo-warning-color);
+}
+
+[theme~='badge'][theme~='contrast'][theme~='primary'] {
+  color: var(--lumo-base-color);
+  background-color: var(--lumo-contrast);
+}
+
+/* Links */
+
+[theme~='badge'][href]:hover {
+  text-decoration: none;
+}
+
+/* Icon */
+
+[theme~='badge']>vaadin-icon {
+  margin: -0.25em 0;
+}
+
+[theme~='badge']>vaadin-icon:first-child {
+  margin-left: -0.375em;
+}
+
+[theme~='badge']>vaadin-icon:last-child {
+  margin-right: -0.375em;
+}
+
+vaadin-icon[theme~='badge'][icon] {
+  min-width: 0;
+  padding: 0;
+  font-size: 1rem;
+  width: var(--lumo-icon-size-m);
+  height: var(--lumo-icon-size-m);
+}
+
+vaadin-icon[theme~='badge'][icon][theme~='small'] {
+  width: var(--lumo-icon-size-s);
+  height: var(--lumo-icon-size-s);
+}
+
+/* Empty */
+
+[theme~='badge']:not([icon]):empty {
+  min-width: 0;
+  width: 1em;
+  height: 1em;
+  padding: 0;
+  border-radius: 50%;
+  background-color: var(--lumo-primary-color);
+}
+
+[theme~='badge'][theme~='small']:not([icon]):empty {
+  width: 0.75em;
+  height: 0.75em;
+}
+
+[theme~='badge'][theme~='contrast']:not([icon]):empty {
+  background-color: var(--lumo-contrast);
+}
+
+[theme~='badge'][theme~='success']:not([icon]):empty {
+  background-color: var(--lumo-success-color);
+}
+
+[theme~='badge'][theme~='error']:not([icon]):empty {
+  background-color: var(--lumo-error-color);
+}
+
+[theme~='badge'][theme~='warning']:not([icon]):empty {
+  background-color: var(--lumo-warning-color);
+}
+
+/* Pill */
+
+[theme~='badge'][theme~='pill'] {
+  --lumo-border-radius-s: 1em;
+}
+
+/* RTL specific styles */
+
+[dir='rtl'][theme~='badge'] vaadin-icon:first-child {
+  margin-right: -0.375em;
+  margin-left: 0;
+}
+
+[dir='rtl'][theme~='badge'] vaadin-icon:last-child {
+  margin-left: -0.375em;
+  margin-right: 0;
+}

src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java

@@ -0,0 +1,28 @@
+/*-
+ * #%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%
+ */
+package com.flowingcode.vaadin.addons;
+
+import com.vaadin.flow.component.page.AppShellConfigurator;
+import com.vaadin.flow.theme.Theme;
+
+@Theme
+public class AppShellConfiguratorImpl implements AppShellConfigurator {
+
+}

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

@@ -32,19 +32,27 @@
 import java.util.List;
 
 @DemoSource
-// #if vaadin eq 0
+//#if vaadin eq 0
 @DemoSource(value = "/src/test/resources/META-INF/frontend/styles/styled-badges-demo.css",
     caption = "styled-badges-demo.css")
-// #endif
+@DemoSource(value = "/src/test/resources/META-INF/frontend/styles/styled-badges-demo-v25.css",
+    caption = "styled-badges-demo-v25.css")
+@DemoSource(value = "/src/test/resources/META-INF/frontend/styles/fc-badge-list.css",
+    caption = "fc-badge-list.css")
+//#endif
 @PageTitle("Styled Badges Demo")
 @SuppressWarnings("serial")
+//#if vaadin eq 24
 @CssImport("./styles/styled-badges-demo.css")
+//#else
+@CssImport(value = "./styles/fc-badge-list.css", themeFor = "fc-badge-list")
+@CssImport("./styles/styled-badges-demo-v25.css")
+//#endif
 @Route(value = "badge-list/styled", layout = BadgeListDemoView.class)
 public class StyledBadgesDemo extends BaseBadgeListDemo {
 
   public StyledBadgesDemo() {
-
-    // begin-block example1
+    // begin-block example1 
     List<Badge> badges1 = new ArrayList<>();
     for (int i = 0; i < 8; i++) {
       Badge badge = new Badge("BADGE" + (i + 1));
@@ -101,7 +109,6 @@ public StyledBadgesDemo() {
     // #endif
     // show-source add(layout3);
     // end-block
-
   }
 
   // #if vaadin eq 0

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

@@ -0,0 +1,8 @@
+/* FOR VAADIN 25 */
+/* for hidden badges in the 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-v25.css

@@ -0,0 +1,28 @@
+/*-
+ * #%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), fc-badge-list .custom-styled-badge {
+	background-color: lightgreen;
+    color: green;
+    border: 1px green dashed;
+    border-radius: 0;
+}
+
+