@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.0

package/dist/cjs/nano-breadcrumb.cjs.entry.js

@@ -0,0 +1,41 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+'use strict';
+
+var index = require('./index-DYD4xvxr.js');
+var style = require('./style-BccHkuhC.js');
+
+const breadcrumbCss = ":host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host {\n  /**\n  * @prop {string} --text-color - The base color of the text. Defaults to var(--nano-color-primary-1000).\n  * @prop {string} --text-color-hover - The hover colour of the text. Defaults to var(--nano-color-primary-1200).\n  * @prop {string} --text-color-secondary - The secondary colour (& inactive colour) of the text. Defaults to var(--nano-color-neutral-1400).\n  * @prop {string} --text-color-disabled - The disabled colour of the text. Defaults to var(--nano-color-neutral-1000).\n  * @prop {string} --border-color - The colour of the border & divider. Defaults to var(--nano-color-neutral-400).\n  * @prop {string} --trigger-bg-color - The background colour of the trigger button. Defaults to var(--nano-color-base-0).\n  */\n  --text-color: var(--nano-color-primary-1000);\n  --text-color-hover: var(--nano-color-primary-1200);\n  --text-color-secondary: var(--nano-color-neutral-1400);\n  --text-color-disabled: var(--nano-color-neutral-1000);\n  --border-color: var(--nano-color-neutral-400);\n  --trigger-bg-color: var(--nano-color-base-0);\n}\n:host .breadcrumbs {\n  container-type: inline-size;\n  container-name: breadcrumbs;\n  inline-size: 100%;\n  max-inline-size: 1346px;\n}\n:host nano-menu::part(base), :host nano-menu [part~=\"base\"] {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  flex-direction: row;\n}\n:host li,\n:host nano-nav-item {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  font-size: var(--nano-font-size-xs);\n  line-height: var(--nano-line-height-normal);\n  text-wrap: nowrap;\n  margin-block-end: 0;\n}\n:host li:not(.return-only li)::after,\n:host nano-nav-item::after {\n  content: \"/\";\n  margin: 0 var(--nano-spacing-xs);\n  color: var(--border-color);\n}\n:host a.link {\n  color: var(--text-color);\n}\n:host a:not(.link) {\n  color: var(--text-color-secondary);\n}\n:host a:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n  z-index: 1;\n}\n:host a.link:hover {\n  color: var(--text-color-hover);\n}\n:host a.return.link {\n  display: flex;\n  align-items: center;\n  gap: calc(var(--nano-spacing-sm) / 2);\n}\n:host nano-dropdown {\n  inline-size: 100%;\n  display: none;\n}\n:host nano-dropdown[open]::part(trigger), :host nano-dropdown[open] [part~=\"trigger\"] {\n  box-shadow: var(--nano-shadow-l1);\n}\n:host nano-dropdown[open]::part(panel), :host nano-dropdown[open] [part~=\"panel\"] {\n  box-shadow: var(--nano-shadow-l1);\n}\n:host .trigger-button {\n  inline-size: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--nano-spacing-l3) var(--nano-spacing-l2);\n  color: var(--text-color);\n  background-color: var(--trigger-bg-color);\n  cursor: pointer;\n  text-align: start;\n  border: none;\n  font-size: var(--nano-font-size-xs);\n}\n:host .trigger-button .trigger-button_label {\n  text-decoration: underline;\n}\n:host .trigger-button .trigger-button_label::after {\n  content: \"/\";\n  margin: 0 var(--nano-spacing-xs);\n  color: var(--border-color);\n}\n:host .trigger-button:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n}\n:host .trigger-icon {\n  transform: rotate(0deg);\n  transition: var(--nano-transition-x-fast) ease transform;\n}\n:host .trigger-icon--open {\n  transform: rotate(180deg);\n}\n@container breadcrumbs (max-width: 768px) {\n  :host .main {\n    display: none;\n  }\n  :host nano-dropdown {\n    display: block;\n  }\n  :host nano-menu::part(base), :host nano-menu [part~=\"base\"] {\n    flex-direction: column;\n  }\n  :host nano-nav-item::after {\n    display: none;\n  }\n  :host .trigger-button_label::after {\n    display: inline-block;\n  }\n  :host .return-only {\n    padding: var(--nano-spacing-l3) var(--nano-spacing-l2);\n  }\n  :host nano-nav-item::part(trigger), :host nano-nav-item [part~=\"trigger\"] {\n    text-decoration: none;\n    color: var(--text-color-secondary);\n  }\n}";
+
+const NanoBreadcrumb = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /** Array of breadcrumb items to render */
+    breadcrumbs = [];
+    isOpen = false;
+    componentWillLoad() {
+        // add global styles to shadow DOM
+        style.addGlobalStylesheetToShadow(this.el?.shadowRoot);
+    }
+    render() {
+        const returnBreadcrumb = this.breadcrumbs?.find((breadcrumb) => breadcrumb.return);
+        // if we have a return breadcrumb, we only want to show that
+        if (returnBreadcrumb) {
+            return (index.h("nav", { "aria-label": "Breadcrumb", class: "breadcrumbs" }, index.h(BreadcrumbList, { breadcrumbs: [returnBreadcrumb], className: "return-only" })));
+        }
+        const parentBreadcrumb = this.breadcrumbs?.length
+            ? this.breadcrumbs.at(-1)
+            : null;
+        return (index.h("div", { class: "breadcrumbs" }, index.h("nav", { "aria-label": "Breadcrumb" }, index.h(BreadcrumbList, { breadcrumbs: this.breadcrumbs, className: "main" })), index.h("nano-dropdown", { dialogTitle: `${parentBreadcrumb?.label} Breadcrumb`, onNanoShow: () => (this.isOpen = true), onNanoHide: () => (this.isOpen = false), containingElement: this.el }, index.h("button", { class: "trigger-button", slot: "trigger" }, index.h("span", null, this.breadcrumbs && this.breadcrumbs.length > 1 && (index.h("span", { class: "trigger-button_label" }, "..")), index.h("span", { class: "trigger-button_label" }, parentBreadcrumb?.label)), index.h("nano-icon", { class: {
+                'trigger-icon': true,
+                'trigger-icon--open': this.isOpen,
+            }, name: "light/chevron-down" })), index.h("nav", null, index.h("nano-menu", { class: "breadcrumbs small", label: "Breadcrumbs" }, this.breadcrumbs?.slice(0, -1)?.map((breadcrumb, index$1) => (index.h("nano-nav-item", { key: index$1, href: breadcrumb.href, class: { return: breadcrumb.return, link: !!breadcrumb.href }, disabled: !breadcrumb.href }, breadcrumb.label))))))));
+    }
+};
+const BreadcrumbList = ({ breadcrumbs, className, }) => (index.h("ol", { class: `breadcrumbs ${className}` }, breadcrumbs?.map((breadcrumb, index$1) => (index.h("li", null, index.h("a", { key: index$1, href: breadcrumb.href, class: { return: breadcrumb.return, link: !!breadcrumb.href } }, breadcrumb.return && (index.h("nano-icon", { name: "light/chevron-left", size: "small", class: "breadcrumb-icon" })), breadcrumb.label))))));
+NanoBreadcrumb.style = breadcrumbCss;
+
+exports.nano_breadcrumb = NanoBreadcrumb;

package/dist/cjs/nano-card-carousel.cjs.entry.js

@@ -0,0 +1,95 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+'use strict';
+
+var index = require('./index-DYD4xvxr.js');
+var renderer = require('./renderer-SkVn69pT.js');
+
+const cardCarouselCss = ":host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }/** Typography */\n:host {\n  /**\n   * @prop --bleed: A portion of the Image of the next card is displayed outside the parent width boundary. \n   * Generally should be the parent's `padding-inline-end` (or `padding-right`). Defaults to 0px;\n   * @prop --gap: gap between the slides. Defaults to var(--nano-spacing-xl) on large screens, var(--nano-spacing-md) on small screens;\n   * @prop --pagination-button-color: The color of the pagination button. Defaults to var(--nano-color-neutral-400);\n   * @prop --pagination-button-active: Active color of the pagination button. Defaults to var(--nano-color-primary-1000);\n   */\n  --bleed: 0px;\n  --gap: var(--nano-spacing-xl);\n  --pagination-button-color: var(--nano-color-neutral-400);\n  --pagination-button-hover: var(--nano-color-primary-700);\n  --pagination-button-active: var(--nano-color-primary-1000);\n  --peek: calc(var(--bleed) / 2);\n  display: block;\n  position: relative;\n  margin-inline: 0 calc(var(--bleed) * -1);\n  container-type: inline-size;\n}\n\n.base ::slotted(nano-slide), .base::slotted(nano-slide) {\n  --img-opacity: calc(1 - max((var(--distance) - 50) / 30, 0));\n  --text-opacity: calc(1 - max((var(--distance) - 50) / 15, 0));\n  display: block;\n  text-align: unset;\n  min-block-size: auto;\n  inline-size: calc(50% + var(--gap) / 2 - var(--peek));\n  padding-inline-end: var(--gap);\n}\n.base nano-slides[ready]::part(slide-container), .base nano-slides[ready] [part~=\"slide-container\"] {\n  flex-flow: column wrap;\n  justify-content: flex-start;\n}\n.base nano-slides::part(slide-viewport), .base nano-slides [part~=\"slide-viewport\"] {\n  flex: auto;\n}\n.base nano-slides::part(navigation-button--previous), .base nano-slides [part~=\"navigation-button--previous\"] {\n  display: none;\n}\n.base nano-slides::part(navigation-button--next), .base nano-slides [part~=\"navigation-button--next\"] {\n  transform: none;\n  block-size: 100%;\n  inline-size: var(--bleed);\n  inset-inline-end: 0;\n  inset-block-start: 0;\n  border-radius: 0;\n  margin: 0;\n  padding: 0;\n  opacity: 0;\n}\n.base .header {\n  max-inline-size: calc(100% - var(--bleed));\n  display: flex;\n  gap: var(--nano-spacing-md);\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  margin-block-end: var(--gap);\n}\n.base .title {\n  font-weight: var(--nano-font-weight-normal);\n  font-size: var(--nano-font-size-xl);\n  line-height: var(--nano-line-height-denser);\n  line-height: 1;\n}\n.base .pagination {\n  display: inline-flex;\n  gap: var(--nano-spacing-md);\n}\n.base .pagination-btn {\n  all: unset;\n  inline-size: 1.25rem;\n  block-size: 0.375rem;\n  margin-block: 0;\n  cursor: pointer;\n  background: var(--pagination-button-color);\n  position: relative;\n}\n.base .pagination-btn::after {\n  content: \"\";\n  position: absolute;\n  inset: -1rem -0.625rem;\n}\n.base .pagination-btn:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n  z-index: 1;\n}\n.base .pagination-btn:hover {\n  background: var(--pagination-button-hover);\n}\n.base .pagination-btn:active {\n  background: var(--pagination-button-active);\n}\n.base .pagination-btn__label {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  overflow: hidden;\n  pointer-events: none;\n  visibility: hidden;\n}\n.base .pagination-btn--active {\n  background: var(--pagination-button-active);\n}\n.base nano-slides {\n  overflow: visible;\n}\n@container (width < 615px) {\n  .base {\n    --gap: var(--nano-spacing-md);\n    --peek: var(--bleed);\n  }\n  .base ::slotted(nano-slide), .base::slotted(nano-slide) {\n    --img-opacity: calc(1 - max((var(--distance) - 30) / 5, 0));\n    --text-opacity: calc(1 - max((var(--distance) - 30) / 3, 0));\n    inline-size: calc(100% + var(--gap) - var(--peek));\n  }\n  .base .header {\n    flex-direction: column;\n    align-items: start;\n  }\n  .base .pagination {\n    transform: translateY(-50%);\n  }\n}";
+
+const ContentCarousel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    nanoSlides;
+    flickity;
+    get host() { return index.getElement(this); }
+    slideCount = 0;
+    slideOptions;
+    activeSlide = 0;
+    /** The title of the carousel. Alternatively use the `slot="title"` for more control over markup */
+    carouselTitle;
+    handleSlidesChange = () => {
+        this.slideCount = this.host.querySelectorAll('nano-slide').length;
+    };
+    handleSlideCountChange() {
+        if (this.slideCount > 2) {
+            this.slideOptions = {
+                wrapAround: true,
+                cellAlign: 'left',
+                friction: 0.4,
+            };
+        }
+        else {
+            this.slideOptions = {
+                wrapAround: false,
+                cellAlign: 'left',
+                friction: 0.4,
+            };
+        }
+    }
+    handleSlideMove = async (_event) => {
+        const flkty = await this.flickity;
+        const modulo = (num, div) => ((num % div) + div) % div;
+        const cells = flkty.cells;
+        // applies a relative '--distance' CSS variable to each cell,
+        // with '0' being the current cell.
+        // this is used (in card-carousel.scss) to calculate an opacity
+        // which is then applied (in card-carousel.light-dom.scss) to the card contents
+        for (const cell of cells) {
+            let flkX = flkty.x;
+            if (flkty.options.wrapAround && flkty.cells.length > 1) {
+                flkX = modulo(flkX, flkty.slideableWidth);
+                flkX = flkX - flkty.slideableWidth;
+            }
+            let x = ((cell.target + flkX) * -1) / 3;
+            if (cell.shift < 0) {
+                x = ((cell.target - flkty.slideableWidth + flkX) * -1) / 3;
+            }
+            else if (cell.shift > 0) {
+                x = ((cell.target + (flkX + flkty.slideableWidth)) * -1) / 3;
+            }
+            const animAmount = Math.abs((x / cell.size.width) * 100);
+            cell.element.style.setProperty('--distance', animAmount.toString());
+        }
+    };
+    isActive(num) {
+        if (num === this.activeSlide) {
+            return true;
+        }
+        return false;
+    }
+    connectedCallback() {
+        this.handleSlidesChange();
+    }
+    render() {
+        return (renderer.h(index.Host, { key: '0b109c1cbafa9ef25af53a0a6360dc7bf64203e5', class: "nano-card-carousel" }, renderer.h("div", { key: '50a72ea03441b34b828e97bbb19c1bc157ba31a8', class: "base", part: "base" }, renderer.h("div", { key: 'fd9595fa43523954e6f17f58cf855a45d11c5848', class: "header" }, renderer.h("div", { key: '4c09ef2e0cbc66307359b7df7ec7074ba7998d79', class: "title", part: "title" }, renderer.h("slot", { key: 'ea638d1f619d7607143d72f1d23d29b218fedf82', name: "title" }, this.carouselTitle)), this.slideCount > 1 && (renderer.h("div", { key: '0f5590a285a92d72920f9e2c9d4ec16576bd224d', class: "pagination", part: "pagination" }, Array.from({ length: this.slideCount }).map((_, index) => (renderer.h("button", { key: index, class: {
+                'pagination-btn': true,
+                'pagination-btn--active': this.isActive(index),
+            }, onClick: () => {
+                if (!this.nanoSlides || this.isActive(index))
+                    return;
+                this.nanoSlides.slideTo(index);
+            } }, renderer.h("span", { class: "pagination-btn__label" }, "Go to slide ", index + 1))))))), renderer.h("nano-slides", { key: 'c3c6f69a4a206d6bcf5ad00420171bd66f2f2953', pager: false, options: this.slideOptions, navbtns: true, part: "slides", onNanoSlidesScroll: this.handleSlideMove, onNanoSlidesSelect: (e) => (this.activeSlide = e.detail), ref: (slides) => {
+                this.nanoSlides = slides;
+                this.flickity = slides.getflickity();
+            } }, renderer.h("slot", { key: 'abe97c137edfbb040a306d098a5e12713828eacf', onSlotchange: this.handleSlidesChange })))));
+    }
+    static get watchers() { return {
+        "slideCount": ["handleSlideCountChange"]
+    }; }
+};
+ContentCarousel.style = cardCarouselCss;
+
+exports.nano_card_carousel = ContentCarousel;

package/dist/cjs/nano-card.cjs.entry.js

@@ -0,0 +1,23 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+'use strict';
+
+var index = require('./index-DYD4xvxr.js');
+
+const cardCss = ":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}}";
+
+const NanoCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** The layout of the card. `landscape` only applies when the card is large enough. Defaults to portrait. */
+    layout;
+    /** The variant of card. Changes the styling of the card and of nested elements */
+    variant;
+    /** Size of card's heading. Defaults to `large`. Has no baring on `variant="promo"` cards */
+    size;
+};
+NanoCard.style = cardCss;
+
+exports.nano_card = NanoCard;

package/dist/cjs/nano-checkbox-group.cjs.entry.js

@@ -1,17 +1,14 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DYD4xvxr.js');
+var theme = require('./theme-2potFCtG.js');
+var throttle = require('./throttle-CrRDOkln.js');
+var renderer = require('./renderer-SkVn69pT.js');
 
-const index = require('./index-615cdb64.js');
-const theme = require('./theme-a2f7ddf8.js');
-const throttle = require('./throttle-46a497fb.js');
-const renderer = require('./renderer-cd8b6098.js');
-
-const checkboxGroupCss = ".sc-nano-checkbox-group-h{box-sizing:border-box}*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}.sc-nano-checkbox-group-h{box-sizing:border-box}*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}.sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:0;--control-margin-bottom:0;--control-margin-start:0;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, \"currentcolor\");--label-color--invalid:var(--nano-input-label-color-invalid, \"currentcolor\");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));display:block}.sc-nano-checkbox-group-h *.sc-nano-checkbox-group{box-sizing:inherit}.types-tag.sc-nano-checkbox-group-h,.types-segment.sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:8px;--control-margin-bottom:6px;--control-margin-start:0}.types-checkbox.sc-nano-checkbox-group-h,.types-radio.sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:10px;--control-margin-bottom:6px;--control-margin-start:0}.nanogroupcb.sc-nano-checkbox-group{border:none;margin:0;padding:0}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group,.nanogroupcb__more.sc-nano-checkbox-group{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nanogroupcb__legend.sc-nano-checkbox-group{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1.5;white-space:normal;display:block;inline-size:100%}[invalid].sc-nano-checkbox-group-h:not([invalid=false]) .nanogroupcb__legend.sc-nano-checkbox-group{color:var(--label-color--invalid)}.nanogroupcb__legend.visually-hide.sc-nano-checkbox-group{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanogroupcb__more.sc-nano-checkbox-group{block-size:1em;margin-block:calc(var(--label-padding) - var(--control-margin-bottom)) var(--label-padding);margin-inline:3px 0;position:relative}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;transition:0.3s ease-out opacity}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group,.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:1}.nanogroupcb__error.sc-nano-checkbox-group{color:var(--invalid-msg-color);opacity:0}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group{opacity:1}.nanogroupcb__help.sc-nano-checkbox-group{font-style:italic;opacity:1;color:var(--help-msg-color)}.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:0}.nanogroupcb__cbs.sc-nano-checkbox-group{margin:0;padding:0;line-height:1;display:flex;flex-wrap:wrap}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]),.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]){--check-base-size:1.2em;font-size:0.85em}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-inline:var(--control-margin-start) var(--control-margin-end);margin-block:var(--control-margin-top) var(--control-margin-bottom)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-inline:var(--control-margin-start) var(--control-margin-end)}}";
-const NanoCheckboxGroupStyle0 = checkboxGroupCss;
+const checkboxGroupCss = ".sc-nano-checkbox-group-h,*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-checkbox-group-h,*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-checkbox-group-h,*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-checkbox-group-h,*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-checkbox-group-h{--label-color:var(--nano-color-base-1000);--label-font-size:var(--nano-font-size-xs);--invalid-msg-color:var(--nano-color-danger-1100);--help-msg-color:var(--nano-color-base-1000);--more-font-size:var(--nano-font-size-2xs);display:block;inline-size:100%}.sc-nano-checkbox-group-h *.sc-nano-checkbox-group{box-sizing:inherit}.cbgroup.sc-nano-checkbox-group{margin:0;padding:0;border:0}.cbgroup__error.sc-nano-checkbox-group,.cbgroup__help.sc-nano-checkbox-group,.cbgroup__more.sc-nano-checkbox-group{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.cbgroup__error.sc-nano-checkbox-group,.cbgroup__help.sc-nano-checkbox-group{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--more-font-size);line-height:1.2;transition:0.3s ease-out opacity;font-style:italic}.show-error.sc-nano-checkbox-group .cbgroup__error.sc-nano-checkbox-group,.show-error.sc-nano-checkbox-group .cbgroup__help.sc-nano-checkbox-group{opacity:1}.cbgroup__error.sc-nano-checkbox-group{color:var(--invalid-msg-color);opacity:0}.has-error.sc-nano-checkbox-group .cbgroup__error.sc-nano-checkbox-group{opacity:1}.cbgroup__help.sc-nano-checkbox-group{opacity:1;color:var(--help-msg-color)}.has-error.sc-nano-checkbox-group .cbgroup__help.sc-nano-checkbox-group{opacity:0}.cbgroup__more.sc-nano-checkbox-group{block-size:1em;margin-block:var(--nano-spacing-sm) 0;position:relative;opacity:0;display:none;transition:all var(--nano-transition-fast) ease;transition-behavior:allow-discrete}.has-helper.sc-nano-checkbox-group .cbgroup__more.sc-nano-checkbox-group,.has-error.sc-nano-checkbox-group .cbgroup__more.sc-nano-checkbox-group{display:block;opacity:1}.cbgroup__legend.sc-nano-checkbox-group{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);padding:0 0 0.9375rem;margin:0;display:block;inline-size:100%}.cbgroup__legend.visually-hide.sc-nano-checkbox-group{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.cbgroup__cbs.sc-nano-checkbox-group{margin:0;padding:0;display:flex;flex-direction:column;gap:var(--nano-spacing-md)}.types-segment.sc-nano-checkbox-group-h .cbgroup__cbs.sc-nano-checkbox-group{flex-direction:row;gap:0}.types-tag.sc-nano-checkbox-group-h .cbgroup__cbs.sc-nano-checkbox-group{flex-direction:row;gap:var(--nano-spacing-sm)}";
 
 const CheckboxGroup = class {
     constructor(hostRef) {
@@ -53,10 +50,19 @@ const CheckboxGroup = class {
      * Disable all the nested form controls
      */
     disabled = null;
+    _legend = '';
     /**
-     * A common label for children controls
+     * A collective label for children controls
      */
-    legend = '';
+    get legend() {
+        if (!this._legend.endsWith('*') && this.nativeCbs?.find((cb) => !!cb.required)) {
+            return this._legend + ' *';
+        }
+        return this._legend;
+    }
+    set legend(value) {
+        this._legend = value;
+    }
     /**
      * Visually hide the legend but still available to screen readers.
      */
@@ -125,8 +131,7 @@ const CheckboxGroup = class {
             return;
         this.errorMessage = message;
         await cb.setError(message);
-        if (this.showInlineError)
-            this.showInlineValidation();
+        this.showInlineValidation();
     }
     // Events
     /**
@@ -154,7 +159,7 @@ const CheckboxGroup = class {
         if (this.invalid) {
             this.showErrorMsg = this._invalid = false;
         }
-        this.showErrorMsg = this._invalid = this.customValidate();
+        this.customValidate();
         if (this.validateOn !== 'dirty')
             return;
         this.showInlineValidation();
@@ -164,18 +169,25 @@ const CheckboxGroup = class {
             !this.nativeCbs.length ||
             !this.checkboxes)
             return;
+        // reset errors
+        this.checkboxes.forEach((cb, i) => {
+            const nativeCb = this.nativeCbs[i];
+            cb.setError('');
+            nativeCb.setCustomValidity('');
+        });
         const onlyRadios = this.nativeCbs.filter((cb) => cb?.type === 'radio');
-        if (onlyRadios &&
-            onlyRadios.length &&
-            (this.showErrorMsg || this.validateOn === 'dirty')) {
+        if (onlyRadios && onlyRadios.length) {
+            // we only care about radio controls.
             const required = onlyRadios.find((cb) => cb.required);
-            const checked = onlyRadios.filter((cb) => cb.checked);
+            const checked = onlyRadios.find((cb) => cb.checked);
             if (required && checked) {
-                this.checkboxes.forEach((rd) => rd.reportValidity(false));
                 return false;
             }
-            else if (required && !checked)
+            else if (required && !checked) {
+                // we have a required radio that is not checked
+                // so we have a native validation error
                 return true;
+            }
         }
         // we only care about checkbox controls.
         const onlyCbs = this.nativeCbs.filter((cb) => cb?.type === 'checkbox');
@@ -184,26 +196,30 @@ const CheckboxGroup = class {
         const checked = onlyCbs.filter((cb) => cb.checked);
         const required = onlyCbs.find((cb) => cb.required);
         let invalid = false;
-        if (required && !checked.find((cb) => cb === required))
+        if (required && !checked.find((cb) => cb === required)) {
+            // we have a required checkbox that is not checked
+            // so we have a native validation error
             return true;
+        }
         this.checkboxes.forEach((cb, i) => {
             const nativeCb = this.nativeCbs[i];
-            cb.setError('');
-            nativeCb.setCustomValidity('');
+            // cb.setError('');
+            // nativeCb.setCustomValidity('');
+            let errorMsg = '';
             if (this.min && checked.length < this.min) {
-                this.errorMessage = `You must select a minimum of ${this.min} values.`;
+                errorMsg = `You must select a minimum of ${this.min} values.`;
                 invalid = true;
             }
             if (this.max && checked.length > this.max) {
-                this.errorMessage = `Only up to ${this.max} values are allowed.`;
+                errorMsg = `Only up to ${this.max} values are allowed.`;
                 invalid = true;
             }
             if (invalid) {
-                cb.setError(this.errorMessage, this.showErrorMsg);
+                cb.setError(errorMsg, this.showErrorMsg);
                 // bit fugly. We're just doing this 'cos stencil
                 // methods are async and we want the validity message
                 // asap to keep things in sync
-                nativeCb.setCustomValidity(this.errorMessage);
+                nativeCb.setCustomValidity(errorMsg);
             }
         });
         return invalid;
@@ -234,14 +250,19 @@ const CheckboxGroup = class {
     }
     setCbValue() {
         this.checkboxes?.forEach((cb) => {
-            if (cb.value === this.value ||
-                (Array.isArray(this.value) && this.value.includes(cb.value))) {
+            let value = this.value;
+            if (typeof this.value === 'string' && this.value.includes(',')) {
+                value = this.value.split(',');
+            }
+            if (cb.value === value ||
+                cb.value === this.value ||
+                (Array.isArray(value) && value.includes(cb.value))) {
                 cb.checked = true;
             }
         });
     }
     attachSlotObserver() {
-        if (!!this.mo || !window['MutationObserver'])
+        if (!!this.mo || index.Build.isServer)
             return;
         const mo = (this.mo = new MutationObserver(() => this.handleSlotChange()));
         mo.observe(this.host, { childList: true });
@@ -258,26 +279,36 @@ const CheckboxGroup = class {
                 cb.addEventListener('invalid', this.handleInvalid);
         });
     }
+    // handle native `invalid` events from native inputs
     handleInvalid = (ev) => {
         this._invalid = true;
-        if (this.validateOn === 'submit') {
-            this._invalid = this.showErrorMsg = this.customValidate();
-        }
-        if (this.showInlineError)
+        // prevent default to suppress native error message
+        if (this.showInlineError) {
             ev.preventDefault();
+        }
+        if (this.validateOn === 'submit')
+            this.customValidate();
         this.showInlineValidation(ev);
     };
     showInlineValidation = (ev) => {
-        if (!this.nativeCbs || !this.nativeCbs.length)
+        if (!this.nativeCbs || !this.nativeCbs.length || !this.showInlineError)
             return;
         if (this.validateOn === 'submitThenDirty')
             this.validateOn = 'dirty';
         this.showErrorMsg = false;
         this._invalid = false;
-        this.nativeCbs.forEach((cb, _i) => {
-            if (!cb.validity.valid) {
-                this.errorMessage = cb.validationMessage;
-                this.showErrorMsg = true;
+        this.errorMessage = '';
+        // find any native error messages set against native controls
+        // (`customValidate` sets custom validity messages on these controls too)
+        this.checkboxes.forEach((cb, i) => {
+            const nativeCb = this.nativeCbs[i];
+            if (!nativeCb.validity.valid) {
+                if (nativeCb.validationMessage) {
+                    this.errorMessage = nativeCb.validationMessage;
+                    this.showErrorMsg = true;
+                    // set the visual validity state on the individual control
+                    cb.reportValidity(false);
+                }
                 this._invalid = true;
             }
         });
@@ -291,8 +322,7 @@ const CheckboxGroup = class {
     componentWillLoad() {
         this.handleValueChange = this.handleValueChange.bind(this);
         this.handleValueChange = throttle.debounce(this.handleValueChange, 1);
-        this.showInlineValidation = throttle.debounce(this.showInlineValidation, 50);
-        this.customValidate = this.customValidate.bind(this);
+        this.showInlineValidation = throttle.debounce(this.showInlineValidation, 10);
         this.handleDisabledChange();
         this.handleSlotChange();
         this.setCbValue();
@@ -314,10 +344,14 @@ const CheckboxGroup = class {
     render() {
         const legendId = this.grpId + '-lbl';
         const moreId = this.showInlineError || this.hasHelperSlot ? this.grpId + '-more' : '';
-        return (renderer.h(index.Host, { key: '93c54171d768c6ef41eeb1d7e24b8d80c83af780', class: this.checkboxTypes }, renderer.h("fieldset", { key: '24457a9b9d1d5993eb2a6c78f2d39e057be99a2f', disabled: this.disabled, class: { nanogroupcb: true, 'show-error': this.showErrorMsg } }, renderer.h("legend", { key: '1e443d6d7970c8c3c8e03dbdc470d8cbf8ab60d2', id: legendId, class: {
-                nanogroupcb__legend: true,
+        return (renderer.h(index.Host, { key: 'b6d81d374260c8cb97dfc1557238c20945b44632', class: this.checkboxTypes }, renderer.h("fieldset", { key: 'fa058ccca23a91b369c659ff442585de43a4333d', disabled: this.disabled, class: {
+                cbgroup: true,
+                'has-error': this.showErrorMsg && !!this.errorMessage,
+                'has-helper': this.hasHelperSlot,
+            } }, renderer.h("legend", { key: '429737fad96eef6af343c5e978a4642a599ea4a6', id: legendId, class: {
+                cbgroup__legend: true,
                 'visually-hide': this.hideLegend,
-            } }, renderer.h("slot", { key: 'fc853be6da9fe11a8f2e82f5d3c458587227a8be', name: "legend" }, this.legend)), renderer.h("div", { key: 'f5f0ffae9ae4987cfdb3bad2ccf92c3334d08895', class: "nanogroupcb__cbs", role: "group", "aria-labelledby": legendId + ' ' + moreId }, renderer.h("slot", { key: '559dba12b4fe7ec3b791986487a3c3615c6a3a11' })), (this.showInlineError || this.hasHelperSlot) && (renderer.h("div", { key: 'a1e9ce7fc24ec31ea12211073700670f08eb9f04', class: "nanogroupcb__more", id: moreId }, this.showInlineError ? (renderer.h("div", { class: "nanogroupcb__error" }, this.errorMessage)) : (''), renderer.h("div", { key: 'bb8bddba4822fe404c336b4c742c2865ff58c9d1', class: "nanogroupcb__help" }, renderer.h("slot", { key: '22e8b1b90d45bf6883a291239d01b8dc90c9b4d9', name: "helper" })))))));
+            } }, renderer.h("slot", { key: 'd592da5791f7e830c57aec7c62c01b32326b5a34', name: "legend" }, this.legend)), renderer.h("div", { key: '0bb0a2206a13bb9f773857b4ac897bfffb75a741', class: "cbgroup__cbs", role: "group", "aria-labelledby": legendId + ' ' + moreId }, renderer.h("slot", { key: '23f668b5fa4a1d23f39ea49998ae75767df15624' })), (this.showInlineError || this.hasHelperSlot) && (renderer.h("div", { key: '1e15d0bb57352fb8cd7a3a746dd5adb8bb979819', class: "cbgroup__more", id: moreId }, this.showInlineError ? (renderer.h("div", { class: "cbgroup__error" }, this.errorMessage)) : (''), renderer.h("div", { key: 'e23596644945fafd2802bf1ac8958a314a076bc8', class: "cbgroup__help" }, renderer.h("slot", { key: 'd6df38d9ceaa915364a20dc29d8a1457b071c6ef', name: "helper" })))))));
     }
     static get watchers() { return {
         "value": ["handleValuePropChange"],
@@ -329,8 +363,6 @@ const CheckboxGroup = class {
     }; }
 };
 let grpIds = 0;
-CheckboxGroup.style = NanoCheckboxGroupStyle0;
+CheckboxGroup.style = checkboxGroupCss;
 
 exports.nano_checkbox_group = CheckboxGroup;
-
-//# sourceMappingURL=nano-checkbox-group.cjs.entry.js.map

package/dist/cjs/nano-checkbox.cjs.entry.js

@@ -1,17 +1,12 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DYD4xvxr.js');
+var renderer = require('./renderer-SkVn69pT.js');
 
-const index = require('./index-615cdb64.js');
-const focusVisible = require('./focus-visible-39b54d1f.js');
-const theme = require('./theme-a2f7ddf8.js');
-const renderer = require('./renderer-cd8b6098.js');
-
-const checkboxCss = ".sc-nano-checkbox-h{box-sizing:border-box}*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{box-sizing:border-box}[hidden].sc-nano-checkbox{display:none !important}.sc-nano-checkbox-h{box-sizing:border-box}*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{box-sizing:border-box}[hidden].sc-nano-checkbox{display:none !important}.sc-nano-checkbox-h{--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--invalid-shadow:0 0 0 0.1875rem  #ef4135;--padding:initial;--check-bg-color:#fff;--check-border-color:#b5aea7;--check-border-size:1px;--check-border-style:var(--check-border-size) solid var(--check-border-color);--check-checked-bg-color:#455556;--check-checked-border-color:#455556;--check-checked-higlight-color:#fff;--check-base-size:inherit;--label-spacing:10px 0;--tagbox-rgb:144 198 231;--tagbox-border-color:rgb(var(--tagbox-rgb) / 50%);--tagbox-bg-color:rgb(var(--tagbox-rgb) / 20%);--tagbox-border-radius:0;--segment-color:#007495;--segment-border-radius:3px;--segment-shadow:0 1px 4px rgb(0 0 0 / 20%);--cb-border-radius:2px;--radio-border-radius:50%;--switch-inactive-color:rgb(181 174 167 / 70%);--switch-active-color:#007495;display:inline-block;max-inline-size:100%}.sc-nano-checkbox-h *.sc-nano-checkbox{box-sizing:inherit}[type=tag].sc-nano-checkbox-h{text-transform:uppercase;--control-padding:0.2rem 1rem}[type=radio][checked].sc-nano-checkbox-h:not([checked=false]){--check-border-size:0.3125em}[type=segment].sc-nano-checkbox-h{--check-border-style:none;--control-padding:0.7em 1em 0.7em 1em}[type=segment-pill].sc-nano-checkbox-h{--check-border-color:rgba(181, 174, 167, 0.5);--segment-border-radius:5px;--control-padding:0.7em 1em 0.7em 1em}.nano-color.sc-nano-checkbox-h{--tagbox-rgb:var(--nano-color-base-rgb);--focus-shadow:0 0 0 0.1875rem var(--nano-color-shade)}[checked].sc-nano-checkbox-h:not([checked=false]){--tagbox-border-color:rgb(var(--tagbox-rgb) / 80%);--tagbox-bg-color:rgb(var(--tagbox-rgb) / 50%)}[has-focus].sc-nano-checkbox-h:not([has-focus=false]){--cb-border-radius:5px}[disabled].sc-nano-checkbox-h:not([disabled=false]){opacity:0.7;--tagbox-rgb:104 117 118;--check-bg-color:rgba(104, 117, 118, 0.5);--check-checked-bg-color:rgba(104, 117, 118, 0.5);--segment-color:#455556}.nanocb.sc-nano-checkbox{padding:var(--padding);cursor:pointer;display:flex;align-items:center;line-height:1.2;position:relative}.nanocb__input.sc-nano-checkbox{border-radius:var(--cb-border-radius, 3px);font-size:var(--check-base-size);position:relative;block-size:1.5em;inline-size:1.5em;min-inline-size:1.5em;border:var(--check-border-style);box-shadow:0 1px 4px rgba(0, 0, 0, 0.2)}.nanocb__input.sc-nano-checkbox::before{border-radius:var(--cb-border-radius);position:absolute;content:\"\";inset-inline-start:calc(0.725em - var(--check-border-size));inset-block-start:calc(0.725em - var(--check-border-size));inline-size:0;block-size:0;border:2px solid var(--check-checked-higlight-color);transform:scale(0)}.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox{background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox::after{border-radius:var(--cb-border-radius);position:absolute;content:\"\";inset-inline-start:calc(0.825em - var(--check-border-size));inset-block-start:calc(0.825em - var(--check-border-size));block-size:0;inline-size:0;border:solid var(--check-checked-higlight-color);border-width:0 0.1875em 0.1875em 0;transform:rotate(0deg) scale(0);opacity:1;transition:all 0.15s ease-out}.nanocb--indeterminate.sc-nano-checkbox .nanocb__input--checkbox.sc-nano-checkbox::after{border-width:0 0 0.1875em}.nanocb__input--switch.sc-nano-checkbox{border-radius:1em !important;inline-size:2.4em;block-size:1.3em;background:var(--switch-inactive-color)}[type=switch].sc-nano-checkbox-h:not([disabled]) .nanocb__input--switch.sc-nano-checkbox:hover::after{scale:1.1 1}.nanocb__input--switch.sc-nano-checkbox::after{position:relative;content:\"\";display:block;border-radius:inherit;block-size:80%;inline-size:40%;background:var(--check-checked-higlight-color);transform-origin:left;inset-inline-start:6%;inset-block-start:10%;transition:0.1s ease scale, 0.15s ease left}.nanocb__input--segment.sc-nano-checkbox,.nanocb__input--segment-pill.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb__input--segment.sc-nano-checkbox::before,.nanocb__input--segment-pill.sc-nano-checkbox::before{display:none}.nanocb__input--tag.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb__input--tag.sc-nano-checkbox::before{display:none}.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input.sc-nano-checkbox{box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--invalid-shadow)}.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{box-shadow:var(--invalid-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:focus~.nanocb__input.sc-nano-checkbox{box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow)}.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{box-shadow:var(--focus-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox{border-radius:var(--cb-border-radius);background-color:var(--check-checked-bg-color);transform:rotate(0deg) scale(1);opacity:1;border-color:var(--check-checked-border-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{color:var(--check-checked-higlight-color);background-color:var(--check-checked-bg-color);box-shadow:inset 0 3px 4px rgba(0, 0, 0, 0.2)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);background-color:var(--check-checked-higlight-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox::after{border:solid var(--check-checked-border-color);border-width:0 0.125em 0.125em 0;opacity:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox::before{border-radius:var(--radio-border-radius)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--checkbox.sc-nano-checkbox::after{transform:rotate(45deg) scale(1);opacity:1;inset-inline-start:calc(0.575em - var(--check-border-size));inset-block-start:calc(0.2875em - var(--check-border-size));inline-size:0.375em;block-size:0.75em;border-radius:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox::after{transform:rotate(45deg)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--switch.sc-nano-checkbox{background:var(--switch-active-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--switch.sc-nano-checkbox::after{inset-inline-start:56%;transform-origin:right}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox{border-radius:var(--input-border-radius, 5px);background-color:var(--check-checked-bg-color);transform:rotate(0deg) scale(1);opacity:1;border:0.125em solid var(--check-checked-bg-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox::after{transform:scale(1);opacity:1;inset-inline-start:0.3125em;inset-block-start:0;inline-size:0.7em;block-size:0.7em;border-radius:0}.nanocb__label.sc-nano-checkbox{padding-inline:var(--label-spacing);padding-block:0;display:flex;align-items:center;line-height:1;flex:1;justify-content:space-between}.nanocb__label--segment.sc-nano-checkbox,.nanocb__label--segment-pill.sc-nano-checkbox{border:var(--check-border-style);border-radius:var(--segment-border-radius);box-shadow:var(--segment-shadow);display:inline-flex;padding:var(--control-padding);background:var(--check-bg-color);color:var(--segment-color);align-items:center;inline-size:100%}.sc-nano-checkbox-h:first-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-start-start-radius:var(--segment-border-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--segment-border-radius);border-inline-end:none}.sc-nano-checkbox-h:not(:last-of-type):not(:first-of-type) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0;border-inline-end:none}.sc-nano-checkbox-h:last-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-start-start-radius:0;border-start-end-radius:var(--segment-border-radius);border-end-end-radius:var(--segment-border-radius);border-end-start-radius:0}.sc-nano-checkbox-h:first-of-type:last-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:var(--segment-border-radius);border:var(--check-border-style)}.nanocb__label--tag.sc-nano-checkbox{letter-spacing:2px;font-weight:400;font-size:0.65em;line-height:1.4;padding:var(--control-padding);border:2px solid #b5aea7;border-color:var(--tagbox-border-color);background-color:var(--tagbox-bg-color);transition:all 0.2s;border-radius:var(--cb-border-radius);inline-size:100%}.nanocb__label--tag.sc-nano-checkbox::after{content:\"+\";margin-inline:0.3125em 0;margin-block:0;font-weight:200;position:relative;font-family:inherit;font-size:1.8em;display:inline-block;transform:rotate(0deg);transform-origin:center}.nanocb__label--tag.sc-nano-checkbox span.sc-nano-checkbox{display:block}";
-const NanoCheckboxStyle0 = checkboxCss;
+const checkboxCss = ".sc-nano-checkbox-h,*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{box-sizing:border-box}[hidden].sc-nano-checkbox{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-checkbox-h,*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-checkbox-h,*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{box-sizing:border-box}[hidden].sc-nano-checkbox{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-checkbox-h,*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-checkbox-h{--border-color:var(--nano-color-primary-1000);--label-color:var(--nano-color-base-1000);--spacing:var(--nano-spacing-sm);--active-background:var(--nano-color-primary-1000);--active-foreground:var(--nano-color-basic-white);--error-color:var(--nano-color-danger-1100);--disabled-label-color:var(--nano-color-neutral-1000);--disabled-background:var(--nano-color-neutral-300);--disabled-foreground:var(--nano-color-neutral-700);--disabled-border-color:var(--nano-color-neutral-1000);display:inline-block;max-inline-size:100%}.nanocb.sc-nano-checkbox{cursor:pointer;display:flex;align-items:center;line-height:1.2;position:relative;font-size:1rem}.nanocb.sc-nano-checkbox input.sc-nano-checkbox{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:focus-visible~.nanocb__input.sc-nano-checkbox{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input.sc-nano-checkbox{background-color:var(--active-background)}.nanocb.nanocb--disabled.sc-nano-checkbox{cursor:not-allowed}.sc-nano-checkbox-h:not([hide-label]) .nanocb.sc-nano-checkbox{gap:var(--spacing)}.sc-nano-checkbox-h:not([type=tag]) .nanocb__label--hidden.sc-nano-checkbox,.sc-nano-checkbox-h:not([type=segment]) .nanocb__label--hidden.sc-nano-checkbox{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.nanocb__radio.sc-nano-checkbox .nanocb__input.sc-nano-checkbox,.nanocb__checkbox.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{display:grid;place-content:center center;block-size:1.125em;inline-size:1.125em;border-radius:1px;border:1px solid var(--border-color)}.nanocb__radio.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after,.nanocb__checkbox.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{content:\"\";grid-column:1;grid-row:1;border:solid var(--active-foreground);border-width:0 0.125em 0.125em 0;opacity:1;transition:scale var(--nano-transition-x-fast) ease-out;transform-origin:center;rotate:45deg;scale:0;inline-size:0.325em;block-size:0.5625em;margin-block-start:-0.1875em}.nanocb--indeterminate.sc-nano-checkbox .nanocb__radio.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after,.nanocb--indeterminate.sc-nano-checkbox .nanocb__checkbox.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{border-width:0 0 0.1875em}.nanocb__radio.sc-nano-checkbox .nanocb__label.sc-nano-checkbox,.nanocb__checkbox.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);color:var(--label-color)}.nanocb__radio.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox::after,.nanocb__checkbox.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox::after{scale:1}.nanocb__radio.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input.sc-nano-checkbox::after,.nanocb__checkbox.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input.sc-nano-checkbox::after{scale:1;rotate:0deg;block-size:1px;inline-size:0.625em;border-width:0 0 0.125em;margin-block-start:0}.nanocb__radio.nanocb--invalid.sc-nano-checkbox .nanocb__input.sc-nano-checkbox,.nanocb__checkbox.nanocb--invalid.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{outline:1px solid var(--error-color);outline-offset:1px}.nanocb__radio.nanocb--disabled.sc-nano-checkbox .nanocb__input.sc-nano-checkbox,.nanocb__checkbox.nanocb--disabled.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{border:1px solid var(--disabled-border-color);background:var(--disabled-background)}.nanocb__radio.nanocb--disabled.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after,.nanocb__checkbox.nanocb--disabled.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{display:none}.nanocb__radio.nanocb--disabled.sc-nano-checkbox .nanocb__label.sc-nano-checkbox,.nanocb__checkbox.nanocb--disabled.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{color:var(--disabled-label-color)}.nanocb__radio.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{border-radius:50%}.nanocb__radio.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{border-radius:50%;background:var(--active-foreground);border:none;margin:0 !important}.nanocb__radio.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox::after{scale:1;opacity:1;block-size:0.5em;inline-size:0.5em}.nanocb__radio.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input.sc-nano-checkbox{background-color:transparent}.nanocb__radio.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input.sc-nano-checkbox::after{display:none}.nanocb__switch.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{inline-size:2.1875em;block-size:1.125em;border:1px solid var(--border-color)}.nanocb__switch.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{content:\"\";position:relative;display:block;border-radius:inherit;block-size:0.75em;inline-size:0.75em;background-color:var(--active-background);transform-origin:left;inset-inline-start:0.125em;inset-block-start:50%;transform:translateY(-50%);transition:0.1s ease scale, 0.1s ease background-color, 0.15s ease left}.nanocb__switch.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox::after{inset-inline-start:1.1875em;transform-origin:right;background-color:var(--active-foreground)}.nanocb__switch.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);color:var(--label-color)}.nanocb__switch.nanocb--invalid.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{outline:1px solid var(--error-color);outline-offset:1px}.nanocb__switch.nanocb--disabled.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{border:1px solid var(--disabled-background);background:var(--disabled-background)}.nanocb__switch.nanocb--disabled.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{background:var(--disabled-foreground)}.nanocb__switch.nanocb--disabled.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{color:var(--disabled-label-color)}[type=segment].sc-nano-checkbox-h{display:inline-block}.nanocb__segment.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{display:none}.nanocb__segment.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);color:var(--label-color);padding:0.4375em 0.9375em;border:1px solid var(--active-background)}.sc-nano-checkbox-h:first-of-type .nanocb__segment.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{border-inline-end:1px solid var(--nano-color-neutral-300)}.sc-nano-checkbox-h:not(:last-of-type .nanocb__segment.sc-nano-checkbox .nanocb__label.sc-nano-checkbox,.sc-nano-checkbox-h:first-of-type) .nanocb__segment.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{border-inline-start:none;border-inline-end:1px solid var(--nano-color-neutral-300)}.sc-nano-checkbox-h:last-of-type .nanocb__segment.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{border-inline-start:none;border-inline-end:1px solid var(--active-background) !important}.sc-nano-checkbox-h:first-of-type:last-of-type .nanocb__segment.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{border:1px solid var(--active-background)}.nanocb__segment.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__label.sc-nano-checkbox{color:var(--active-foreground);background-color:var(--active-background);box-shadow:2px 2px 3px 0 rgba(0, 0, 0, 0.2) inset}.nanocb__segment.sc-nano-checkbox input.sc-nano-checkbox:focus-visible:focus~.nanocb__label.sc-nano-checkbox{outline:var(--nano-focus-ring);outline-offset:1px;z-index:1}.nanocb__segment.nanocb--invalid.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{outline:1px solid var(--error-color);outline-offset:1px}.nanocb__segment.nanocb--disabled.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{background-color:var(--disabled-background);color:var(--disabled-label-color)}[type=tag].sc-nano-checkbox-h{display:inline-block}.nanocb__tag.sc-nano-checkbox{display:inline-flex;align-items:center;gap:6px;padding:8px;border:1px solid var(--active-background);color:var(--nano-color-primary-1100);font-size:var(--nano-font-size-2xs);font-weight:bold;transition:background-color var(--nano-transition-x-fast) ease-out}.nanocb__tag.sc-nano-checkbox:hover{background-color:var(--nano-color-primary-100)}.nanocb__tag.sc-nano-checkbox:has(input:checked){background-color:var(--nano-color-primary-300)}.nanocb__tag.sc-nano-checkbox:has(input:focus-visible:focus){outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset);z-index:1}.nanocb__tag.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{order:0;-webkit-user-select:none;user-select:none}.nanocb__tag.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{order:1;display:grid;place-content:center center;block-size:1.125em;inline-size:1.125em;border-radius:1px;border:1px solid var(--border-color);outline:none !important}.nanocb__tag.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{content:\"\";grid-column:1;grid-row:1;block-size:0;inline-size:0;border:solid var(--active-foreground);border-width:0 0.125em 0.125em 0;opacity:1;transition:scale var(--nano-transition-x-fast) ease-out;transform-origin:center;rotate:45deg;scale:0}.nanocb--indeterminate.sc-nano-checkbox .nanocb__tag.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{border-width:0 0 0.1875em}.nanocb__tag.nanocb--invalid.sc-nano-checkbox{outline:1px solid var(--error-color);outline-offset:1px}.nanocb__tag.nanocb--disabled.sc-nano-checkbox{background:var(--disabled-background);border:1px solid var(--disabled-border-color)}.nanocb__tag.nanocb--disabled.sc-nano-checkbox .nanocb__input.sc-nano-checkbox{border:1px solid var(--disabled-border-color);background:var(--disabled-background)}.nanocb__tag.nanocb--disabled.sc-nano-checkbox .nanocb__input.sc-nano-checkbox::after{display:none}.nanocb__tag.nanocb--disabled.sc-nano-checkbox .nanocb__label.sc-nano-checkbox{color:var(--disabled-label-color)}.nanocb__tag.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox::after{scale:1;inline-size:0.325em;block-size:0.5625em;margin-block-start:-0.1875em}";
 
 let checkboxIds = 0;
 const Checkbox = class {
@@ -23,8 +18,17 @@ const Checkbox = class {
     }
     inputId = `nano-cb-${checkboxIds++}`;
     input;
+    _slotWrapper;
+    get slotWrapper() {
+        return this._slotWrapper;
+    }
+    set slotWrapper(value) {
+        this._slotWrapper = value;
+        this.hasLabel = !!value.querySelectorAll('*').length || !!this.label;
+    }
     get host() { return index.getElement(this); }
     inputType = 'checkbox';
+    hasLabel = false;
     /** @internal */
     hasFocus = false;
     /**
@@ -86,6 +90,10 @@ const Checkbox = class {
      * label property that can be used to set the label text. Alternatively you may use a label slot.
      */
     label;
+    /**
+     * Visually hide the label - but make it accessible.
+     */
+    hideLabel = false;
     /**
      * If `true`, the checkbox will visually appear as indeterminate (only relevant for type="checkbox")
      */
@@ -110,10 +118,6 @@ const Checkbox = class {
             return '';
         return this.input.validationMessage;
     }
-    /**
-     * Color to use from your application's color palette.
-     */
-    color;
     /**
      * The form element to associate the input with (its form owner). Must be the id of a form.
      */
@@ -170,7 +174,6 @@ const Checkbox = class {
     async setFocus() {
         if (this.input) {
             this.input.focus();
-            focusVisible.focusVisible.force(this.input);
         }
     }
     /**
@@ -179,9 +182,16 @@ const Checkbox = class {
     async removeFocus() {
         if (this.input) {
             this.input.blur();
-            focusVisible.focusVisible.force(this.input, false);
         }
     }
+    onHostClick(e) {
+        // only click events coming from the host itself should toggle the checkbox
+        // (ignore ones coming from the native input or label as this will cause a double toggle)
+        if (this.host !== e.target && this.host.contains(e.target)) {
+            return;
+        }
+        this.checked = !this.checked;
+    }
     onReset(e) {
         const form = this.form
             ? document.querySelector('#' + this.form)
@@ -214,25 +224,27 @@ const Checkbox = class {
     // Stencil hooks
     componentWillLoad() {
         this.typeChange();
+        this.hasLabel = !!this.host.querySelectorAll('*').length || !!this.label;
     }
     componentDidLoad() {
         this.input.indeterminate = this.indeterminate;
         this.isRadioChecked();
-        focusVisible.focusVisible.observe(this.input);
-    }
-    disconnectedCallback() {
-        focusVisible.focusVisible.unobserve(this.input);
     }
     render() {
         const labelId = this.inputId + '-lbl';
-        return (renderer.h(index.Host, { key: '92eaee0287da5164176c1893add5d48ff518153a', class: { ...theme.createColorClasses(this.color), 'nano-checkbox': true } }, renderer.h("label", { key: '5082a3b8114162d5b52e9f24abe031f8796665e2', class: {
+        return (renderer.h(index.Host, { key: 'ca41f256a304b8ec19dba81fbe0dcd30eefd63fe' }, renderer.h("label", { key: '31254b867b036d7703939e7b19f4f483f00af844', class: {
                 nanocb: true,
                 'nanocb--checked': this.checked,
                 'nanocb--invalid': this.invalid,
                 'nanocb--disabled': this.disabled,
                 'nanocb--focused': this.hasFocus,
                 'nanocb--indeterminate': this.indeterminate,
-            }, htmlFor: this.inputId }, renderer.h("input", { key: '2b91ea2ac18ac260710202040db3f7a4574a1922', type: this.inputType, name: this.name, form: this.form, required: this.required, checked: this.checked, disabled: this.disabled, value: this.value, "aria-labelledby": labelId, onBlur: this.handleBlur, onFocus: this.handleFocus, onChange: this.handleChange, ref: (input) => (this.input = input), id: this.inputId, onInvalid: this.handleInvalid }), renderer.h("span", { key: '0594a16034577181d4f3b1801b08d1761bd4cfe8', class: 'nanocb__input nanocb__input--' + this.type }), renderer.h("div", { key: '051e89cbd5aeabad7f6e70369a3f9316f86eb8f8', id: labelId, class: 'nanocb__label nanocb__label--' + this.type }, this.label && !!this.label.length && renderer.h("span", { key: 'ddb4067806f185c0d564a0a54c7642a57313e482' }, this.label), renderer.h("span", { key: '745cbff6863337008827893a7b451c4a31fb1e91', hidden: this.label && !!this.label.length }, renderer.h("slot", { key: '023db905814a76b115e2779d717932125c0bff4a' }))))));
+                ['nanocb__' + this.type]: true,
+            }, htmlFor: this.inputId }, renderer.h("input", { key: 'd46202d25ee15a0274766d845510608ed5af88f4', type: this.inputType, name: this.name, form: this.form, required: this.required, checked: this.checked, disabled: this.disabled, value: this.value, "aria-labelledby": this.hasLabel ? labelId : undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onChange: this.handleChange, ref: (input) => (this.input = input), id: this.inputId, onInvalid: this.handleInvalid }), renderer.h("span", { key: '0f3c9134ab08ce653a58d71d681495349536e211', class: 'nanocb__input' }), this.hasLabel && (renderer.h("div", { key: 'e4315662f387dc17f3406f22931535061756cca6', id: labelId, class: {
+                nanocb__label: true,
+                [`nanocb__label--${this.type}`]: true,
+                'nanocb__label--hidden': this.hideLabel,
+            } }, this.label && !!this.label.length && renderer.h("span", { key: '05716b3189e0a489c530c2539944eaaae74e0e08' }, this.label), renderer.h("span", { key: '026a9bbb2f50332d184a29a03a58e6cb287d7f8c', hidden: this.label && !!this.label.length, ref: (s) => (this.slotWrapper = s) }, renderer.h("slot", { key: '62b0ab184d32167780d52aa90dddcdc25977548c' })))))));
     }
     static get watchers() { return {
         "checked": ["handleCheckedChange"],
@@ -240,8 +252,6 @@ const Checkbox = class {
         "indeterminate": ["handleIndeterminateChange"]
     }; }
 };
-Checkbox.style = NanoCheckboxStyle0;
+Checkbox.style = checkboxCss;
 
 exports.nano_checkbox = Checkbox;
-
-//# sourceMappingURL=nano-checkbox.cjs.entry.js.map