refactor: upgrade to v25

README.md

@@ -35,6 +35,13 @@ Add `<vcf-breadcrumbs>` element to the page. Inside added element add few `<vcf-
 ![breadcrumbs-02](https://github.com/user-attachments/assets/f56e9aa0-756a-412e-86d6-71ee341fd878)
 ![breadcrumbs-03](https://github.com/user-attachments/assets/ae3b4816-0892-4651-b002-b4ac99412687)                           
 
+## Updates since version 3.0.0
+
+When the application does not load the Aura or Lumo theme, the component uses a minimal set of functional styles that provide a foundation for a custom theme.
+
+`ThemableMixin` has been removed from the component, and injecting styles into the component's shadow root using `registerStyles` is no longer supported.
+Use global CSS to style the component using part names and CSS variables instead.
+
 ## Updates since version 2.0.0
 
 - Lit based component with theming support.

demo/demo.js

@@ -1,3 +1,3 @@
 import '@polymer/iron-demo-helpers/demo-pages-shared-styles';
 import '@polymer/iron-demo-helpers/demo-snippet';
-import '../dist/src/vcf-breadcrumbs.js';
+import '../dist/src/vcf-breadcrumbs.js';

demo/index.html

@@ -6,6 +6,7 @@
     <title>vcf-breadcrumb demo</title>
     <script dev src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
     <script dev type="module" src="demo.js"></script>
+    <link rel="stylesheet" href="/node_modules/@vaadin/vaadin-lumo-styles/lumo.css" />
     <custom-style>
       <style is="custom-style" include="demo-pages-shared-styles">
         .centered {

package.json

@@ -42,11 +42,10 @@
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
-    "@vaadin/component-base": "^24.5.8",
-    "@vaadin/popover": "^24.5.8",
-    "@vaadin/vaadin-lumo-styles": "^24.5.8",
-    "@vaadin/vaadin-themable-mixin": "^24.5.8",
-    "@vaadin/vertical-layout": "^24.5.8",
+    "@vaadin/component-base": "^25.0.0-beta2",
+    "@vaadin/popover": "^25.0.0-beta2",
+    "@vaadin/vertical-layout": "^25.0.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "^25.0.0-beta2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
@@ -58,6 +57,7 @@
     "@types/jest": "^29.5.14",
     "@typescript-eslint/eslint-plugin": "^5.48.0",
     "@typescript-eslint/parser": "^5.48.0",
+    "@vaadin/vaadin-lumo-styles": "^25.0.0-beta2",
     "@web/dev-server": "^0.4.3",
     "@web/test-runner": "^0.19.0",
     "@webcomponents/webcomponentsjs": "^2.0.0",

src/component/vcf-breadcrumb.ts

@@ -16,12 +16,11 @@
  * limitations under the License.
  * #L%
  */
-import { html, LitElement, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement, property } from 'lit/decorators.js';
-import { ThemableMixin } from "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js";
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { typography } from "@vaadin/vaadin-lumo-styles";
+import { ThemeDetectionMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-detection-mixin.js';
 
 /**
  * A Web Component for individual breadcrumb items in a breadcrumb navigation system.
@@ -43,12 +42,12 @@ import { typography } from "@vaadin/vaadin-lumo-styles";
  * @memberof Vaadin
  * @name vcf-breadcrumb
  * @mixes ElementMixin
- * @mixes ThemableMixin
  * @mixes PolylitMixin
+ * @mixes ThemeDetectionMixin
  * @demo demo/index.html
  */
 @customElement("vcf-breadcrumb")
-class VcfBreadcrumb extends ElementMixin(ThemableMixin(PolylitMixin(LitElement))) {
+class VcfBreadcrumb extends ThemeDetectionMixin(ElementMixin(PolylitMixin(LitElement))) {
 
   @property({ type: String, reflect: true }) 
   href = '';
@@ -75,17 +74,97 @@ class VcfBreadcrumb extends ElementMixin(ThemableMixin(PolylitMixin(LitElement))
   }
 
   static get styles() {
-    return [typography, css`
-        :host(:last-of-type) [part='separator'] {
-          display: none;
-        }        
-
+    return css`
         :host {
           display: flex;
           align-items: center;
           min-width: 40px;
-        }       
-    `];
+          --vcf-breadcrumb-separator-font-family: 'inherit';
+          --vcf-breadcrumb-separator-symbol: '/';
+          --vcf-breadcrumb-separator-color: var(--vaadin-text-color-secondary, #666);
+          --vcf-breadcrumb-separator-size: var(--vaadin-icon-size, 1lh);
+          --vcf-breadcrumb-separator-margin: 0;
+          --vcf-breadcrumb-separator-padding: 0 var(--vaadin-padding-xs, 6px);
+          --vcf-breadcrumb-mobile-back-symbol: '←';
+          --vcf-breadcrumb-link-focus-ring-color: var(--vaadin-focus-ring-color, Highlight);
+        }
+
+        :host [part='separator'] {
+          margin: var(--vcf-breadcrumb-separator-margin);
+          padding: var(--vcf-breadcrumb-separator-padding);
+        }
+
+        :host [part='separator']::after {
+          font-family: var(--vcf-breadcrumb-separator-font-family);
+          content: var(--vcf-breadcrumb-separator-symbol);
+          color: var(--vcf-breadcrumb-separator-color);
+          font-size: var(--vcf-breadcrumb-separator-size);
+          speak: none;
+        }
+
+        :host(:last-of-type) [part='separator'] {
+          display: none;
+        }
+
+        [part='link'] {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        /* Focus ring */
+        :host(:focus-within) [part="link"] {
+          outline: var(--vcf-breadcrumb-link-focus-ring-color) auto 1px;
+          outline-offset: 1px;
+        }
+
+        ::slotted(a:focus) {
+          outline: none;
+        }
+
+        /* mobile back mode */
+        :host(.mobile-back) {
+          display: none;
+        }
+
+        :host(.mobile-back) [part='separator'] {
+          display: none;
+        }
+
+        :host(.mobile-back.is-last-not-current),
+        :host(.mobile-back.is-before-current) {
+          display: inline-block;
+        }
+
+        ::slotted(a.breadcrumb-anchor.add-mobile-back-icon)::before {
+          display: inline;
+          font-family: var(--vcf-breadcrumb-separator-font-family);
+          content: var(--vcf-breadcrumb-mobile-back-symbol);
+          font-size: var(--vcf-breadcrumb-separator-size);
+          margin: var(--vcf-breadcrumb-separator-margin);
+          color: inherit;
+        }
+
+        /* Lumo theme */
+        :host([data-application-theme='lumo']) {
+          --vcf-breadcrumb-separator-font-family: 'lumo-icons';
+          --vcf-breadcrumb-separator-symbol: var(--lumo-icons-angle-right);
+          --vcf-breadcrumb-separator-color: var(--lumo-contrast-40pct);
+          --vcf-breadcrumb-separator-size: var(--lumo-font-size-s);
+          --vcf-breadcrumb-separator-margin: 0;
+          --vcf-breadcrumb-separator-padding: 0 var(--lumo-space-xs);
+          --vcf-breadcrumb-mobile-back-symbol: var(--lumo-icons-angle-left);
+          --vcf-breadcrumb-link-focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+
+          font-family: var(--lumo-font-family);
+          font-size: var(--lumo-font-size-m);
+        }
+
+        :host([data-application-theme='lumo']) ::slotted(a[slot="link-slot"]:not(:any-link)) {
+          /* Lumo global styles use disabled color for anchors without href, force base text color instead */
+          color: var(--lumo-body-text-color) !important;
+        }
+    `;
   }
 
   _createAnchor() {

src/component/vcf-breadcrumbs.ts

@@ -18,7 +18,6 @@
  */
 import { html, LitElement, css } from "lit";
 import { customElement, property, state } from 'lit/decorators.js';
-import { ThemableMixin } from "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js";
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
@@ -56,12 +55,11 @@ import '@vaadin/vertical-layout';
  * @name vcf-breadcrumbs
  * @mixes ResizeMixin
  * @mixes ElementMixin
- * @mixes ThemableMixin
  * @mixes PolylitMixin
  * @demo demo/index.html
  */
 @customElement("vcf-breadcrumbs")
-export class VcfBreadcrumbs extends ResizeMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+export class VcfBreadcrumbs extends ResizeMixin(ElementMixin(PolylitMixin(LitElement))) {
 
   /**
    * Flag to indicate if the component is in mobile mode. 
@@ -96,9 +94,16 @@ export class VcfBreadcrumbs extends ResizeMixin(ElementMixin(ThemableMixin(Polyl
 
   static get styles() {
     return css`
-        :host {
-          display: block;
-        }          
+      :host {
+        display: block;
+      }
+
+      [part='links-list'] {
+        display: flex;
+        justify-content: start;
+        align-content: center;
+        align-items: center;
+      }
     `;
   }
 
@@ -281,41 +286,39 @@ export class VcfBreadcrumbs extends ResizeMixin(ElementMixin(ThemableMixin(Polyl
     ellipsis.style.minWidth = '0';
 
     // Create a popover to show the hidden breadcumbs and add it to the ellipsis element
-    let popover = document.createElement("vaadin-popover");
+    const popover = document.createElement("vaadin-popover");
     popover.setAttribute("for", id);
-    popover.setAttribute("overlay-role", "menu");
-    popover.setAttribute('accessible-name-ref', "hidden breadcrumbs"); 
+    popover.setAttribute("role", "menu");
+    popover.setAttribute('aria-labelledby', id);
     popover.setAttribute("theme", "hidden-breadcrumbs");
     popover.setAttribute("position", "bottom-start");
     popover.setAttribute("modal", "true");
 
-    popover.renderer = (root) => {
-      // Ensure content is only added once
-      if (!root.firstChild) {
-        const verticalLayout = document.createElement('vaadin-vertical-layout');
-        verticalLayout.classList.add('hidden-breadcrumbs-layout');
-
-        // create new anchor elements for the hidden items and add them to the vertical layout
-        hiddenItems.forEach((element) => {
-          const item = document.createElement('a');
-          item.textContent = element.textContent;
-          item.setAttribute("href", element.getAttribute('href') ?? '');
-          item.setAttribute("role", "menuitem");
-          // Copy element class list
-          const elementClasses = Array.from(element.classList);
-          item.classList.add(...elementClasses);
-          item.classList.add("hidden-breadcrumb-anchor");
-
-          // Add click event to close popover when clicking an item
-          item.addEventListener("click", () => {
-            popover.opened = false;
-          });
-
-          verticalLayout.appendChild(item); 
-        });              
-        root.appendChild(verticalLayout);    
-      }
-    };
+    const verticalLayout = document.createElement('vaadin-vertical-layout');
+    verticalLayout.classList.add('hidden-breadcrumbs-layout');
+
+    // create new anchor elements for the hidden items and add them to the vertical layout
+    hiddenItems.forEach((element) => {
+      const item = document.createElement('a');
+      item.textContent = element.textContent;
+      item.setAttribute("href", element.getAttribute('href') ?? '');
+      item.setAttribute("role", "menuitem");
+      // Copy element class list
+      const elementClasses = Array.from(element.classList);
+      item.classList.add(...elementClasses);
+      item.classList.add("hidden-breadcrumb-anchor");
+
+      // Add click event to close popover when clicking an item
+      item.addEventListener("click", (event) => {
+        popover.opened = false;
+        // Stop propagation, since the popover is nested within the trigger
+        // element the click would otherwise re-open the popover
+        event.stopPropagation();
+      });
+
+      verticalLayout.appendChild(item);
+    });
+    popover.appendChild(verticalLayout);
 
     // append popover to ellipsis to move it later to the anchor within the container
     ellipsis.appendChild(popover);
@@ -342,27 +345,6 @@ export class VcfBreadcrumbs extends ResizeMixin(ElementMixin(ThemableMixin(Polyl
         this._mobile = matches;
       }),
     );
-
-    // Inject a scoped <style> element to define the mobile back icon behavior
-    const style = document.createElement('style');
-    style.textContent = `
-      /* 
-       * This rule targets an <a> element with the 'breadcrumb-anchor' and
-       * 'add-mobile-back-icon' classes that is a direct child of <vcf-breadcrumb>.
-       *
-       * Although technically global, it's scoped through the component selector
-       * and only applies to breadcrumb anchors styled for mobile mode.
-       */
-      vcf-breadcrumb > a.breadcrumb-anchor.add-mobile-back-icon::before {
-        display: inline;
-        font-family: var(--vcf-breadcrumb-separator-font-family);
-        content: var(--vcf-breadcrumb-mobile-back-symbol);
-        font-size: var(--vcf-breadcrumb-separator-size);
-        margin: var(--vcf-breadcrumb-separator-margin);
-        color: inherit;
-      }
-    `;
-    this.appendChild(style);
   }
 
 }

src/index.ts

@@ -1 +1 @@
-export { VcfBreadcrumbs as VcfBreadcrumbs } from './component/vcf-breadcrumbs.js';
+export * from './vcf-breadcrumbs.js';