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

package/dist/collection/components/file-upload/file-upload.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { Host, } from "@stencil/core";
 import { h } from "../../utils/renderer";
@@ -393,7 +393,7 @@ export class FileUpload {
         ];
     };
     render() {
-        return (h(Host, { key: '1af0c1ae1d5c87a627b50cf9ab35599892043df2', class: "nano-file-upload" }, h("div", { key: '52db999aa429cd6a5976976b25c4861e6b9aee1d', class: {
+        return (h(Host, { key: '2bd95bf5d3c725d84679a373eac2f87b491ae2bd', class: "nano-file-upload" }, h("div", { key: '026b77c3165ea04d5ed9a2f8536fd5089ed3ee8e', class: {
                 'file-upload': true,
                 'file-upload--dragging': this.isDragging,
                 'file-upload--focus': this.hasFocus,
@@ -416,6 +416,7 @@ export class FileUpload {
         return {
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -430,11 +431,11 @@ export class FileUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "accept": {
                 "type": "string",
+                "attribute": "accept",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -449,11 +450,11 @@ export class FileUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accept",
                 "reflect": false
             },
             "capture": {
                 "type": "string",
+                "attribute": "capture",
                 "mutable": false,
                 "complexType": {
                     "original": "'user' | 'environment'",
@@ -468,11 +469,11 @@ export class FileUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "capture",
                 "reflect": false
             },
             "maxFileSize": {
                 "type": "number",
+                "attribute": "max-file-size",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -487,12 +488,12 @@ export class FileUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max-file-size",
                 "reflect": false,
                 "defaultValue": "1"
             },
             "maxFiles": {
                 "type": "number",
+                "attribute": "max-files",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -507,12 +508,12 @@ export class FileUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max-files",
                 "reflect": false,
                 "defaultValue": "1"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -527,11 +528,11 @@ export class FileUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -546,12 +547,12 @@ export class FileUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false,
                 "defaultValue": "'Choose a file...'"
             },
             "hideLabel": {
                 "type": "boolean",
+                "attribute": "hide-label",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -566,12 +567,12 @@ export class FileUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hide-label",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -586,12 +587,12 @@ export class FileUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -606,12 +607,12 @@ export class FileUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "clearInput": {
                 "type": "boolean",
+                "attribute": "clear-input",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -626,12 +627,12 @@ export class FileUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "clear-input",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "showInlineError": {
                 "type": "boolean",
+                "attribute": "show-inline-error",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -646,12 +647,12 @@ export class FileUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-inline-error",
                 "reflect": true,
                 "defaultValue": "true"
             },
             "validateOn": {
                 "type": "string",
+                "attribute": "validate-on",
                 "mutable": true,
                 "complexType": {
                     "original": "'dirty' | 'submit' | 'submitThenDirty'",
@@ -666,12 +667,12 @@ export class FileUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "validate-on",
                 "reflect": false,
                 "defaultValue": "'submit'"
             },
             "form": {
                 "type": "string",
+                "attribute": "form",
                 "mutable": false,
                 "complexType": {
                     "original": "string | null",
@@ -686,11 +687,11 @@ export class FileUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "form",
                 "reflect": false
             },
             "invalid": {
                 "type": "boolean",
+                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -708,12 +709,12 @@ export class FileUpload {
                 },
                 "getter": true,
                 "setter": false,
-                "attribute": "invalid",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "validityMessage": {
                 "type": "string",
+                "attribute": "validity-message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -731,11 +732,11 @@ export class FileUpload {
                 },
                 "getter": true,
                 "setter": false,
-                "attribute": "validity-message",
                 "reflect": false
             },
             "files": {
                 "type": "unknown",
+                "attribute": "files",
                 "mutable": false,
                 "complexType": {
                     "original": "FileWithUrl[]",
@@ -759,6 +760,7 @@ export class FileUpload {
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -773,7 +775,6 @@ export class FileUpload {
                 },
                 "getter": true,
                 "setter": true,
-                "attribute": "value",
                 "reflect": false
             }
         };
@@ -1022,4 +1023,3 @@ export class FileUpload {
             }];
     }
 }
-//# sourceMappingURL=file-upload.js.map

package/dist/collection/components/footer/footer.css

@@ -0,0 +1,185 @@
+: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;
+    }
+  }:host {
+  --col-gap: var(--nano-spacing-l1-default);
+  --icon-gap-md: var(--nano-spacing-md);
+  --icon-gap-sm: var(--nano-spacing-sm);
+  --vertical-padding: var(--nano-spacing-l1-default);
+  --horizontal-padding: 0;
+  --header-margin: 0 0 var(--nano-spacing-l1-default) 0;
+  display: block;
+}
+:host .footer {
+  container-type: inline-size;
+  container-name: footer-container;
+  display: flex;
+  flex-direction: column;
+}
+@container footer-container (max-width: 768px) {
+  :host .top,
+  :host .middle,
+  :host .bottom {
+    --horizontal-padding: var(--nano-spacing-md);
+    --col-gap: var(--nano-spacing-l);
+    --vertical-padding: var(--nano-spacing-md);
+  }
+  :host .top-start,
+  :host .top-center,
+  :host .top-end {
+    --header-margin: 0 0 var(--nano-spacing-md) 0;
+  }
+}
+@container footer-container (max-width: 1023px) {
+  :host .top,
+  :host .middle,
+  :host .bottom {
+    --horizontal-padding: var(--nano-spacing-l);
+  }
+}
+@container footer-container (max-width: 1346px) {
+  :host .top,
+  :host .middle,
+  :host .bottom {
+    --horizontal-padding: var(--nano-spacing-l1-default);
+  }
+}
+:host .upper {
+  background-color: var(--nano-color-base-rgb-1000);
+  border-block-start: 1px solid var(--nano-color-neutral-200);
+}
+:host .lower {
+  background-color: var(--nano-color-base-0);
+  color: var(--nano-color-base-1000);
+}
+:host .top,
+:host .middle,
+:host .bottom {
+  display: grid;
+  gap: var(--col-gap);
+  margin: 0 auto;
+  max-inline-size: 1266px;
+}
+:host .top,
+:host .middle {
+  grid-template-columns: repeat(3, 1fr);
+  padding: var(--vertical-padding) var(--horizontal-padding);
+}
+:host .bottom {
+  grid-template-columns: repeat(2, 1fr);
+  padding-inline: var(--horizontal-padding);
+  padding-block-end: var(--vertical-padding);
+}
+:host .middle-center a {
+  color: inherit;
+}
+:host .middle-center a:hover {
+  color: var(--nano-color-primary-1000);
+}
+:host .middle-center a:focus-visible {
+  outline: var(--nano-focus-ring);
+  outline-offset: var(--nano-focus-ring-offset);
+}
+:host .top-start,
+:host .top-center,
+:host .top-end {
+  flex-direction: column;
+}
+:host .middle-start,
+:host .middle-center,
+:host .middle-end {
+  align-items: center;
+}
+:host .middle-start {
+  display: flex;
+  justify-content: flex-start;
+}
+:host .middle-center {
+  display: flex;
+  justify-content: center;
+  gap: var(--icon-gap-md);
+  flex-wrap: nowrap;
+}
+:host .middle-end {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 20rem));
+  gap: var(--icon-gap-sm);
+  justify-content: end;
+}
+:host [slot=middle-end] {
+  inline-size: 100%;
+}
+:host .bottom-start p,
+:host .bottom-start ::slotted(p), .bottom-start :host::slotted(p) {
+  font-weight: var(--nano-font-weight-normal) !important;
+  font-size: var(--nano-font-size-xs) !important;
+  line-height: var(--nano-line-height-normal) !important;
+  letter-spacing: var(--nano-letter-spacing-loose) !important;
+  margin-block: 0 !important;
+}
+:host .bottom-end {
+  display: flex;
+  justify-content: flex-end;
+}
+:host .bottom-end ::slotted(*), .bottom-end :host::slotted(*) {
+  --input-font-size: var(--nano-font-size-2xs) !important;
+  max-inline-size: 9rem !important;
+}
+@container footer-container (max-width: 912px) {
+  :host .top,
+  :host .middle,
+  :host .bottom {
+    grid-template-columns: 1fr;
+  }
+  :host .middle-center {
+    flex-wrap: wrap;
+  }
+  :host .middle-end {
+    grid-template-columns: minmax(0, 6.6rem);
+  }
+  :host .bottom {
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+  }
+  :host .middle-start,
+  :host .middle-center,
+  :host .middle-end {
+    justify-content: center;
+  }
+}

package/dist/collection/components/footer/footer.js

@@ -0,0 +1,43 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import { h } from "@stencil/core";
+import { addGlobalStylesheetToShadow } from "../../utils/style";
+/**
+ * The footer is used to provide navigation, copyright info and links to social media platforms.
+ *
+ * @slot top-start_heading - The heading for the top left section.
+ * @slot top-start_content - The content for the top left (form) section.
+ * @slot top-center_heading - The heading for the top center section.
+ * @slot top-center_content - The content for the top center (links) section.
+ * @slot top-end_heading - The heading for the top right section.
+ * @slot top-end_content - The content for the top right (links) section.
+ * @slot middle-end - The content for the middle end (certifications) section.
+ * @slot bottom-start - The content for the bottom left section (copyright notice - optional).
+ * @slot bottom-end - The content for the right side of the bottom section (language selector).
+ *
+ * @status new
+ * @version 8.0.0
+ */
+export class NanoFooter {
+    host;
+    componentWillLoad() {
+        addGlobalStylesheetToShadow(this.host.shadowRoot);
+    }
+    render() {
+        return (h("footer", { key: '6c5f9e943485a21b7c19a1c1173816151450a7a7', class: "footer" }, h("div", { key: '4f412bbb7737f5f8225729e2109b688ccc800989', class: "upper" }, h("div", { key: 'dd53490055399eafe7599aca856dd0ca79ba21fb', class: "top" }, h("div", { key: 'c8103cf1bcd74ce025924fc975849573051368d0', class: "top-start" }, h("slot", { key: '924b1f7d97a15e4afa0126f7c03fe525f97f92ba', name: "top-start_heading" }), h("slot", { key: '3feb30f6395b9acbdd670cd656321ea751a4e81a', name: "top-start_content" })), h("div", { key: '5dd035af59487992c2da47b7b61012da97cfeec4', class: "top-center" }, h("slot", { key: 'aecc20ee6792c8912cd330724af3a75cfcd487af', name: "top-center_heading" }), h("slot", { key: 'f30e4dae00d45df2afb7a419daf875843ad61a50', name: "top-center_content" })), h("div", { key: '824feef5a5f50b461904096752bdb4aeefd84d99', class: "top-end" }, h("slot", { key: '7f06ff962236e057b640460097881646e2d8b1b2', name: "top-end_heading" }), h("slot", { key: '5e2412c74e444c570f5ea46b756d2e3369f12215', name: "top-end_content" })))), h("div", { key: '77cb498fde6fb578e3c5a249ca6c3db5c88206d1', class: "lower nano-theme-dark" }, h("div", { key: '7f2e8024df8f7470443d0048eefd8978d203f727', class: "middle" }, h("div", { key: '18c334b18c07c0ee2416cb646c5f5287c091bdb3', class: "middle-start" }, h("img", { key: 'be83911db58e7a75566a2d495b843427a7d1fa0a', src: "/nano-assets/img/ont-logo-light.svg", alt: "Oxford Nanopore Technologies logo. Featuring a stylised representation of a nanopore,\n          (a tiny protein channel embedded in a membrane) through which DNA or RNA molecules are passed in for sequencing.", height: "46" })), h("div", { key: 'a7b84187146146325db5cb990d53650ebfaf5741', class: "middle-center" }, h("a", { key: 'd2edfbc2e1034a9378be6291bf290af6d0e36119', href: "https://x.com/nanopore", target: "_blank" }, h("nano-icon", { key: '8e8cb317194b2dd9277599c38b525128d94d69c0', name: "brands/x-twitter", size: "large", ariaLabel: "X (formerly Twitter)" })), h("a", { key: '07091f28412bf31e853c5c51d6448631a7e47b33', href: "https://bsky.app/profile/nanoporetech.com", target: "_blank" }, h("nano-icon", { key: '8e5f4e5b2d13ce77df193d4a38743d6225f667d6', name: "brands/bluesky", size: "large", ariaLabel: "Bluesky" })), h("a", { key: '2561aa967f77b1ac0618c02fe1e78c270d8f82f7', href: "https://www.youtube.com/channel/UC5yMlYjHSgFfZ37LYq-dzig", target: "_blank" }, h("nano-icon", { key: '27ac4933b66ff7027c3f45bc001d0e311055cf0a', name: "brands/youtube", size: "large", ariaLabel: "YouTube" })), h("a", { key: '2b46f3651b32439997c4f1020d89901bcf6679a8', href: "https://www.facebook.com/Oxford-Nanopore-Technologies-251034380246/", target: "_blank" }, h("nano-icon", { key: '0f25dc9636ece933dbc00911d0e0c36735203666', name: "brands/facebook", size: "large", ariaLabel: "Facebook" })), h("a", { key: '541bef691993ace5b8c270e82d08984baace7964', href: "https://www.linkedin.com/company/oxford-nanopore-technologies", target: "_blank" }, h("nano-icon", { key: 'bb4a4104c3a39375d1f50c7c8aca1561a66d9c28', name: "brands/linkedin", size: "large", ariaLabel: "LinkedIn" })), h("a", { key: '4817a0798d5ab0586a20c40a14de73280ce749e3', href: "https://www.instagram.com/oxfordnanopore", target: "_blank" }, h("nano-icon", { key: 'dea3b9c4bc6100f73a3769999779ab4e6f343193', name: "brands/instagram", size: "large", ariaLabel: "Instagram" }))), h("div", { key: '151bbc03ca7c9fbdb14cf355dd4ff61c6fba1e36', class: "middle-end" }, h("slot", { key: '241922e25dbe52e5a6e5b9b661c037f3faa004f5', name: "middle-end" }))), h("div", { key: '08489f7cb75832e26fe862987d19bbdc03b8ff23', class: "bottom" }, h("div", { key: '1e2cfb25bbb0f6a60399b344f83a091677d848d7', class: "bottom-start" }, h("slot", { key: 'ce19389f907a75fb43a533a7ca200670b136ad86', name: "bottom-start" }, h("p", { key: '5d6d5135e67276a81f290e91d7753b9b2b4964ce' }, "\u00A9 2008 - 2025 Oxford Nanopore Technologies plc. All rights reserved. Registered Office: Gosling Building, Edmund Halley Road, Oxford Science Park, OX4 4DQ, UK | Registered No. 05386273 | VAT No 336942382. Oxford Nanopore Technologies, the Wheel icon, EPI2ME, Flongle, GridION, Metrichor, MinION, MinIT, MinKNOW, Plongle, PromethION, SmidgION, Ubik and VolTRAX are registered trademarks of Oxford Nanopore Technologies plc in various countries. Oxford Nanopore Technologies products are not intended for use for health assessment or to diagnose, treat, mitigate, cure, or prevent any disease or condition."))), h("div", { key: 'db091f94e130553a106a71071988b2c591a943ab', class: "bottom-end" }, h("slot", { key: '6b6642608e571e9d1690de419727476b27e1514f', name: "bottom-end" }))))));
+    }
+    static get is() { return "nano-footer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["footer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["footer.css"]
+        };
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/form-control/form-control.js

@@ -1,15 +1,15 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { h } from "../../utils/renderer";
-const renderLabel = ({ label, hasLabelSlot, controlId, labelId, floatLabel, placeholder, hideLabel, hasValue, rtl, showCharCount, maxlength, charCount, }) => {
+const renderLabel = ({ label, hasLabelSlot, controlId, labelId, floatLabel, placeholder, alwaysShowPlaceholder, hideLabel, hasValue, rtl, showCharCount, maxlength, charCount, }) => {
     if (!label && !hasLabelSlot)
         return;
     if (floatLabel) {
         return (h("label", { class: "form-ctrl__float-label", htmlFor: controlId, id: labelId }, h("slot", { name: "label" }, label), showCharCount && (h("span", { class: "form-ctrl__label-charcount" }, maxlength ? ` ${charCount}/${maxlength}` : ` ${charCount}`))));
     }
     else {
-        return (h("label", { class: { 'form-ctrl__label': true, 'visually-hide': hideLabel }, htmlFor: controlId, id: labelId }, h("div", { class: "form-ctrl__label-wrap" }, placeholder && hasValue && rtl && (h("span", { class: "form-ctrl__label-placeholder" }, placeholder, " / ")), h("span", { class: "form-ctrl__labeltext" }, h("slot", { name: "label" }, label)), placeholder && hasValue && !rtl && (h("span", { class: "form-ctrl__label-placeholder" }, " / ", placeholder))), showCharCount && (h("span", { class: "form-ctrl__label-charcount" }, maxlength
+        return (h("label", { class: { 'form-ctrl__label': true, 'visually-hide': hideLabel }, htmlFor: controlId, id: labelId }, h("div", { class: "form-ctrl__label-wrap" }, placeholder && alwaysShowPlaceholder && hasValue && rtl && (h("span", { class: "form-ctrl__label-placeholder" }, placeholder, " / ")), h("span", { class: "form-ctrl__labeltext" }, h("slot", { name: "label" }, label)), placeholder && alwaysShowPlaceholder && hasValue && !rtl && (h("span", { class: "form-ctrl__label-placeholder" }, " / ", placeholder))), showCharCount && (h("span", { class: "form-ctrl__label-charcount" }, maxlength
             ? maxlength - charCount + ' left'
             : charCount + ' characters'))));
     }
@@ -17,24 +17,24 @@ const renderLabel = ({ label, hasLabelSlot, controlId, labelId, floatLabel, plac
 export const FormControlWrap = (props, children) => {
     const { rtl, floatLabel, label, moreId, helperEndId, type, hasHelperSlot, showInlineError, errorMessage, hasHelperEndSlot, } = props;
     return (h("div", { class: {
+            'form-ctrl': true,
             'has-label': label !== null && !floatLabel,
             'has-float-label': label !== null && floatLabel,
             'has-helper-end': hasHelperEndSlot,
             rtl,
-            'form-ctrl': true,
+            [props.class]: true,
         } }, h("div", { class: "form-ctrl__wrapper" }, !floatLabel ? renderLabel({ ...props }) : '', h("div", { class: {
             'form-ctrl__input': true,
             'form-ctrl__textarea': type === 'textarea',
-        } }, floatLabel && renderLabel({ ...props, rtl }), children), (showInlineError || hasHelperSlot) && (h("div", { class: "form-ctrl__more", id: moreId }, !!showInlineError && (h("div", { class: "form-ctrl__error", "aria-live": "polite" }, errorMessage)), h("div", { class: "form-ctrl__helper" }, h("slot", { name: "helper" }))))), hasHelperEndSlot && (h("div", { class: "form-ctrl__helper-end", id: helperEndId }, h("slot", { name: "helper-end" })))));
+        } }, floatLabel && renderLabel({ ...props, rtl }), children), (showInlineError || hasHelperSlot) && (h("div", { class: "form-ctrl__more", id: moreId }, showInlineError && (h("div", { class: "form-ctrl__error", "aria-live": "polite" }, errorMessage)), h("div", { class: "form-ctrl__helper" }, h("slot", { name: "helper" }))))), hasHelperEndSlot && (h("div", { class: "form-ctrl__helper-end", id: helperEndId }, h("slot", { name: "helper-end" })))));
 };
 export const FormControl = (props, children) => {
-    const { clearControl, onClearText, readonly, disabled, control, ref, endSlot, endValueSlot, startSlot, } = props;
+    const { ref, onClearText, clearControl, readonly, disabled, control, endSlot, endValueSlot, startSlot, showInlineError, } = props;
     const clickThrough = () => {
         control.setFocus();
     };
     return (h("div", { class: "form-ctrl__input-wrap", ref: (el) => {
             if (ref)
                 ref(el);
-        } }, h("span", { class: "form-ctrl__slot-start" }, h("slot", { name: "start" }), startSlot), children, clearControl && !readonly && !disabled && (h("button", { type: "button", class: "icon form-ctrl__clear-btn", tabindex: "-1", onTouchStart: onClearText, onMouseDown: onClearText }, h("nano-icon", { name: "light/xmark", role: "img", ariaLabel: "Clear content" }))), h("span", { class: "form-ctrl__slot-value-end", onClick: clickThrough }, h("slot", { name: "value-end" }), endValueSlot), h("span", { class: "form-ctrl__slot-end" }, h("slot", { name: "end" }), endSlot)));
+        } }, h("span", { class: "form-ctrl__slot-start" }, h("slot", { name: "start" }), startSlot), children, clearControl && !readonly && !disabled && (h("button", { type: "button", class: "icon form-ctrl__clear-btn", tabindex: "-1", onTouchStart: onClearText, onMouseDown: onClearText }, h("nano-icon", { name: "light/xmark", role: "img", ariaLabel: "Clear content" }))), showInlineError && (h("div", { onClick: clickThrough, class: "form-ctrl__validation-icon" }, h("nano-icon", { name: "solid/circle-xmark", class: "form-ctrl__error-icon" }), h("nano-icon", { name: "solid/circle-check", class: "form-ctrl__success-icon" }))), h("span", { class: "form-ctrl__slot-value-end", onClick: clickThrough }, h("slot", { name: "value-end" }), endValueSlot), h("span", { class: "form-ctrl__slot-end" }, h("slot", { name: "end" }), endSlot)));
 };
-//# sourceMappingURL=form-control.js.map