@nanoporetech-digital/components 8.11.2 → 8.11.4

package/dist/types/components/datalist/datalist.d.ts

@@ -11,6 +11,10 @@ import type { OptionInterface } from '../option/option-interface';
  * @slot list-top - shows at the top of the list when there are options present
  * @slot list-bottom - shows at the bottom of the list when there are options present
  * @slot no-result - shown when there are no results otherwise nothing will be shown
+ *
+ * @part dropdown - the wrapping `nano-dropdown` element
+ * @part main-menu - the main `nano-menu` element that holds the options
+ * @part no-result-menu - the `nano-menu` element that holds the no results content
  */
 export declare class DataList implements ComponentInterface {
     private isNanoInput;

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-10-07T12:23:45",
+  "timestamp": "2025-10-08T11:24:07",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.36.1",
@@ -3318,7 +3318,18 @@
       "methods": [],
       "events": [],
       "listeners": [],
-      "styles": [],
+      "styles": [
+        {
+          "name": "--bg",
+          "annotation": "prop",
+          "docs": "Background color of the badge. Defaults to a colour defined by the `theme` and `strength` attributes;"
+        },
+        {
+          "name": "--color",
+          "annotation": "prop",
+          "docs": "Text color of the badge. Defaults to being dynamically calculated based on the best contrast with `--bg` color;"
+        }
+      ],
       "slots": [],
       "parts": [],
       "dependents": [
@@ -3358,7 +3369,7 @@
             "references": {
               "Breadcrumb": {
                 "location": "local",
-                "path": "/builds/-v_1b6Vq/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
+                "path": "/builds/scdfPYwW/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
                 "id": "src/components/breadcrumb/breadcrumb.tsx::Breadcrumb"
               }
             }
@@ -6728,6 +6739,18 @@
         {
           "name": "slot",
           "text": "no-result - shown when there are no results otherwise nothing will be shown"
+        },
+        {
+          "name": "part",
+          "text": "dropdown - the wrapping `nano-dropdown` element"
+        },
+        {
+          "name": "part",
+          "text": "main-menu - the main `nano-menu` element that holds the options"
+        },
+        {
+          "name": "part",
+          "text": "no-result-menu - the `nano-menu` element that holds the no results content"
         }
       ],
       "usage": {},
@@ -7139,15 +7162,15 @@
       "parts": [
         {
           "name": "dropdown",
-          "docs": ""
+          "docs": "the wrapping `nano-dropdown` element"
         },
         {
           "name": "main-menu",
-          "docs": ""
+          "docs": "the main `nano-menu` element that holds the options"
         },
         {
           "name": "no-result-menu",
-          "docs": ""
+          "docs": "the `nano-menu` element that holds the no results content"
         }
       ],
       "dependents": [

package/hydrate/index.js

@@ -9028,6 +9028,10 @@ let listIds = 0;
  * @slot list-top - shows at the top of the list when there are options present
  * @slot list-bottom - shows at the bottom of the list when there are options present
  * @slot no-result - shown when there are no results otherwise nothing will be shown
+ *
+ * @part dropdown - the wrapping `nano-dropdown` element
+ * @part main-menu - the main `nano-menu` element that holds the options
+ * @part no-result-menu - the `nano-menu` element that holds the no results content
  */
 class DataList {
     // Private State
@@ -9530,18 +9534,18 @@ class DataList {
         }
     }
     render() {
-        return (h(Host, { key: '6648095e87e86086dd4beb0bea663c077becb0a9', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
+        return (h(Host, { key: '269f57e6eccd251685f84a94d53f380d6545a3cb', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
                 ? 'Select options from the list below'
-                : undefined }, h("nano-dropdown", { key: '882d3706051e93738b2b52fb4d4024aeeb3ef295', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
+                : undefined }, h("nano-dropdown", { key: 'ee6398b356dc1a0ff9fa35e84955314fc95435b6', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
                 dlist__dropdown: true,
                 'dlist--isfiltered': this.isFiltered,
-            }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: 'ccda08c9da20ea0cbb6944a170929c2c5ef36b70', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
+            }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: 'f80006a5ba62c227094da52672b4abf6ee6335dc', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
                 dlist__menu: true,
                 'dlist__menu--open': this.dropwdownOpen,
-            }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '0db7a9e551be91837cd7dfa148057702db76f1db', name: "list-top" }), h("slot", { key: 'b55088fc93ac7cfb24eee33ffe720de3e401daf5' }), h("slot", { key: '28eeaf664c8f2f78adf9716ab952071659c02fb6', name: "internal-opts" }), h("slot", { key: 'be42f12bb5027f2b8664ab9d275014b6ea37d702', name: "list-bottom" })), h("nano-menu", { key: '28ec7183890b5d266081a7a75179552261ab4401', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
+            }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '8a2d3160b990c99baeaf4fd9bdd7bb04229d642c', name: "list-top" }), h("slot", { key: '2230e4458be0998d59d18250e1d22188baf2f6b1' }), h("slot", { key: 'fca84cbd01495e4b62ba95c4c07681f506939d3f', name: "internal-opts" }), h("slot", { key: '076fd81c15f5ac6590e5311503262a07f60e8454', name: "list-bottom" })), h("nano-menu", { key: 'd4878bc502b4fcc0de01f67b5065ad017f445f75', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
                 dlist__menu: true,
                 'dlist__menu--open': this.dropwdownOpen,
-            } }, h("slot", { key: '57a5d980992d0eac7a505f3dae5c8d57fb8d38d8', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '5b2e2489fb2ed53011f465b56defe279a55af455', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
+            } }, h("slot", { key: '2ac583af3ac8b24ace627637ab86471999df9465', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '4971780255baf694fcc447756ca02e1115ece871', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
     }
     static get watchers() { return {
         "open": ["openWatcher"],
@@ -18950,14 +18954,16 @@ class MaskedOverflow {
             this.ro.disconnect();
             this.ro = undefined;
         }
-        const mo = (this.ro = new ResizeObserver(this.recalculatePositions));
-        mo.observe(this.host);
+        const ro = (this.ro = new ResizeObserver(this.recalculatePositions));
+        ro.observe(this.host);
     }
     componentWillLoad() {
         this.watchHideScrollbars();
     }
     componentDidLoad() {
         this.activeItem = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
+        this.hideStartBtn();
+        this.hideEndBtn();
         requestAnimationFrame(() => (this.instantReCalc = false));
     }
     disconnectedCallback() {
@@ -18967,7 +18973,7 @@ class MaskedOverflow {
         }
     }
     render() {
-        return (h(Host, { key: 'f09154c9daef9d42d1ac6bf1ae1cab43b25fc759', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: 'c08a301b623b69a8a8936e846fb4d61c3d7a5d42', part: "base", class: {
+        return (h(Host, { key: 'e5c6238730817f0c7036060faa8c344d514a3924', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: '4027acd51b80fd1bf2bb9d66a05ec051802732f3', part: "base", class: {
                 onav: true,
                 [`onav--${this.orientation}`]: true,
                 'onav--has-scroll-controls': this.hasScrollControls,
@@ -18976,12 +18982,12 @@ class MaskedOverflow {
                 'onav--no-transitions': this.instantReCalc,
                 'onnav--has-indicator': this.showIndicator,
                 'onnav--hide-scrollbars': this.hideScrollbars && this.hideScrollbars !== 'false',
-            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '4430bfab6920f77fe64885eb12c7a1f2ebfdbf31', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '800ac8de65485ebaa4060c26a7f0b3432348c8d1', part: "scroll-button scroll-button-prev", class: {
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'a552b2e3cdf9f84249655b21ce6f2acb5c330a75', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '5aca29990db29b3d0d00e6bca317cd3870d06d6b', part: "scroll-button scroll-button-prev", class: {
                 'onav__scroll-button': true,
                 'onav__scroll-button--start': true,
             }, ref: (btn) => (this.startBtn = btn), onClick: () => this.handleBtnClick(false), label: "Click to scroll", iconName: this.orientation === 'horizontal'
                 ? 'light/chevron-left'
-                : 'light/chevron-up' })), h("div", { key: '48fff7814d1c8a864ca9f29c0b4bc2196c7b4a98', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, h("div", { key: '376a6e0007b1e9e35d3226e6575d0ca840b1f75a', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: 'c0b933b6b29071de0f5b3d3b97497de231b45801', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: '2bff315c99ce804c26240ef5e134c1f08fed0547', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'd568e4adaf25dbf10127e433220fa6900298e31f', part: "scroll-button scroll-button-next", class: {
+                : 'light/chevron-up' })), h("div", { key: '9c2b4c91859b5c6c132ab2eecc01cf56eeec18b9', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, h("div", { key: 'a77097f7b9a70e08f9a1eb980948c5c92dff760d', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: 'b8661b042f9e195850a33ce3570b75c9bed25d7e', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: '54af572f6ef591d8d3cb34221e048ac0e32140bb', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'e27a06cc2cec7ed373c527e3c6db5a0a56a90b71', part: "scroll-button scroll-button-next", class: {
                 'onav__scroll-button': true,
                 'onav__scroll-button--end': true,
             }, ref: (btn) => (this.endBtn = btn), onClick: () => this.handleBtnClick(true), label: "Click to scroll", iconName: this.orientation === 'horizontal'
@@ -19735,6 +19741,8 @@ class NanoAvatar {
     }; }
 }
 
+const badgeCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}";
+
 /**
  * Badges are used to draw attention and display statuses or counts.
  *
@@ -19753,6 +19761,7 @@ class NanoBadge {
     strength;
     /** Use pulse to draw attention to the badge with an animation */
     pulse;
+    static get style() { return badgeCss; }
     static get cmpMeta() { return {
         "$flags$": 0,
         "$tagName$": "nano-badge",

package/hydrate/index.mjs

@@ -9026,6 +9026,10 @@ let listIds = 0;
  * @slot list-top - shows at the top of the list when there are options present
  * @slot list-bottom - shows at the bottom of the list when there are options present
  * @slot no-result - shown when there are no results otherwise nothing will be shown
+ *
+ * @part dropdown - the wrapping `nano-dropdown` element
+ * @part main-menu - the main `nano-menu` element that holds the options
+ * @part no-result-menu - the `nano-menu` element that holds the no results content
  */
 class DataList {
     // Private State
@@ -9528,18 +9532,18 @@ class DataList {
         }
     }
     render() {
-        return (h(Host, { key: '6648095e87e86086dd4beb0bea663c077becb0a9', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
+        return (h(Host, { key: '269f57e6eccd251685f84a94d53f380d6545a3cb', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
                 ? 'Select options from the list below'
-                : undefined }, h("nano-dropdown", { key: '882d3706051e93738b2b52fb4d4024aeeb3ef295', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
+                : undefined }, h("nano-dropdown", { key: 'ee6398b356dc1a0ff9fa35e84955314fc95435b6', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
                 dlist__dropdown: true,
                 'dlist--isfiltered': this.isFiltered,
-            }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: 'ccda08c9da20ea0cbb6944a170929c2c5ef36b70', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
+            }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: 'f80006a5ba62c227094da52672b4abf6ee6335dc', part: "main-menu", ref: (el) => (this.listBox = el), hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
                 dlist__menu: true,
                 'dlist__menu--open': this.dropwdownOpen,
-            }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '0db7a9e551be91837cd7dfa148057702db76f1db', name: "list-top" }), h("slot", { key: 'b55088fc93ac7cfb24eee33ffe720de3e401daf5' }), h("slot", { key: '28eeaf664c8f2f78adf9716ab952071659c02fb6', name: "internal-opts" }), h("slot", { key: 'be42f12bb5027f2b8664ab9d275014b6ea37d702', name: "list-bottom" })), h("nano-menu", { key: '28ec7183890b5d266081a7a75179552261ab4401', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
+            }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown }, h("slot", { key: '8a2d3160b990c99baeaf4fd9bdd7bb04229d642c', name: "list-top" }), h("slot", { key: '2230e4458be0998d59d18250e1d22188baf2f6b1' }), h("slot", { key: 'fca84cbd01495e4b62ba95c4c07681f506939d3f', name: "internal-opts" }), h("slot", { key: '076fd81c15f5ac6590e5311503262a07f60e8454', name: "list-bottom" })), h("nano-menu", { key: 'd4878bc502b4fcc0de01f67b5065ad017f445f75', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
                 dlist__menu: true,
                 'dlist__menu--open': this.dropwdownOpen,
-            } }, h("slot", { key: '57a5d980992d0eac7a505f3dae5c8d57fb8d38d8', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '5b2e2489fb2ed53011f465b56defe279a55af455', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
+            } }, h("slot", { key: '2ac583af3ac8b24ace627637ab86471999df9465', name: "no-result" })), !!this.actvOptEles && (h("div", { key: '4971780255baf694fcc447756ca02e1115ece871', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
     }
     static get watchers() { return {
         "open": ["openWatcher"],
@@ -18948,14 +18952,16 @@ class MaskedOverflow {
             this.ro.disconnect();
             this.ro = undefined;
         }
-        const mo = (this.ro = new ResizeObserver(this.recalculatePositions));
-        mo.observe(this.host);
+        const ro = (this.ro = new ResizeObserver(this.recalculatePositions));
+        ro.observe(this.host);
     }
     componentWillLoad() {
         this.watchHideScrollbars();
     }
     componentDidLoad() {
         this.activeItem = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
+        this.hideStartBtn();
+        this.hideEndBtn();
         requestAnimationFrame(() => (this.instantReCalc = false));
     }
     disconnectedCallback() {
@@ -18965,7 +18971,7 @@ class MaskedOverflow {
         }
     }
     render() {
-        return (h(Host, { key: 'f09154c9daef9d42d1ac6bf1ae1cab43b25fc759', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: 'c08a301b623b69a8a8936e846fb4d61c3d7a5d42', part: "base", class: {
+        return (h(Host, { key: 'e5c6238730817f0c7036060faa8c344d514a3924', dir: this.isRtl ? 'rtl' : null, class: "nano-masked-overflow", "has-scroll-controls": this.hasScrollControls }, h("div", { key: '4027acd51b80fd1bf2bb9d66a05ec051802732f3', part: "base", class: {
                 onav: true,
                 [`onav--${this.orientation}`]: true,
                 'onav--has-scroll-controls': this.hasScrollControls,
@@ -18974,12 +18980,12 @@ class MaskedOverflow {
                 'onav--no-transitions': this.instantReCalc,
                 'onnav--has-indicator': this.showIndicator,
                 'onnav--hide-scrollbars': this.hideScrollbars && this.hideScrollbars !== 'false',
-            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '4430bfab6920f77fe64885eb12c7a1f2ebfdbf31', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '800ac8de65485ebaa4060c26a7f0b3432348c8d1', part: "scroll-button scroll-button-prev", class: {
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'a552b2e3cdf9f84249655b21ce6f2acb5c330a75', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: '5aca29990db29b3d0d00e6bca317cd3870d06d6b', part: "scroll-button scroll-button-prev", class: {
                 'onav__scroll-button': true,
                 'onav__scroll-button--start': true,
             }, ref: (btn) => (this.startBtn = btn), onClick: () => this.handleBtnClick(false), label: "Click to scroll", iconName: this.orientation === 'horizontal'
                 ? 'light/chevron-left'
-                : 'light/chevron-up' })), h("div", { key: '48fff7814d1c8a864ca9f29c0b4bc2196c7b4a98', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, h("div", { key: '376a6e0007b1e9e35d3226e6575d0ca840b1f75a', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: 'c0b933b6b29071de0f5b3d3b97497de231b45801', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: '2bff315c99ce804c26240ef5e134c1f08fed0547', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'd568e4adaf25dbf10127e433220fa6900298e31f', part: "scroll-button scroll-button-next", class: {
+                : 'light/chevron-up' })), h("div", { key: '9c2b4c91859b5c6c132ab2eecc01cf56eeec18b9', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll, tabindex: this.hasScrollControls ? 0 : undefined, role: "region", "aria-label": this.label || undefined }, h("div", { key: 'a77097f7b9a70e08f9a1eb980948c5c92dff760d', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, this.showIndicator && (h("div", { key: 'b8661b042f9e195850a33ce3570b75c9bed25d7e', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" })), h("slot", { key: '54af572f6ef591d8d3cb34221e048ac0e32140bb', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'e27a06cc2cec7ed373c527e3c6db5a0a56a90b71', part: "scroll-button scroll-button-next", class: {
                 'onav__scroll-button': true,
                 'onav__scroll-button--end': true,
             }, ref: (btn) => (this.endBtn = btn), onClick: () => this.handleBtnClick(true), label: "Click to scroll", iconName: this.orientation === 'horizontal'
@@ -19733,6 +19739,8 @@ class NanoAvatar {
     }; }
 }
 
+const badgeCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}";
+
 /**
  * Badges are used to draw attention and display statuses or counts.
  *
@@ -19751,6 +19759,7 @@ class NanoBadge {
     strength;
     /** Use pulse to draw attention to the badge with an animation */
     pulse;
+    static get style() { return badgeCss; }
     static get cmpMeta() { return {
         "$flags$": 0,
         "$tagName$": "nano-badge",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "8.11.2",
+  "version": "8.11.4",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -60,7 +60,7 @@
     "smart-array-filter": "^4.0.2",
     "stencil-wormhole": "3.2.1",
     "tyqs": "^0.1.3",
-    "@nanoporetech-digital/style": "8.11.2"
+    "@nanoporetech-digital/style": "8.11.4"
   },
   "devDependencies": {
     "@algolia/client-search": "^4.22.1",