@nanoporetech-digital/components 8.7.2 → 8.8.0

package/dist/nano-components/nano-table.entry.js

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{g as t,r as e,a as o}from"./index-BM3Om9WE.js";import{d as n}from"./throttle-C93FMm2Z.js";import{t as a,h as s}from"./renderer-DasB4P10.js";const i=class{get host(){return t(this)}propsReady=!1;compact="auto";handleCompactChange(){this.setupProperties()}scrollable=!0;hideCaption=!1;handleHideCaptionChange(){const t=this.caption;t&&t.classList.toggle("visually-hidden",this.hideCaption)}disableClickableRows=!1;resizeObserver;mutationObserver;intersectionObserver;settingUp=!1;get table(){return this.host.querySelector("table")}get caption(){return this.host.querySelector("caption")||(console.error("nano-table: No caption found. For better a11y, please add a <caption> element to the table."),null)}setupProperties=()=>{const t=this.table;if(!t||this.settingUp)return;if(this.settingUp=!0,!this.disableClickableRows){const t=Array.from(this.host.querySelectorAll("tr"));for(const e of t)1===this.getRowClickElements(e).length?(e.setAttribute("clickable","true"),e.addEventListener("click",this.rowClickHandler)):(e.removeAttribute("clickable"),e.removeEventListener("click",this.rowClickHandler))}const e=t.querySelectorAll("thead, tbody, tfoot");let o=0;if(t.querySelector("[sticky=start], [sticky=end]")){for(const t of e)t.style.setProperty("--section-height",`${t.offsetHeight}px`);const t=Array.from(this.host.querySelectorAll("thead th, thead td"));for(const e of t)e.matches("[sticky=start]")&&(this.makeCellsSticky(e,"start",o),o>0&&e.style.setProperty("--sticky-start",`${o}px`),o+=e.offsetWidth-1);o=0;for(const e of[...t].reverse())e.matches("[sticky=end]")&&(this.makeCellsSticky(e,"end",o),o>0&&e.style.setProperty("--sticky-end",`${o}px`),o+=e.offsetWidth-1)}if(t.querySelector("[sticky=top]")){o=0;for(const t of e){const e=Array.from(t.querySelectorAll("tr[sticky]"));for(const[t,n]of e.entries())n.matches("[sticky=top]")&&o>0&&n.style.setProperty("--sticky-top",`${o}px`),t===e.length-1&&(o+=n.offsetHeight-1)}}this.settingUp=!1,this.propsReady=!0};getRowClickElements(t){const e=t.querySelectorAll("a"),o=t.querySelectorAll("button"),n=Array.from(t.querySelectorAll('input[type="checkbox"]')).filter((t=>!t.closest("nano-checkbox"))),a=Array.from(t.querySelectorAll('input[type="radio"]')).filter((t=>!t.closest("nano-checkbox")));return[...e,...o,...t.querySelectorAll("nano-checkbox"),...n,...a]}rowClickHandler=t=>{const e=t.target,o=e.closest("tr");if(!o)return;const n=this.getRowClickElements(o);1===n.length&&e.closest(n[0].tagName)!==n[0]&&n[0].click()};makeCellsSticky(t,e,o=0){const n=t.closest("table"),a=t.closest("tr"),s=Array.from(a.cells);let i=0;for(const e of s){if(e===t)break;i+=e.colSpan||1}for(const t of n.tBodies)for(const n of t.rows){let t=0;for(const a of n.cells){const n=a.colSpan||1;if(t<=i&&i<t+n){a.setAttribute("sticky",e),o>0&&a.style.setProperty("--sticky-"+e,`${o}px`);break}t+=n}}}addObservers(){this.resizeObserver=new ResizeObserver((()=>{this.setupProperties()})),this.resizeObserver.observe(this.host),this.mutationObserver=new MutationObserver((()=>{this.setupProperties()}));const t=this.table;this.mutationObserver.observe(t,{childList:!0,subtree:!0}),this.intersectionObserver=new IntersectionObserver((()=>{this.setupProperties(),this.intersectionObserver.disconnect()}),{threshold:1}),this.intersectionObserver.observe(t)}cleanUpObservers(){this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.mutationObserver&&(this.mutationObserver.disconnect(),this.mutationObserver=null),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null)}constructor(t){e(this,t),this.setupProperties=n(this.setupProperties,100)}connectedCallback(){this.addObservers(),this.handleHideCaptionChange()}componentDidRender(){!1!==this.scrollable&&this.table&&customElements.whenDefined(a("nano-masked-overflow")).then((()=>{this.host.querySelector(".nano-table__overflow")?.appendChild(this.table)}))}disconnectedCallback(){this.cleanUpObservers()}render(){return s(o,{key:"dfcda7c6604792e025f1ed4997395857ad786be3",class:{"nano-table":!0,"nano-table--props-ready":this.propsReady}},this.scrollable&&s("nano-masked-overflow",{key:"2ef0536af50f22134e4c0d295172817287c46196",hideScrollbars:!1,scrollControls:!1,label:this.caption?.textContent||void 0,class:"nano-table__overflow-container"},s("div",{key:"1b9ba48be1ccf92ac46f9873ac08b43a51cfcabc",class:"nano-table__overflow"})),s("slot",{key:"ab86c4eab83b69cb4ba31b22ae18f9cb0c31033a"}))}static get watchers(){return{compact:["handleCompactChange"],hideCaption:["handleHideCaptionChange"]}}};i.style=".sc-nano-table-h,*.sc-nano-table,*.sc-nano-table::before,*.sc-nano-table::after{box-sizing:border-box}[hidden].sc-nano-table{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-table-h,*.sc-nano-table,*.sc-nano-table::before,*.sc-nano-table::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-table-h,*.sc-nano-table,*.sc-nano-table::before,*.sc-nano-table::after{box-sizing:border-box}[hidden].sc-nano-table{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-table-h,*.sc-nano-table,*.sc-nano-table::before,*.sc-nano-table::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}";export{i as nano_table}
+import{g as t,r as e,a as o}from"./index-BM3Om9WE.js";import{d as a}from"./throttle-C93FMm2Z.js";import{t as n,h as s}from"./renderer-DasB4P10.js";const i=class{get host(){return t(this)}propsReady=!1;compact="auto";handleCompactChange(){this.setupProperties()}scrollable=!0;hideCaption=!1;handleHideCaptionChange(){const t=this.caption;t&&t.classList.toggle("visually-hidden",this.hideCaption)}disableClickableRows=!1;resizeObserver;mutationObserver;intersectionObserver;settingUp=!1;get table(){return this.host.querySelector("table")}get caption(){return this.host.querySelector("caption")||(console.error("nano-table: No caption found. For better a11y, please add a <caption> element to the table."),null)}setupProperties=()=>{const t=this.table;if(!t||this.settingUp)return;if(this.settingUp=!0,!this.disableClickableRows){const t=Array.from(this.host.querySelectorAll("tr"));for(const e of t)1===this.getRowClickElements(e).length?(e.setAttribute("clickable","true"),e.addEventListener("click",this.rowClickHandler)):(e.removeAttribute("clickable"),e.removeEventListener("click",this.rowClickHandler))}const e=t.querySelectorAll("thead, tbody, tfoot");let o=0;if(t.querySelector("[sticky=start], [sticky=end]")){for(const t of e)t.style.setProperty("--section-height",`${t.offsetHeight}px`);const t=Array.from(this.host.querySelectorAll("thead th, thead td"));for(const e of t)e.matches("[sticky=start]")&&(this.makeCellsSticky(e,"start",o),o>0&&e.style.setProperty("--sticky-start",`${o}px`),o+=e.offsetWidth-1);o=0;for(const e of[...t].reverse())e.matches("[sticky=end]")&&(this.makeCellsSticky(e,"end",o),o>0&&e.style.setProperty("--sticky-end",`${o}px`),o+=e.offsetWidth-1)}if(t.querySelector("[sticky=top]")){o=0;for(const t of e){const e=Array.from(t.querySelectorAll("tr[sticky]"));for(const[t,a]of e.entries())a.matches("[sticky=top]")&&o>0&&a.style.setProperty("--sticky-top",`${o}px`),t===e.length-1&&(o+=a.offsetHeight-1)}}this.settingUp=!1,this.propsReady=!0};getRowClickElements(t){const e=t.querySelectorAll("a"),o=t.querySelectorAll("button"),a=Array.from(t.querySelectorAll('input[type="checkbox"]')).filter((t=>!t.closest("nano-checkbox"))),n=Array.from(t.querySelectorAll('input[type="radio"]')).filter((t=>!t.closest("nano-checkbox")));return[...e,...o,...t.querySelectorAll("nano-checkbox"),...a,...n]}rowClickHandler=t=>{const e=t.target,o=e.closest("tr");if(!o)return;const a=this.getRowClickElements(o);1===a.length&&e.closest(a[0].tagName)!==a[0]&&a[0].click()};makeCellsSticky(t,e,o=0){const a=t.closest("table"),n=t.closest("tr"),s=Array.from(n.cells);let i=0;for(const e of s){if(e===t)break;i+=e.colSpan||1}for(const t of a.tBodies)for(const a of t.rows){let t=0;for(const n of a.cells){const a=n.colSpan||1;if(t<=i&&i<t+a){n.setAttribute("sticky",e),o>0&&n.style.setProperty("--sticky-"+e,`${o}px`);break}t+=a}}}addObservers(){this.resizeObserver=new ResizeObserver((()=>{this.setupProperties()})),this.resizeObserver.observe(this.host),this.mutationObserver=new MutationObserver((()=>{this.setupProperties()}));const t=this.table;this.mutationObserver.observe(t,{childList:!0,subtree:!0}),this.intersectionObserver=new IntersectionObserver((()=>{this.setupProperties(),this.intersectionObserver.disconnect()}),{threshold:1}),this.intersectionObserver.observe(t)}cleanUpObservers(){this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.mutationObserver&&(this.mutationObserver.disconnect(),this.mutationObserver=null),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null)}constructor(t){e(this,t),this.setupProperties=a(this.setupProperties,100)}connectedCallback(){this.addObservers(),this.handleHideCaptionChange()}componentDidRender(){!1!==this.scrollable&&this.table&&customElements.whenDefined(n("nano-masked-overflow")).then((()=>{this.host.querySelector(".nano-table__overflow")?.appendChild(this.table)}))}disconnectedCallback(){this.cleanUpObservers()}render(){return s(o,{key:"75c4089a6d670a16eea3fca8d079ac9a827c4cfa",class:{"nano-table":!0,"nano-table--props-ready":this.propsReady}},this.scrollable&&s("nano-masked-overflow",{key:"90a1e07d2daa97047c3be1381717a8ae3b53b5e1",hideScrollbars:!1,scrollControls:!1,label:this.caption?.textContent||void 0,class:"nano-table__overflow-container"},s("div",{key:"badc595c9931fb6198ab38b4e09cdf4201fcc064",class:"nano-table__overflow"})),s("slot",{key:"d3fd5902fccc42b3412e9cb1950b054b5a69a525"}))}static get watchers(){return{compact:["handleCompactChange"],hideCaption:["handleHideCaptionChange"]}}};i.style=".sc-nano-table-h,*.sc-nano-table,*.sc-nano-table::before,*.sc-nano-table::after{box-sizing:border-box}[hidden].sc-nano-table{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-table-h,*.sc-nano-table,*.sc-nano-table::before,*.sc-nano-table::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-table-h,*.sc-nano-table,*.sc-nano-table::before,*.sc-nano-table::after{box-sizing:border-box}[hidden].sc-nano-table{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-table-h,*.sc-nano-table,*.sc-nano-table::before,*.sc-nano-table::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}";export{i as nano_table}

package/dist/nano-components/{page-dots-CSf81OuJ.js → page-dots-CCfERISy.js}

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{F as t,u as i,U as s}from"./nano-slides-GrbOydfa.js";import"./index-BM3Om9WE.js";import"./renderer-DasB4P10.js";function h(t){this.parent=t,this.parentElement=this.parent.element.shadowRoot||this.parent.element,this.containingEl=this.parentElement.parentNode||this.parentElement,this._create()}(h.prototype=Object.create(s.prototype))._create=function(){this.holder=document.createElement("div"),this.holder.className="flickity-page-dots",this.holder.part.add("pagination"),this.dots=[],this.handleClick=this.onClick.bind(this),this.on("pointerDown",this.parent.childUIPointerDown.bind(this.parent))},h.prototype.activate=function(){this.setDots(),this.holder.addEventListener("click",this.handleClick),this.bindStartEvent(this.holder),this.containingEl.appendChild(this.holder)},h.prototype.deactivate=function(){this.holder.removeEventListener("click",this.handleClick),this.unbindStartEvent(this.holder),this.containingEl.removeChild(this.holder)},h.prototype.setDots=function(){const t=this.parent.slides.length-this.dots.length;t>0?this.addDots(t):t<0&&this.removeDots(-t)},h.prototype.addDots=function(t){const i=document.createDocumentFragment(),s=[],h=this.dots.length,n=h+t;for(let t=h;t<n;t++){const h=document.createElement("button");h.classList.add("dot"),h.innerText=`Go to slide ${t+1}`,i.appendChild(h),s.push(h)}this.holder.appendChild(i),this.dots=this.dots.concat(s)},h.prototype.removeDots=function(t){this.dots.splice(this.dots.length-t,t).forEach((function(t){this.holder.removeChild(t)}),this)},h.prototype.updateSelected=function(){this.selectedDot&&(this.selectedDot.classList.remove("is-selected"),this.selectedDot.part.remove("pagination-item--active"),this.selectedDot.removeAttribute("aria-current")),this.dots.length&&(this.selectedDot=this.dots[this.parent.selectedIndex],this.selectedDot.classList.add("is-selected"),this.selectedDot.part.add("pagination-item--active"),this.selectedDot.setAttribute("aria-current","step"))},h.prototype.onTap=h.prototype.onClick=function(t){const i=t.target;if("BUTTON"!=i.nodeName)return;this.parent.uiChange();const s=this.dots.indexOf(i);this.parent.select(s)},h.prototype.destroy=function(){this.deactivate(),this.allOff()},t.PageDots=h,i.extend(t.defaults,{pageDots:!0}),t.createMethods.push("_createPageDots");const n=t.prototype;n._createPageDots=function(){this.options.pageDots&&(this.pageDots=new h(this),this.on("activate",this.activatePageDots),this.on("select",this.updateSelectedPageDots),this.on("cellChange",this.updatePageDots),this.on("resize",this.updatePageDots),this.on("deactivate",this.deactivatePageDots))},n.activatePageDots=function(){this.pageDots.activate()},n.updateSelectedPageDots=function(){this.pageDots.updateSelected()},n.updatePageDots=function(){this.pageDots.setDots()},n.deactivatePageDots=function(){this.pageDots.deactivate()},t.PageDots=h;
+import{F as t,u as i,U as s}from"./nano-slides-xbY6lXX9.js";import"./index-BM3Om9WE.js";import"./renderer-DasB4P10.js";function h(t){this.parent=t,this.parentElement=this.parent.element.shadowRoot||this.parent.element,this.containingEl=this.parentElement.parentNode||this.parentElement,this._create()}(h.prototype=Object.create(s.prototype))._create=function(){this.holder=document.createElement("div"),this.holder.className="flickity-page-dots",this.holder.part.add("pagination"),this.dots=[],this.handleClick=this.onClick.bind(this),this.on("pointerDown",this.parent.childUIPointerDown.bind(this.parent))},h.prototype.activate=function(){this.setDots(),this.holder.addEventListener("click",this.handleClick),this.bindStartEvent(this.holder),this.containingEl.appendChild(this.holder)},h.prototype.deactivate=function(){this.holder.removeEventListener("click",this.handleClick),this.unbindStartEvent(this.holder),this.containingEl.removeChild(this.holder)},h.prototype.setDots=function(){const t=this.parent.slides.length-this.dots.length;t>0?this.addDots(t):t<0&&this.removeDots(-t)},h.prototype.addDots=function(t){const i=document.createDocumentFragment(),s=[],h=this.dots.length,n=h+t;for(let t=h;t<n;t++){const h=document.createElement("button");h.classList.add("dot"),h.innerText=`Go to slide ${t+1}`,i.appendChild(h),s.push(h)}this.holder.appendChild(i),this.dots=this.dots.concat(s)},h.prototype.removeDots=function(t){this.dots.splice(this.dots.length-t,t).forEach((function(t){this.holder.removeChild(t)}),this)},h.prototype.updateSelected=function(){this.selectedDot&&(this.selectedDot.classList.remove("is-selected"),this.selectedDot.part.remove("pagination-item--active"),this.selectedDot.removeAttribute("aria-current")),this.dots.length&&(this.selectedDot=this.dots[this.parent.selectedIndex],this.selectedDot.classList.add("is-selected"),this.selectedDot.part.add("pagination-item--active"),this.selectedDot.setAttribute("aria-current","step"))},h.prototype.onTap=h.prototype.onClick=function(t){const i=t.target;if("BUTTON"!=i.nodeName)return;this.parent.uiChange();const s=this.dots.indexOf(i);this.parent.select(s)},h.prototype.destroy=function(){this.deactivate(),this.allOff()},t.PageDots=h,i.extend(t.defaults,{pageDots:!0}),t.createMethods.push("_createPageDots");const n=t.prototype;n._createPageDots=function(){this.options.pageDots&&(this.pageDots=new h(this),this.on("activate",this.activatePageDots),this.on("select",this.updateSelectedPageDots),this.on("cellChange",this.updatePageDots),this.on("resize",this.updatePageDots),this.on("deactivate",this.deactivatePageDots))},n.activatePageDots=function(){this.pageDots.activate()},n.updateSelectedPageDots=function(){this.pageDots.updateSelected()},n.updatePageDots=function(){this.pageDots.setDots()},n.deactivatePageDots=function(){this.pageDots.deactivate()},t.PageDots=h;

package/dist/types/components/input-otp/input-otp-interface.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Values are converted to strings when emitted which is
+ * why we do not have a `number` type here even though the
+ * `value` prop accepts a `number` type.
+ */
+export interface InputOtpInputEventDetail {
+    value?: string | null;
+    valid?: boolean;
+    event?: Event;
+}
+export interface InputOtpChangeEventDetail {
+    value?: string | null;
+    valid?: boolean;
+    event?: Event;
+}
+export interface InputOtpCompleteEventDetail {
+    value?: string | null;
+    valid?: boolean;
+    event?: Event;
+}
+export interface InputOtpCustomEvent<T = InputOtpChangeEventDetail> extends CustomEvent {
+    detail: T;
+    target: HTMLNanoInputOtpElement;
+}

package/dist/types/components/input-otp/input-otp.d.ts

@@ -0,0 +1,281 @@
+import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import type { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail } from './input-otp-interface.js';
+/**
+ * A component for entering one-time passwords (OTP) with multiple input fields.
+ *
+ * @version 8.7.2
+ * @status new
+ *
+ * @slot - The default slot for the input description.
+ * @slot validity-icon - A slot for a custom validity icon. If not provided, a default icon will be used.
+ */
+export declare class InputOTP implements ComponentInterface {
+    private inputRefs;
+    private inputId;
+    /**
+     * Stores the initial value of the input when it receives focus.
+     * Used to determine if the value changed during the focus session
+     * to avoid emitting unnecessary change events on blur.
+     */
+    private focusedValue?;
+    /**
+     * Tracks whether the user is navigating through input boxes using keyboard navigation
+     * (arrow keys, tab) versus mouse clicks. This is used to determine the appropriate
+     * focus behavior when an input box is focused.
+     */
+    private isKeyboardNavigation;
+    el: HTMLNanoInputOtpElement;
+    private inputValues;
+    hasFocus: boolean;
+    private previousInputValues;
+    private invalid;
+    private valid;
+    /**
+     * If `true`, the user cannot interact with the input.
+     */
+    disabled: boolean;
+    /**
+     * A hint to the browser for which keyboard to display.
+     * Possible values: `"none"`, `"text"`, `"tel"`, `"url"`,
+     * `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
+     *
+     * For numbers (type="number"): "numeric"
+     * For text (type="text"): "text"
+     */
+    inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+    /**
+     * The number of input boxes to display.
+     */
+    length: number;
+    /**
+     * A regex pattern string for allowed characters. Defaults based on type.
+     *
+     * For numbers (`type="number"`): `"[\p{N}]"`
+     * For text (`type="text"`): `"[\p{L}\p{N}]"`
+     */
+    pattern?: string;
+    /**
+     * If `true`, the user cannot modify the value.
+     */
+    readonly: boolean;
+    /**
+     * The type of input allowed in the input boxes.
+     */
+    type: 'text' | 'number';
+    /**
+     * The value of the input group.
+     */
+    value?: string | number | null;
+    /**
+     * If `true`, allows the input to be completely filled with invalid values.
+     * By default, if any input box contains an invalid value, the entire input group
+     * is marked as invalid.
+     * Default is `false`.
+     */
+    allowInvalid: boolean;
+    /**
+     * If `true`, shows a validity icon when all input boxes are filled.
+     * A check icon is shown if all values are valid, and an X icon is shown if any value is invalid.
+     * This does not affect the `invalid` or `valid` states of the input group.
+     * Default is `false`.
+     * */
+    showValidity: boolean;
+    /**
+     * The `nanoInput` event is fired each time the user modifies the input's value.
+     * Unlike the `nanoChange` event, the `nanoInput` event is fired for each alteration
+     * to the input's value. This typically happens for each keystroke as the user types.
+     *
+     * For elements that accept text input (`type=text`, `type=tel`, etc.), the interface
+     * is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,
+     * the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If
+     * the input is cleared on edit, the type is `null`.
+     */
+    nanoInput: EventEmitter<InputOtpInputEventDetail>;
+    /**
+     * The `nanoChange` event is fired when the user modifies the input's value.
+     * Unlike the `nanoInput` event, the `nanoChange` event is only fired when changes
+     * are committed, not as the user types.
+     *
+     * The `nanoChange` event fires when the `<nano-input-otp>` component loses
+     * focus after its value has changed.
+     *
+     * This event will not emit when programmatically setting the `value` property.
+     */
+    nanoChange: EventEmitter<InputOtpChangeEventDetail>;
+    /**
+     * Emitted when all input boxes have been filled with valid values.
+     */
+    nanoComplete: EventEmitter<InputOtpCompleteEventDetail>;
+    /**
+     * Emitted when the input group loses focus.
+     */
+    nanoBlur: EventEmitter<FocusEvent>;
+    /**
+     * Emitted when the input group has focus.
+     */
+    nanoFocus: EventEmitter<FocusEvent>;
+    /**
+     * Sets focus to an input box.
+     * @param index - The index of the input box to focus (0-based).
+     * If provided and the input box has a value, the input box at that index will be focused.
+     * Otherwise, the first empty input box or the last input if all are filled will be focused.
+     */
+    setFocus(index?: number): Promise<void>;
+    valueChanged(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    /**
+     * Get the regex pattern for allowed characters.
+     * If a pattern is provided, use it to create a regex pattern
+     * Otherwise, use the default regex pattern based on type
+     */
+    private get validKeyPattern();
+    private get specialCharsPattern();
+    /**
+     * Gets the string pattern to pass to the input element
+     * and use in the regex for allowed characters.
+     * @returns {string} The regex pattern string for allowed characters.
+     */
+    private getPattern;
+    /**
+     * Get the default value for inputmode.
+     * If inputmode is provided, use it.
+     * Otherwise, use the default inputmode based on type
+     * @returns {string} The inputmode to use for the input boxes.
+     */
+    private getInputmode;
+    /**
+     * Initializes the input values array based on the current value prop.
+     * This splits the value into individual characters and validates them against
+     * the allowed pattern. The values are then used as the values in the native
+     * input boxes and the value of the input group is updated.
+     */
+    private initializeValues;
+    /**
+     * Returns `true` if the document or host element
+     * has a `dir` set to `rtl`. The host value will always
+     * take priority over the root document value.
+     * @returns {boolean} True if RTL direction is set, false otherwise.
+     */
+    private isRTL;
+    /**
+     * Updates the value of the input group.
+     * This updates the value of the input group and emits an `nanoChange` event.
+     * If all of the input boxes are filled, it emits an `nanoComplete` event.
+     */
+    private updateValue;
+    /**
+     * Emits an `nanoChange` event.
+     * This API should be called for user committed changes.
+     * This API should not be used for external value changes.
+     */
+    private emitNanoChange;
+    /**
+     * Emits an `nanoInput` event.
+     * This is used to emit the input value when the user types,
+     * backspaces, or pastes.
+     */
+    private emitNanoInput;
+    /**
+     * Handles the focus behavior for the input OTP component.
+     *
+     * Focus behavior:
+     * 1. Keyboard navigation: Allow normal focus movement
+     * 2. Mouse click:
+     *    - If clicked box has value: Focus that box
+     *    - If clicked box is empty: Focus first empty box
+     *
+     * Emits the `nanoFocus` event when the input group gains focus.
+     * @returns {(event: FocusEvent) => void} Event handler for focus events.
+     */
+    private onFocus;
+    /**
+     * Handles the blur behavior for the input OTP component.
+     * Emits the `nanoBlur` event when the input group loses focus.
+     */
+    private onBlur;
+    /**
+     * Focuses the next input box.
+     */
+    private focusNext;
+    /**
+     * Focuses the previous input box.
+     */
+    private focusPrevious;
+    /**
+     * Searches through the input values and returns the index
+     * of the first empty input.
+     * Returns -1 if all inputs are filled.
+     * @returns {number} The index of the first empty input, or -1 if all are filled.
+     */
+    private getFirstEmptyIndex;
+    /**
+     * Returns the index of the input that should be tabbed to.
+     * If all inputs are filled, returns the last input's index.
+     * Otherwise, returns the index of the first empty input.
+     * @returns {number} The index to tab to.
+     */
+    private getTabbableIndex;
+    /**
+     * Updates the tabIndexes for the input boxes.
+     * This is used to ensure that the correct input is
+     * focused when the user navigates using the tab key.
+     */
+    private updateTabIndexes;
+    /**
+     * Handles keyboard navigation for the OTP component.
+     *
+     * Navigation:
+     * - Backspace: Clears current input and moves to previous box if empty
+     * - Arrow Left/Right: Moves focus between input boxes
+     * - Tab: Allows normal tab navigation between components
+     * @returns {(event: KeyboardEvent) => void} Event handler for keydown events.
+     */
+    private onKeyDown;
+    /**
+     * Processes all input scenarios for each input box.
+     *
+     * This function manages:
+     * 1. Autofill handling
+     * 2. Input validation
+     * 3. Full selection replacement or typing in an empty box
+     * 4. Inserting in the middle with available space (shifting)
+     * 5. Single character replacement
+     * @returns {(event: InputEvent) => void} Event handler for input events.
+     */
+    private onInput;
+    /**
+     * Handles pasting text into the input OTP component.
+     * This function prevents the default paste behavior and
+     * validates the pasted text against the allowed pattern.
+     * It then updates the value of the input group and focuses
+     * the next empty input after pasting.
+     */
+    private onPaste;
+    /**
+     * Determines if a separator should be shown for a given index by:
+     * - Checking if the total length is even (no separator for odd lengths)
+     * - If even, showing a separator after the middle index
+     *
+     * @param index - The index to check for a separator.
+     * @returns {boolean} True if a separator should be shown after the given index, false otherwise.
+     */
+    private showSeparator;
+    /**
+     * Filters the input string to only include valid characters based on the
+     * `validKeyPattern` regex. If `allowInvalid` is true, it will also
+     * exclude special characters. The resulting array is sliced to the
+     * maximum length of the input OTP.
+     * @param str - The input string to filter.
+     * @returns {string[]} An array of valid characters.
+     */
+    private getValidChars;
+    /**
+     * Computes the validity of the input group based on the current input values.
+     * Sets the following `invalid` and `valid` states:
+     * - `invalid` is true if `allowInvalid` is true and any input value is invalid.
+     * - `valid` is true if all input boxes are filled with valid values.
+     */
+    private computeValidity;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -26,6 +26,7 @@ import { FileInputChangeEventDetail, FileWithUrl } from "./components/file-uploa
 import { AlgoliaNetworkError, MyAccountData } from "./components/global-nav/global-nav-interface";
 import { NanoDatePicker } from "./components/date-picker/date-picker";
 import { InputChangeEventDetail } from "./components/input/input-interface";
+import { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail } from "./components/input-otp/input-otp-interface.js";
 import { NavItemEventDetail } from "./components/nav-item/nav-item-interface";
 import { RangeChangeEventDetail, RangeValue } from "./components/range/range-interface";
 import { ResizeStateChangeEventDetail } from "./components/resize-observe/resize-observe-interface";
@@ -52,6 +53,7 @@ export { FileInputChangeEventDetail, FileWithUrl } from "./components/file-uploa
 export { AlgoliaNetworkError, MyAccountData } from "./components/global-nav/global-nav-interface";
 export { NanoDatePicker } from "./components/date-picker/date-picker";
 export { InputChangeEventDetail } from "./components/input/input-interface";
+export { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail } from "./components/input-otp/input-otp-interface.js";
 export { NavItemEventDetail } from "./components/nav-item/nav-item-interface";
 export { RangeChangeEventDetail, RangeValue } from "./components/range/range-interface";
 export { ResizeStateChangeEventDetail } from "./components/resize-observe/resize-observe-interface";
@@ -2183,6 +2185,68 @@ export namespace Components {
          */
         "valueAsNumber": number;
     }
+    /**
+     * A component for entering one-time passwords (OTP) with multiple input fields.
+     * @version 8.7.2
+     * @status new
+     */
+    interface NanoInputOtp {
+        /**
+          * If `true`, allows the input to be completely filled with invalid values. By default, if any input box contains an invalid value, the entire input group is marked as invalid. Default is `false`.
+          * @default false
+         */
+        "allowInvalid": boolean;
+        /**
+          * If `true`, the user cannot interact with the input.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.  For numbers (type="number"): "numeric" For text (type="text"): "text"
+         */
+        "inputmode"?: | 'none'
+    | 'text'
+    | 'tel'
+    | 'url'
+    | 'email'
+    | 'numeric'
+    | 'decimal'
+    | 'search';
+        /**
+          * The number of input boxes to display.
+          * @default 6
+         */
+        "length": number;
+        /**
+          * A regex pattern string for allowed characters. Defaults based on type.  For numbers (`type="number"`): `"[\p{N}]"` For text (`type="text"`): `"[\p{L}\p{N}]"`
+         */
+        "pattern"?: string;
+        /**
+          * If `true`, the user cannot modify the value.
+          * @default false
+         */
+        "readonly": boolean;
+        /**
+          * Sets focus to an input box.
+          * @param index - The index of the input box to focus (0-based). If provided and the input box has a value, the input box at that index will be focused. Otherwise, the first empty input box or the last input if all are filled will be focused.
+         */
+        "setFocus": (index?: number) => Promise<void>;
+        /**
+          * If `true`, shows a validity icon when all input boxes are filled. A check icon is shown if all values are valid, and an X icon is shown if any value is invalid. This does not affect the `invalid` or `valid` states of the input group. Default is `false`.
+          * @default false
+         */
+        "showValidity": boolean;
+        /**
+          * The type of input allowed in the input boxes.
+          * @default 'number'
+         */
+        "type": 'text' | 'number';
+        /**
+          * The value of the input group.
+          * @default ''
+         */
+        "value"?: string | number | null;
+    }
     /**
      * A thin, declarative interface to the [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver).
      * @version 6.0.0
@@ -3502,6 +3566,10 @@ export interface NanoInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNanoInputElement;
 }
+export interface NanoInputOtpCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNanoInputOtpElement;
+}
 export interface NanoIntersectionObserveCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNanoIntersectionObserveElement;
@@ -4391,6 +4459,32 @@ declare global {
         prototype: HTMLNanoInputElement;
         new (): HTMLNanoInputElement;
     };
+    interface HTMLNanoInputOtpElementEventMap {
+        "nanoInput": InputOtpInputEventDetail;
+        "nanoChange": InputOtpChangeEventDetail;
+        "nanoComplete": InputOtpCompleteEventDetail;
+        "nanoBlur": FocusEvent;
+        "nanoFocus": FocusEvent;
+    }
+    /**
+     * A component for entering one-time passwords (OTP) with multiple input fields.
+     * @version 8.7.2
+     * @status new
+     */
+    interface HTMLNanoInputOtpElement extends Components.NanoInputOtp, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLNanoInputOtpElementEventMap>(type: K, listener: (this: HTMLNanoInputOtpElement, ev: NanoInputOtpCustomEvent<HTMLNanoInputOtpElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLNanoInputOtpElementEventMap>(type: K, listener: (this: HTMLNanoInputOtpElement, ev: NanoInputOtpCustomEvent<HTMLNanoInputOtpElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLNanoInputOtpElement: {
+        prototype: HTMLNanoInputOtpElement;
+        new (): HTMLNanoInputOtpElement;
+    };
     interface HTMLNanoIntersectionObserveElementEventMap {
         "nanoIntersectionChange": IntersectionObserverEntry;
         "nanoIntersecting": IntersectionObserverEntry;
@@ -4999,6 +5093,7 @@ declare global {
         "nano-in-page-nav": HTMLNanoInPageNavElement;
         "nano-increment": HTMLNanoIncrementElement;
         "nano-input": HTMLNanoInputElement;
+        "nano-input-otp": HTMLNanoInputOtpElement;
         "nano-intersection-observe": HTMLNanoIntersectionObserveElement;
         "nano-masked-overflow": HTMLNanoMaskedOverflowElement;
         "nano-menu": HTMLNanoMenuElement;
@@ -7241,6 +7336,83 @@ declare namespace LocalJSX {
          */
         "valueAsNumber"?: number;
     }
+    /**
+     * A component for entering one-time passwords (OTP) with multiple input fields.
+     * @version 8.7.2
+     * @status new
+     */
+    interface NanoInputOtp {
+        /**
+          * If `true`, allows the input to be completely filled with invalid values. By default, if any input box contains an invalid value, the entire input group is marked as invalid. Default is `false`.
+          * @default false
+         */
+        "allowInvalid"?: boolean;
+        /**
+          * If `true`, the user cannot interact with the input.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.  For numbers (type="number"): "numeric" For text (type="text"): "text"
+         */
+        "inputmode"?: | 'none'
+    | 'text'
+    | 'tel'
+    | 'url'
+    | 'email'
+    | 'numeric'
+    | 'decimal'
+    | 'search';
+        /**
+          * The number of input boxes to display.
+          * @default 6
+         */
+        "length"?: number;
+        /**
+          * Emitted when the input group loses focus.
+         */
+        "onNanoBlur"?: (event: NanoInputOtpCustomEvent<FocusEvent>) => void;
+        /**
+          * The `nanoChange` event is fired when the user modifies the input's value. Unlike the `nanoInput` event, the `nanoChange` event is only fired when changes are committed, not as the user types.  The `nanoChange` event fires when the `<nano-input-otp>` component loses focus after its value has changed.  This event will not emit when programmatically setting the `value` property.
+         */
+        "onNanoChange"?: (event: NanoInputOtpCustomEvent<InputOtpChangeEventDetail>) => void;
+        /**
+          * Emitted when all input boxes have been filled with valid values.
+         */
+        "onNanoComplete"?: (event: NanoInputOtpCustomEvent<InputOtpCompleteEventDetail>) => void;
+        /**
+          * Emitted when the input group has focus.
+         */
+        "onNanoFocus"?: (event: NanoInputOtpCustomEvent<FocusEvent>) => void;
+        /**
+          * The `nanoInput` event is fired each time the user modifies the input's value. Unlike the `nanoChange` event, the `nanoInput` event is fired for each alteration to the input's value. This typically happens for each keystroke as the user types.  For elements that accept text input (`type=text`, `type=tel`, etc.), the interface is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others, the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If the input is cleared on edit, the type is `null`.
+         */
+        "onNanoInput"?: (event: NanoInputOtpCustomEvent<InputOtpInputEventDetail>) => void;
+        /**
+          * A regex pattern string for allowed characters. Defaults based on type.  For numbers (`type="number"`): `"[\p{N}]"` For text (`type="text"`): `"[\p{L}\p{N}]"`
+         */
+        "pattern"?: string;
+        /**
+          * If `true`, the user cannot modify the value.
+          * @default false
+         */
+        "readonly"?: boolean;
+        /**
+          * If `true`, shows a validity icon when all input boxes are filled. A check icon is shown if all values are valid, and an X icon is shown if any value is invalid. This does not affect the `invalid` or `valid` states of the input group. Default is `false`.
+          * @default false
+         */
+        "showValidity"?: boolean;
+        /**
+          * The type of input allowed in the input boxes.
+          * @default 'number'
+         */
+        "type"?: 'text' | 'number';
+        /**
+          * The value of the input group.
+          * @default ''
+         */
+        "value"?: string | number | null;
+    }
     /**
      * A thin, declarative interface to the [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver).
      * @version 6.0.0
@@ -8562,6 +8734,7 @@ declare namespace LocalJSX {
         "nano-in-page-nav": NanoInPageNav;
         "nano-increment": NanoIncrement;
         "nano-input": NanoInput;
+        "nano-input-otp": NanoInputOtp;
         "nano-intersection-observe": NanoIntersectionObserve;
         "nano-masked-overflow": NanoMaskedOverflow;
         "nano-menu": NanoMenu;
@@ -8852,6 +9025,12 @@ declare module "@stencil/core" {
              * @version 1.0.0
              */
             "nano-input": LocalJSX.NanoInput & JSXBase.HTMLAttributes<HTMLNanoInputElement>;
+            /**
+             * A component for entering one-time passwords (OTP) with multiple input fields.
+             * @version 8.7.2
+             * @status new
+             */
+            "nano-input-otp": LocalJSX.NanoInputOtp & JSXBase.HTMLAttributes<HTMLNanoInputOtpElement>;
             /**
              * A thin, declarative interface to the [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver).
              * @version 6.0.0