@aquera/nile-elements 1.6.1 → 1.6.2

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -13,6 +13,7 @@
     "./nile-heading": "./dist/src/nile-heading/index.js",
     "./nile-icon": "./dist/src/nile-icon/index.js",
     "./nile-input": "./dist/src/nile-input/index.js",
+    "./nile-otp-input": "./dist/src/nile-otp-input/index.js",
     "./nile-sidebar": "./dist/src/nile-sidebar/index.js",
     "./nile-menu": "./dist/src/nile-menu/index.js",
     "./nile-badge": "./dist/src/nile-badge/index.js",

package/plop-templates/lit/index.ts.hbs

@@ -1,5 +1,5 @@
 /**
-* Copyright Aquera Inc 2025
+* 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.

package/plop-templates/lit/lit.css.ts.hbs

@@ -1,5 +1,5 @@
 /**
-* Copyright Aquera Inc 2025
+* 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.

package/plop-templates/lit/lit.ts.hbs

@@ -1,5 +1,5 @@
 /**
- * Copyright Aquera Inc 2025
+ * 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.

package/src/index.ts

@@ -2,6 +2,7 @@ export { NileButton } from './nile-button';
 export { NileHeading } from './nile-heading';
 export { NileIcon } from './nile-icon';
 export { NileInput } from './nile-input';
+export { NileOtpInput } from './nile-otp-input';
 export { NileMenu } from './nile-menu';
 export { NileBadge } from './nile-badge';
 export { NileDrawer } from './nile-drawer';
@@ -114,4 +115,4 @@ export { NileliteTooltip } from './nile-lite-tooltip';
 export { NileSideBarPanel } from './nile-side-bar-panel';
 export { NileDetail } from './nile-detail';
 export { NileQrCode } from './nile-qr-code';
-export { NileFloatingPanel } from './nile-floating-panel';
+export { NileFloatingPanel } from './nile-floating-panel';

package/src/internal/enum.ts

@@ -5,7 +5,8 @@ export const KeyCode = {
   SHIFT: 'ShiftLeft', // or 'ShiftRight'
   CTRL: 'ControlLeft', // or 'ControlRight'
   ESCAPE: 'Escape',
-  SPACE: 'Space',
+  SPACE: ' ',
+  DELETE: 'Delete',
   PAGE_UP: 'PageUp',
   PAGE_DOWN: 'PageDown',
   END: 'End',
@@ -18,3 +19,24 @@ export const KeyCode = {
   COPY: 'Copy',
   PASTE: 'Paste',
 };
+
+export enum Nile_Events {
+  NILE_INIT = "nile-init",
+  NILE_CHANGE = "nile-change",
+  NILE_DESTROY = "nile-destroy", 
+  NILE_PASTE = "nile-paste",
+  NILE_CUT = "nile-cut",
+  NILE_COPY = "nile-copy",
+  NILE_SELECT_ALL = "nile-select-all",
+  NILE_FOCUS = "nile-focus",
+  NILE_BLUR = "nile-blur",
+  NILE_INVALID = "nile-invalid",
+  NILE_VALID = "nile-valid",
+  NILE_RESET = "nile-reset",
+  NILE_CLEAR = "nile-clear",
+  NILE_CLEAR_ALL = "nile-clear-all",
+  NILE_CLEAR_SELECTION = "nile-clear-selection",
+  NILE_CLEAR_ALL_SELECTION = "nile-clear-all-selection",
+  NILE_INPUT = "nile-input",
+  NILE_COMPLETE = "nile-complete",
+}

package/src/nile-floating-panel/nile-floating-panel.ts

@@ -151,6 +151,9 @@ export class NileFloatingPanel extends NileElement {
   /** Close the panel when Escape is pressed. */
   @property({ type: Boolean, reflect: true }) closeOnEscape = true;
 
+  /** Custom CSS class(es) added to the Tippy popper element, allowing per-instance styling from the host. */
+  @property({ type: String, reflect: true, attribute: true}) panelClass: string = '';
+
   // ─── Visibility manager props ───
 
   @property({ type: Boolean, reflect: true }) enableVisibilityEffect = false;
@@ -240,6 +243,7 @@ export class NileFloatingPanel extends NileElement {
       'animation', 'duration', 'delay', 'interactive', 'interactiveBorder',
       'maxWidth', 'zIndex', 'followCursor', 'hideOnClick', 'inertia',
       'allowHTML', 'flip', 'preventOverlayClose', 'disabled', 'width', 'height',
+      'panelClass'
     ];
 
     if (rebuildProps.some(p => changed.has(p))) {
@@ -527,8 +531,13 @@ export class NileFloatingPanel extends NileElement {
       popperOptions: {
         modifiers: [{ name: 'flip', enabled: this.flip }],
       },
-      onMount: () => {
+      onMount: (instance) => {
         if (this.panelContainer) this.panelContainer.style.display = '';
+        if (this.panelClass) {
+          this.panelClass.split(/\s+/).filter(Boolean).forEach(cls => {
+            instance.popper.classList.add(cls);
+          });
+        }
       },
       onShow: (instance) => {
         if (this.panelContainer) this.panelContainer.style.display = '';

package/src/nile-icon/icons/svg/folder_delete.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEuNzUgMi40NTcxNFYxMC43ODU3QzEuNzUgMTAuOTg2NSAxLjgyOTAyIDExLjE3OTEgMS45Njk2NyAxMS4zMjExQzIuMTEwMzIgMTEuNDYzMSAyLjMwMTA5IDExLjU0MjkgMi41IDExLjU0MjlIMy41VjEyLjNIMi41QzIuMTAyMTggMTIuMyAxLjcyMDY0IDEyLjE0MDUgMS40MzkzNCAxMS44NTY1QzEuMTU4MDQgMTEuNTcyNSAxIDExLjE4NzMgMSAxMC43ODU3VjEuN0g1LjMyNTY5TDYuODI1NjkgMy45NzE0M0gxM1YxMC43ODU3QzEzIDExLjE4NzMgMTIuODQyIDExLjU3MjUgMTIuNTYwNyAxMS44NTY1QzEyLjI3OTQgMTIuMTQwNSAxMS44OTc4IDEyLjMgMTEuNSAxMi4zSDEwLjVWMTEuNTQyOUgxMS41QzExLjY5ODkgMTEuNTQyOSAxMS44ODk3IDExLjQ2MzEgMTIuMDMwMyAxMS4zMjExQzEyLjE3MSAxMS4xNzkxIDEyLjI1IDEwLjk4NjUgMTIuMjUgMTAuNzg1N1Y0LjcyODU3SDYuNDI0MzFMNC45MjQzMSAyLjQ1NzE0SDEuNzVaIiBmaWxsPSJibGFjayIvPjxwYXRoIGQ9Ik05Ljc4MzIgNi4zMzY5MUw3LjYxOTE0IDguNUw5Ljc4MzIgMTAuNjYzMUw5LjE2MzA5IDExLjI4MzJMNyA5LjExOTE0TDQuODM2OTEgMTEuMjgzMkw0LjIxNjggMTAuNjYzMUw2LjM3OTg4IDguNUw0LjIxNjggNi4zMzY5MUw0LjgzNjkxIDUuNzE2NzlMNyA3Ljg3OTg4TDkuMTYzMDkgNS43MTY3OUw5Ljc4MzIgNi4zMzY5MVoiIGZpbGw9ImJsYWNrIi8+PC9zdmc+";

package/src/nile-icon/icons/svg/index.ts

@@ -173,6 +173,7 @@ export { default as flowmapundo } from './flowmap-undo';
 export { default as flowmapworkflow } from './flowmap-workflow';
 export { default as flowmap } from './flowmap';
 export { default as folder } from './folder';
+export { default as folder_delete } from './folder_delete';
 export { default as foreach } from './foreach';
 export { default as format_align_justify } from './format_align_justify';
 export { default as format_align_left } from './format_align_left';

package/src/nile-icon/icons/svg/layers-three-02.ts

@@ -2,4 +2,4 @@
  * Do not edit directly
  */
 
-export default "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJub25lIj48cGF0aCAgICBkPSJNMS4zMzU5NCA4LjAwMDM3ICAgICAgIEw3Ljc2NDA5IDExLjIxNDQgICAgICAgQzcuODUxNTUgMTEuMjU4MiA3Ljg5NTI3IDExLjI4IDcuOTQxMTQgMTEuMjg4NiAgICAgICAgIDcuOTgxNzYgMTEuMjk2MyA4LjAyMzQ1IDExLjI5NjMgOC4wNjQwNyAxMS4yODg2ICAgICAgICAgOC4xMDk5NCAxMS4yOCA4LjE1MzY2IDExLjI1ODIgOC4yNDExMiAxMS4yMTQ0ICAgICAgIEwxNC42NjkzIDguMDAwMzcgICAgICAgTTEuMzM1OTQgMTEuMzMzNyAgICAgICBMNy43NjQwOSAxNC41NDc4ICAgICAgIEM3Ljg1MTU1IDE0LjU5MTUgNy44OTUyNyAxNC42MTM0IDcuOTQxMTQgMTQuNjIyICAgICAgICAgNy45ODE3NiAxNC42Mjk2IDguMDIzNDUgMTQuNjI5NiA4LjA2NDA3IDE0LjYyMiAgICAgICAgIDguMTA5OTQgMTQuNjEzNCA4LjE1MzY2IDE0LjU5MTUgOC4yNDExMiAxNC41NDc4ICAgICAgIEwxNC42NjkzIDExLjMzMzcgICAgICAgTTEuMzM1OTQgNC42NjcwNCAgICAgICBMNy43NjQwOSAxLjQ1Mjk2ICAgICAgIEM3Ljg1MTU1IDEuNDA5MjMgNy44OTUyNyAxLjM4NzM3IDcuOTQxMTQgMS4zNzg3NiAgICAgICAgIDcuOTgxNzYgMS4zNzExNCA4LjAyMzQ1IDEuMzcxMTQgOC4wNjQwNyAxLjM3ODc2ICAgICAgICAgOC4xMDk5NCAxLjM4NzM3IDguMTUzNjYgMS40MDkyMyA4LjI0MTEyIDEuNDUyOTYgICAgICAgTDE0LjY2OTMgNC42NjcwNCAgICAgICBMOC4yNDExMiA3Ljg4MTExICAgICAgIEM4LjE1MzY2IDcuOTI0ODQgOC4xMDk5NCA3Ljk0NjcgOC4wNjQwNyA3Ljk1NTMxICAgICAgICAgOC4wMjM0NSA3Ljk2MjkzIDcuOTgxNzYgNy45NjI5MyA3Ljk0MTE0IDcuOTU1MzEgICAgICAgICA3Ljg5NTI3IDcuOTQ2NyA3Ljg1MTU1IDcuOTI0ODQgNy43NjQwOSA3Ljg4MTExICAgICAgIEwxLjMzNTk0IDQuNjY3MDQgICAgICAgWiIgICAgc3Ryb2tlPSIjMzQ0MDU0IiAgICBzdHJva2Utd2lkdGg9IjEuNiIgICAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiAgICBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+";
+export default "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj48cGF0aCBkPSJNNy4yMDEyOSAxLjEwNTM0TDEzIDQuMTUzNzFMNyA3LjcwMTA2TDEuNzM5MjMgNC41ODk4NUwxIDQuMTUzNzFMNi43OTg3MSAxLjEwNTM0TDcgMUw3LjIwMTI5IDEuMTA1MzRaTTIuOTE4ODQgNC4yMDE3Nkw3IDYuNjE1MzNMMTEuMDgxMiA0LjIwMTc2TDcgMi4wNTcwOUwyLjkxODg0IDQuMjAxNzZaIiBmaWxsPSJibGFjayIvPjxwYXRoIGQ9Ik0xMi42NTM3IDcuMDA3NDhMNyAxMC4zNTA2TDEuMzQ3MiA3LjAwNzQ4TDEuNzg4NDYgNi4xODMyNUw3IDkuMjYzOTZMMTIuMjEyNCA2LjE4MzI1TDEyLjY1MzcgNy4wMDc0OFoiIGZpbGw9ImJsYWNrIi8+PHBhdGggZD0iTTEyLjY1MzcgOS42NTY4Nkw3IDEzTDEuMzQ3MiA5LjY1Njg2TDEuNzg4NDYgOC44MzI2M0w3IDExLjkxMzNMMTIuMjEyNCA4LjgzMjYzTDEyLjY1MzcgOS42NTY4NloiIGZpbGw9ImJsYWNrIi8+PC9zdmc+";

package/src/nile-otp-input/index.ts

@@ -0,0 +1 @@
+export { NileOtpInput } from './nile-otp-input';

package/src/nile-otp-input/nile-otp-input.css.ts

@@ -0,0 +1,271 @@
+/**
+ * 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];

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

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