diff --git a/pom.xml b/pom.xml
index f13ea15..5f90fc6 100644
--- a/pom.xml
+++ b/pom.xml
@@ -4,7 +4,7 @@
com.flowingcode.vaadin.addons
badge-list-addon
- 1.1.2-SNAPSHOT
+ 1.2.0-SNAPSHOT
Badge List Add-on
Badge List Add-on for Vaadin Flow
https://www.flowingcode.com/en/open-source/
@@ -470,6 +470,7 @@
**/it/*
**/DemoView.class
**/DemoLayout.class
+ **/AppShellConfiguratorImpl.class
@@ -498,9 +499,16 @@
21
21
- 25.0.0-beta2
+ 25.0.2
11.0.26
+
+
+ com.vaadin
+ vaadin-dev
+ true
+
+
diff --git a/src/main/java/com/flowingcode/vaadin/addons/badgelist/BadgeList.java b/src/main/java/com/flowingcode/vaadin/addons/badgelist/BadgeList.java
index a66d963..3b4ee3d 100644
--- a/src/main/java/com/flowingcode/vaadin/addons/badgelist/BadgeList.java
+++ b/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 {
diff --git a/src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts b/src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts
index e831b5d..847b6dc 100644
--- a/src/main/resources/META-INF/resources/frontend/src/fc-badge-list.ts
+++ b/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 {
diff --git a/src/main/resources/META-INF/resources/frontend/styles/badge.css b/src/main/resources/META-INF/resources/frontend/styles/badge.css
new file mode 100644
index 0000000..a0f9839
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java b/src/test/java/com/flowingcode/vaadin/addons/AppShellConfiguratorImpl.java
new file mode 100644
index 0000000..d6dc5f0
--- /dev/null
+++ b/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 {
+
+}
diff --git a/src/test/java/com/flowingcode/vaadin/addons/badgelist/StyledBadgesDemo.java b/src/test/java/com/flowingcode/vaadin/addons/badgelist/StyledBadgesDemo.java
index 01aa594..6ceffb2 100644
--- a/src/test/java/com/flowingcode/vaadin/addons/badgelist/StyledBadgesDemo.java
+++ b/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 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
diff --git a/src/test/resources/META-INF/frontend/styles/fc-badge-list.css b/src/test/resources/META-INF/frontend/styles/fc-badge-list.css
new file mode 100644
index 0000000..098194b
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/test/resources/META-INF/frontend/styles/styled-badges-demo-v25.css b/src/test/resources/META-INF/frontend/styles/styled-badges-demo-v25.css
new file mode 100644
index 0000000..c211522
--- /dev/null
+++ b/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;
+}
+
+
\ No newline at end of file