@aquera/nile-elements 1.6.1 → 1.6.3

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]*',
+}