@aquera/nile-elements 1.6.0 → 1.6.2

package/dist/src/nile-otp-input/nile-otp-input.css.js

@@ -0,0 +1,269 @@
+/**
+ * Copyright Aquera Inc 2026
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { css } from 'lit';
+/**
+ * OTP input CSS
+ */
+export const styles = css `
+  :host {
+    display: block;
+    --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing, antialiased));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing, grayscale));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering, optimizeLegibility));
+  }
+
+  .form-control {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nile-spacing-sm, var(--ng-spacing-1-5));
+    align-items: flex-start;
+  }
+
+  .form-control .form-control__label {
+    display: none;
+  }
+
+  .form-control--has-label .form-control__label {
+    display: inline-block;
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body ));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm ));
+    font-style: normal;
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-500 ));
+    line-height: var(--nile-type-scale-6, var(--ng-line-height-text-sm ));
+    letter-spacing: 0.2px;
+  }
+
+  :host([required]) .form-control--has-label .form-control__label::after {
+    content: '*';
+    margin-inline-start: -2px;
+    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
+  }
+
+  .otp {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-md, var(--ng-spacing-2));
+    width: fit-content;
+    max-width: 100%;
+  }
+
+  /* ---- Base cell ---- */
+
+  .otp__cell {
+    box-sizing: border-box;
+    width: var(--nile-spacing-5xl, var(--ng-spacing-10));
+    height: var(--nile-spacing-5xl, var(--ng-spacing-10));
+    min-height: var(--nile-spacing-5xl, var(--ng-spacing-10));
+    padding: var(--nile-spacing-xxs, var(--ng-spacing-0-5)) var(--nile-spacing-md, var(--ng-spacing-2));
+    border: 1px solid var(--nile-colors-border-field, var(--ng-colors-border-primary));
+    border-radius: var(--nile-radius-radius-2xl, var(--ng-radius-lg));
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs));
+    outline: var(--nile-outline-none, var(--ng-private-outline-transparent));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder-subtle));
+    text-align: center;
+    font-family: var(--nile-font-family, var(--ng-font-family-display));
+    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
+    font-style: normal;
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-500));
+    line-height: var(--nile-type-scale-4, var(--ng-line-height-text-md));
+    letter-spacing: 0.2px;
+    overflow: clip;
+    caret-color: transparent;
+    cursor: pointer;
+    transition: 150ms color, 150ms border, 150ms box-shadow, 150ms background-color, 150ms outline;
+  }
+
+  .otp__cell[type='password'] {
+    font-family: caption;
+    letter-spacing: 0;
+  }
+  /* ---- Hover (mirrors .input--standard:hover) ---- */
+
+  .otp:not(.otp--disabled):not(.otp--readonly) .otp__cell:hover {
+    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-neutral));
+  }
+
+  .otp--warning:not(.otp--disabled) .otp__cell:hover {
+    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-warning));
+  }
+
+  .otp--error:not(.otp--disabled) .otp__cell:hover {
+    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-error));
+  }
+
+  .otp--success:not(.otp--disabled) .otp__cell:hover {
+    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-success));
+  }
+
+  /* ---- Focus / active cell (mirrors .input--standard.input--focused) ---- */
+
+  .otp__cell:focus {
+    outline: none;
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-brand ));
+    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-1));
+  }
+
+  .otp__cell--active {
+    position: relative;
+    cursor: text;
+    caret-color: auto;
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary ));
+    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-brand ));
+    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-1));
+  }
+
+  .otp__cell--active::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 1px var(--nile-colors-primary-500, var(--ng-colors-border-brand));
+  }
+
+  .otp--warning .otp__cell:focus,
+  .otp--warning .otp__cell--active {
+    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-warning));
+    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-1));
+    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-warning));
+  }
+
+  .otp--warning .otp__cell--active::before {
+    box-shadow: inset 0 0 0 1px var(--nile-colors-yellow-500, var(--ng-colors-border-warning));
+  }
+
+  .otp--success .otp__cell:focus,
+  .otp--success .otp__cell--active {
+    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-success));
+    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-1));
+    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-success));
+  }
+
+  .otp--success .otp__cell--active::before {
+    box-shadow: inset 0 0 0 1px var(--nile-colors-green-500, var(--ng-colors-border-success));
+  }
+
+  .otp--error .otp__cell:focus,
+  .otp--error .otp__cell--active {
+    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-error));
+    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-1));
+    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-error));
+  }
+
+  .otp--error .otp__cell--active::before {
+    box-shadow: inset 0 0 0 1px var(--nile-colors-red-500, var(--ng-colors-border-error));
+  }
+
+  .otp__cell::selection {
+    background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-primary ));
+    color: var(--nile-colors-white-base, var(--ng-colors-fg-white));
+  }
+
+  .otp__cell::placeholder {
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder-subtle));
+    opacity: 0.9;
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-500));
+  }
+
+  /* ---- Separator ---- */
+
+  .otp__separator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder-subtle));
+    font-family: var(--nile-font-family, var(--ng-font-family-display ));
+    font-size: var(--nile-type-scale-7, var(--ng-font-size-text-xl));
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-500));
+    line-height: var(--nile-type-scale-7, var(--ng-line-height-text-xl));
+    user-select: none;
+  }
+
+  /* ---- State: warning ---- */
+
+  .otp--warning .otp__cell {
+    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning-subtle ));
+  }
+
+  /* ---- State: error ---- */
+
+  .otp--error .otp__cell {
+    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error-subtle ));
+  }
+
+  /* ---- State: success ---- */
+
+  .otp--success .otp__cell {
+    border-color: var(--nile-colors-green-500, var(--ng-colors-border-success-subtle));
+  }
+
+  /* ---- State: readonly ---- */
+
+  .otp--readonly .otp__cell {
+    cursor: default;
+  }
+
+  /* ---- State: disabled (mirrors .input--standard.input--disabled) ---- */
+
+  .otp--disabled .otp__cell {
+    cursor: not-allowed;
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled ));
+    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled ));
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-disabled-subtle ));
+  }
+
+  .otp--disabled .otp__cell::placeholder {
+    color: var(--nile-input-standard-disabled-placeholder-font-color, var(--ng-colors-text-disabled ));
+  }
+
+  /* ---- Hidden value input ---- */
+
+  .otp__value-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: -1;
+    pointer-events: none;
+  }
+
+  /* ---- Help text ---- */
+
+  .form-control__help-text {
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body ));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm ));
+    font-style: normal;
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400 ));
+    line-height: var(--nile-type-scale-2, var(--ng-line-height-text-sm ));
+    letter-spacing: 0.2px;
+  }
+
+  /* ---- Error message ---- */
+
+  .form-control__error-message {
+    display: block;
+    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
+    margin-top: var(--nile-spacing-lg, var(--ng-spacing-1-5 ));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm ));
+    font-style: normal;
+    line-height: var(--nile-form-error-text-line-height, var(--ng-line-height-text-sm));
+    letter-spacing: 0.2px;
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-otp-input.css.js.map

package/dist/src/nile-otp-input/nile-otp-input.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-otp-input.css.js","sourceRoot":"","sources":["../../../src/nile-otp-input/nile-otp-input.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgQxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2026\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * OTP input CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n    --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing, antialiased));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing, grayscale));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering, optimizeLegibility));\n  }\n\n  .form-control {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-sm, var(--ng-spacing-1-5));\n    align-items: flex-start;\n  }\n\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control--has-label .form-control__label {\n    display: inline-block;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body ));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm ));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-500 ));\n    line-height: var(--nile-type-scale-6, var(--ng-line-height-text-sm ));\n    letter-spacing: 0.2px;\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n  }\n\n  .otp {\n    position: relative;\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-md, var(--ng-spacing-2));\n    width: fit-content;\n    max-width: 100%;\n  }\n\n  /* ---- Base cell ---- */\n\n  .otp__cell {\n    box-sizing: border-box;\n    width: var(--nile-spacing-5xl, var(--ng-spacing-10));\n    height: var(--nile-spacing-5xl, var(--ng-spacing-10));\n    min-height: var(--nile-spacing-5xl, var(--ng-spacing-10));\n    padding: var(--nile-spacing-xxs, var(--ng-spacing-0-5)) var(--nile-spacing-md, var(--ng-spacing-2));\n    border: 1px solid var(--nile-colors-border-field, var(--ng-colors-border-primary));\n    border-radius: var(--nile-radius-radius-2xl, var(--ng-radius-lg));\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs));\n    outline: var(--nile-outline-none, var(--ng-private-outline-transparent));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder-subtle));\n    text-align: center;\n    font-family: var(--nile-font-family, var(--ng-font-family-display));\n    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-500));\n    line-height: var(--nile-type-scale-4, var(--ng-line-height-text-md));\n    letter-spacing: 0.2px;\n    overflow: clip;\n    caret-color: transparent;\n    cursor: pointer;\n    transition: 150ms color, 150ms border, 150ms box-shadow, 150ms background-color, 150ms outline;\n  }\n\n  .otp__cell[type='password'] {\n    font-family: caption;\n    letter-spacing: 0;\n  }\n  /* ---- Hover (mirrors .input--standard:hover) ---- */\n\n  .otp:not(.otp--disabled):not(.otp--readonly) .otp__cell:hover {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-neutral));\n  }\n\n  .otp--warning:not(.otp--disabled) .otp__cell:hover {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-warning));\n  }\n\n  .otp--error:not(.otp--disabled) .otp__cell:hover {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-error));\n  }\n\n  .otp--success:not(.otp--disabled) .otp__cell:hover {\n    border-color: var(--nile-colors-dark-900, var(--ng-colors-border-success));\n  }\n\n  /* ---- Focus / active cell (mirrors .input--standard.input--focused) ---- */\n\n  .otp__cell:focus {\n    outline: none;\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-brand ));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-1));\n  }\n\n  .otp__cell--active {\n    position: relative;\n    cursor: text;\n    caret-color: auto;\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary ));\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-brand ));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-1));\n  }\n\n  .otp__cell--active::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    border-radius: inherit;\n    box-shadow: inset 0 0 0 1px var(--nile-colors-primary-500, var(--ng-colors-border-brand));\n  }\n\n  .otp--warning .otp__cell:focus,\n  .otp--warning .otp__cell--active {\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-warning));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-1));\n    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-warning));\n  }\n\n  .otp--warning .otp__cell--active::before {\n    box-shadow: inset 0 0 0 1px var(--nile-colors-yellow-500, var(--ng-colors-border-warning));\n  }\n\n  .otp--success .otp__cell:focus,\n  .otp--success .otp__cell--active {\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-success));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-1));\n    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-success));\n  }\n\n  .otp--success .otp__cell--active::before {\n    box-shadow: inset 0 0 0 1px var(--nile-colors-green-500, var(--ng-colors-border-success));\n  }\n\n  .otp--error .otp__cell:focus,\n  .otp--error .otp__cell--active {\n    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-error));\n    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-1));\n    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-error));\n  }\n\n  .otp--error .otp__cell--active::before {\n    box-shadow: inset 0 0 0 1px var(--nile-colors-red-500, var(--ng-colors-border-error));\n  }\n\n  .otp__cell::selection {\n    background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-primary ));\n    color: var(--nile-colors-white-base, var(--ng-colors-fg-white));\n  }\n\n  .otp__cell::placeholder {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder-subtle));\n    opacity: 0.9;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-500));\n  }\n\n  /* ---- Separator ---- */\n\n  .otp__separator {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder-subtle));\n    font-family: var(--nile-font-family, var(--ng-font-family-display ));\n    font-size: var(--nile-type-scale-7, var(--ng-font-size-text-xl));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-500));\n    line-height: var(--nile-type-scale-7, var(--ng-line-height-text-xl));\n    user-select: none;\n  }\n\n  /* ---- State: warning ---- */\n\n  .otp--warning .otp__cell {\n    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning-subtle ));\n  }\n\n  /* ---- State: error ---- */\n\n  .otp--error .otp__cell {\n    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error-subtle ));\n  }\n\n  /* ---- State: success ---- */\n\n  .otp--success .otp__cell {\n    border-color: var(--nile-colors-green-500, var(--ng-colors-border-success-subtle));\n  }\n\n  /* ---- State: readonly ---- */\n\n  .otp--readonly .otp__cell {\n    cursor: default;\n  }\n\n  /* ---- State: disabled (mirrors .input--standard.input--disabled) ---- */\n\n  .otp--disabled .otp__cell {\n    cursor: not-allowed;\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled ));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled ));\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-disabled-subtle ));\n  }\n\n  .otp--disabled .otp__cell::placeholder {\n    color: var(--nile-input-standard-disabled-placeholder-font-color, var(--ng-colors-text-disabled ));\n  }\n\n  /* ---- Hidden value input ---- */\n\n  .otp__value-input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    z-index: -1;\n    pointer-events: none;\n  }\n\n  /* ---- Help text ---- */\n\n  .form-control__help-text {\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body ));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm ));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400 ));\n    line-height: var(--nile-type-scale-2, var(--ng-line-height-text-sm ));\n    letter-spacing: 0.2px;\n  }\n\n  /* ---- Error message ---- */\n\n  .form-control__error-message {\n    display: block;\n    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n    margin-top: var(--nile-spacing-lg, var(--ng-spacing-1-5 ));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm ));\n    font-style: normal;\n    line-height: var(--nile-form-error-text-line-height, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-otp-input/nile-otp-input.d.ts

@@ -0,0 +1,156 @@
+/**
+ * Copyright Aquera Inc 2026
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import NileElement from '../internal/nile-element';
+import type { CSSResultGroup } from 'lit';
+import type { NileFormControl } from '../internal/nile-element';
+import '../nile-form-help-text';
+import '../nile-form-error-message';
+/**
+ * @summary OTP input renders a segmented set of cells but behaves like a single logical form control.
+ * @tag nile-otp-input
+ *
+ * @slot label - The input label. Alternatively, use the `label` attribute.
+ * @slot help-text - Helpful guidance text. Alternatively, use the `help-text` attribute.
+ *
+ * @event nile-input - Emitted whenever the OTP value changes from user input.
+ * @event nile-change - Emitted whenever the OTP value changes from user input.
+ * @event nile-complete - Emitted when all OTP cells are filled.
+ * @event nile-focus - Emitted when focus enters the component.
+ * @event nile-blur - Emitted when focus leaves the component.
+ * @event nile-paste - Emitted when OTP text is pasted.
+ * @event nile-invalid - Emitted when the control is invalid.
+ *
+ * @csspart form-control - Wrapper for label, input, and help/error content.
+ * @csspart form-control-label - Label wrapper.
+ * @csspart form-control-input - Input wrapper.
+ * @csspart form-control-help-text - Help text wrapper.
+ * @csspart form-control-error-message - Error message wrapper.
+ * @csspart base - OTP cell container.
+ * @csspart cell - Individual OTP cell.
+ * @csspart separator - Separator element between cell groups.
+ */
+export declare class NileOtpInput extends NileElement implements NileFormControl {
+    static styles: CSSResultGroup;
+    private readonly formControlController;
+    private readonly hasSlotController;
+    private customValidationMessage;
+    private wasComplete;
+    valueInput: HTMLInputElement;
+    cellInputs: NodeListOf<HTMLInputElement>;
+    private hasFocus;
+    private activeIndex;
+    private cells;
+    /** The name of the input, submitted as a name/value pair with form data. */
+    name: string;
+    /** The current value of the OTP control. */
+    value: string;
+    /** The default value of the form control. Primarily used for resetting the form control. */
+    defaultValue: string;
+    /** Number of OTP cells. Values below 4 are clamped to 4. */
+    length: number;
+    /** Restricts input to numeric digits when true. Overridden by `alphanumeric`. */
+    numericOnly: boolean;
+    /** Allows both letters and digits. When present, overrides `numeric-only`. */
+    alphanumeric: boolean;
+    /** The input's label. */
+    label: string;
+    helpText: string;
+    errorMessage: string;
+    /** Placeholder shown inside each OTP cell. */
+    placeholder: string;
+    /** Optional separator text rendered between configured OTP groups (for example "-"). */
+    separator: string;
+    /** Renders a separator after each N cells when `separator` is set. */
+    separatorEvery: number;
+    /** Comma-separated zero-based cell indexes after which separators are rendered. */
+    separatorPositions: string;
+    /** Masks filled cells with dots, showing each character briefly while typing. */
+    masked: boolean;
+    /** Sets the input to a warning state, changing its visual appearance. */
+    warning: boolean;
+    /** Sets the input to an error state, changing its visual appearance. */
+    error: boolean;
+    /** Sets the input to a success state, changing its visual appearance. */
+    success: boolean;
+    /** Disables the control. */
+    disabled: boolean;
+    /** Makes the control readonly. */
+    readonly: boolean;
+    /**
+     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+     * to place the form control outside of a form and associate it with the form that has this `id`.
+     */
+    form: string;
+    /** Makes this field required. */
+    required: boolean;
+    /** Optional regex pattern for full OTP validation. */
+    pattern: string;
+    /** Indicates that the input should receive focus on page load. */
+    autofocus: boolean;
+    /** Controls keyboard type shown on supporting virtual keyboards. */
+    inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    /** The autocomplete mode used on the first OTP cell. */
+    autocomplete: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    /** Gets the validity state object. */
+    get validity(): ValidityState;
+    /** Gets the validation message. */
+    get validationMessage(): string;
+    /** Returns true when all OTP cells have values. */
+    get complete(): boolean;
+    private getNormalizedLength;
+    private isNumericMode;
+    private getResolvedInputMode;
+    private getValidationPattern;
+    private isAllowedCharacter;
+    private toOtpCharacters;
+    private normalizeValue;
+    private createCells;
+    private syncCellsFromValue;
+    private isComplete;
+    private getFirstEmptyIndex;
+    private getSeparatorIndices;
+    private getCellPlaceholder;
+    private focusCell;
+    private updateCell;
+    private fillFromIndex;
+    private commitUserValueUpdate;
+    private handleInvalid;
+    private handleCellFocus;
+    private handleCellBlur;
+    private handleCellInput;
+    private handleCellPaste;
+    private handleCellKeyDown;
+    handleLengthChange(): void;
+    handleValueChange(): void;
+    handleDisabledChange(): void;
+    handleNumericOnlyChange(): void;
+    handlePatternChange(): void;
+    /** Checks validity without showing browser UI. */
+    checkValidity(): boolean;
+    /** Returns associated form if one exists. */
+    getForm(): HTMLFormElement | null;
+    /** Checks validity and shows browser UI when invalid. */
+    reportValidity(): boolean;
+    /** Sets a custom validation message. Pass empty string to restore validity. */
+    setCustomValidity(message: string): void;
+    /** Focuses the first empty cell, or the last one when complete. */
+    focus(options?: FocusOptions): void;
+    /** Removes focus from whichever OTP cell is currently focused. */
+    blur(): void;
+    /** Clears all OTP cells. */
+    clear(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export default NileOtpInput;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-otp-input': NileOtpInput;
+    }
+}

package/dist/src/nile-otp-input/nile-otp-input.enum.d.ts

@@ -0,0 +1,26 @@
+export declare enum OtpInputMode {
+    NONE = "none",
+    TEXT = "text",
+    DECIMAL = "decimal",
+    NUMERIC = "numeric",
+    TEL = "tel",
+    SEARCH = "search",
+    EMAIL = "email",
+    URL = "url"
+}
+export declare enum OtpInputType {
+    TEXT = "text",
+    PASSWORD = "password"
+}
+export declare enum OtpEnterKeyHint {
+    DONE = "done",
+    NEXT = "next"
+}
+export declare enum OtpAutoComplete {
+    ONE_TIME_CODE = "one-time-code",
+    OFF = "off"
+}
+export declare enum OtpCellPattern {
+    NUMERIC = "[0-9]*",
+    ALPHANUMERIC = "[A-Za-z0-9]*"
+}

package/dist/src/nile-otp-input/nile-otp-input.enum.js

@@ -0,0 +1,32 @@
+export var OtpInputMode;
+(function (OtpInputMode) {
+    OtpInputMode["NONE"] = "none";
+    OtpInputMode["TEXT"] = "text";
+    OtpInputMode["DECIMAL"] = "decimal";
+    OtpInputMode["NUMERIC"] = "numeric";
+    OtpInputMode["TEL"] = "tel";
+    OtpInputMode["SEARCH"] = "search";
+    OtpInputMode["EMAIL"] = "email";
+    OtpInputMode["URL"] = "url";
+})(OtpInputMode || (OtpInputMode = {}));
+export var OtpInputType;
+(function (OtpInputType) {
+    OtpInputType["TEXT"] = "text";
+    OtpInputType["PASSWORD"] = "password";
+})(OtpInputType || (OtpInputType = {}));
+export var OtpEnterKeyHint;
+(function (OtpEnterKeyHint) {
+    OtpEnterKeyHint["DONE"] = "done";
+    OtpEnterKeyHint["NEXT"] = "next";
+})(OtpEnterKeyHint || (OtpEnterKeyHint = {}));
+export var OtpAutoComplete;
+(function (OtpAutoComplete) {
+    OtpAutoComplete["ONE_TIME_CODE"] = "one-time-code";
+    OtpAutoComplete["OFF"] = "off";
+})(OtpAutoComplete || (OtpAutoComplete = {}));
+export var OtpCellPattern;
+(function (OtpCellPattern) {
+    OtpCellPattern["NUMERIC"] = "[0-9]*";
+    OtpCellPattern["ALPHANUMERIC"] = "[A-Za-z0-9]*";
+})(OtpCellPattern || (OtpCellPattern = {}));
+//# sourceMappingURL=nile-otp-input.enum.js.map

package/dist/src/nile-otp-input/nile-otp-input.enum.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-otp-input.enum.js","sourceRoot":"","sources":["../../../src/nile-otp-input/nile-otp-input.enum.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,YASX;AATD,WAAY,YAAY;IACtB,6BAAa,CAAA;IACb,6BAAa,CAAA;IACb,mCAAmB,CAAA;IACnB,mCAAmB,CAAA;IACnB,2BAAW,CAAA;IACX,iCAAiB,CAAA;IACjB,+BAAe,CAAA;IACf,2BAAW,CAAA;AACb,CAAC,EATW,YAAY,KAAZ,YAAY,QASvB;AAED,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACtB,6BAAa,CAAA;IACb,qCAAqB,CAAA;AACvB,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB;AAED,MAAM,CAAN,IAAY,eAGX;AAHD,WAAY,eAAe;IACzB,gCAAa,CAAA;IACb,gCAAa,CAAA;AACf,CAAC,EAHW,eAAe,KAAf,eAAe,QAG1B;AAED,MAAM,CAAN,IAAY,eAGX;AAHD,WAAY,eAAe;IACzB,kDAA+B,CAAA;IAC/B,8BAAW,CAAA;AACb,CAAC,EAHW,eAAe,KAAf,eAAe,QAG1B;AAED,MAAM,CAAN,IAAY,cAGX;AAHD,WAAY,cAAc;IACxB,oCAAkB,CAAA;IAClB,+CAA6B,CAAA;AAC/B,CAAC,EAHW,cAAc,KAAd,cAAc,QAGzB","sourcesContent":["export enum OtpInputMode {\n  NONE = 'none',\n  TEXT = 'text',\n  DECIMAL = 'decimal',\n  NUMERIC = 'numeric',\n  TEL = 'tel',\n  SEARCH = 'search',\n  EMAIL = 'email',\n  URL = 'url',\n}\n\nexport enum OtpInputType {\n  TEXT = 'text',\n  PASSWORD = 'password',\n}\n\nexport enum OtpEnterKeyHint {\n  DONE = 'done',\n  NEXT = 'next',\n}\n\nexport enum OtpAutoComplete {\n  ONE_TIME_CODE = 'one-time-code',\n  OFF = 'off',\n}\n\nexport enum OtpCellPattern {\n  NUMERIC = '[0-9]*',\n  ALPHANUMERIC = '[A-Za-z0-9]*',\n}\n"]}