@aquera/nile-elements 1.7.4 → 1.7.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -0
- package/dist/index.js +2 -2
- package/dist/nile-otp-input/nile-otp-input.css.cjs.js +1 -1
- package/dist/nile-otp-input/nile-otp-input.css.cjs.js.map +1 -1
- package/dist/nile-otp-input/nile-otp-input.css.esm.js +1 -1
- package/dist/src/nile-otp-input/nile-otp-input.css.js +1 -1
- package/dist/src/nile-otp-input/nile-otp-input.css.js.map +1 -1
- package/dist/src/version.js +1 -1
- package/dist/src/version.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-otp-input/nile-otp-input.css.ts +1 -1
package/README.md
CHANGED
|
@@ -79,6 +79,13 @@ To run a local development server that serves the basic demo located in `demo/in
|
|
|
79
79
|
|
|
80
80
|
In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
|
|
81
81
|
|
|
82
|
+
#### Version 1.7.5 (May 18, 2026)
|
|
83
|
+
- Nile OTP Input: Fixed Value Color for NxtGen (UIF-1228)
|
|
84
|
+
|
|
85
|
+
#### Version 1.7.4 (May 18, 2026)
|
|
86
|
+
- Nile Detal: Added Selection Variant (UIF-1226)
|
|
87
|
+
- Nile Inline Sidebar: Added border-radius and font-family to the rich variant (UIF-1227)
|
|
88
|
+
|
|
82
89
|
#### Version 1.7.3 (May 07, 2026)
|
|
83
90
|
- Nile Combobox: Added Grouping Feature in Nile Combobox (UIF-1216)
|
|
84
91
|
- Nile BreadCrumb: Cursor does not change to pointer and higlight on hover of breadcrumb (UIF-1214)
|
package/dist/index.js
CHANGED
|
@@ -1937,7 +1937,7 @@ const ze=1,ye=2,Te=3,pe=4,Ae=e=>(...t)=>({_$litDirective$:e,values:t});let Oe=cl
|
|
|
1937
1937
|
background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
|
|
1938
1938
|
box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs));
|
|
1939
1939
|
outline: var(--nile-outline-none, var(--ng-private-outline-transparent));
|
|
1940
|
-
color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder
|
|
1940
|
+
color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder));
|
|
1941
1941
|
text-align: center;
|
|
1942
1942
|
font-family: var(--nile-font-family, var(--ng-font-family-display));
|
|
1943
1943
|
font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
|
|
@@ -17544,7 +17544,7 @@ nile-rich-text-editor[disabled] .editor a {
|
|
|
17544
17544
|
</span>
|
|
17545
17545
|
`:B}
|
|
17546
17546
|
</button>
|
|
17547
|
-
`}};e([ue({type:String,reflect:!0})],GS.prototype,"color",void 0),e([ue({type:Boolean,reflect:!0})],GS.prototype,"active",void 0),GS=e([ge("nile-color-swatch")],GS);"undefined"!=typeof window&&(window.nileElementsVersion='"1.7.
|
|
17547
|
+
`}};e([ue({type:String,reflect:!0})],GS.prototype,"color",void 0),e([ue({type:Boolean,reflect:!0})],GS.prototype,"active",void 0),GS=e([ge("nile-color-swatch")],GS);"undefined"!=typeof window&&(window.nileElementsVersion='"1.7.5"',window.nileVersion="__NILE_VERSION__",window.process=window.process||{env:{NODE_ENV:"production"}});const FS=r`
|
|
17548
17548
|
:host {
|
|
17549
17549
|
|
|
17550
17550
|
top: 0;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,o;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",o=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\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"]))));}};});
|
|
1
|
+
System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,o;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",o=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\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));\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"]))));}};});
|
|
2
2
|
//# sourceMappingURL=nile-otp-input.css.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-otp-input.css.cjs.js","sources":["../../../src/nile-otp-input/nile-otp-input.css.ts"],"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"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
|
|
1
|
+
{"version":3,"file":"nile-otp-input.css.cjs.js","sources":["../../../src/nile-otp-input/nile-otp-input.css.ts"],"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));\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"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
|
|
@@ -57,7 +57,7 @@ import{css as r}from"lit";const o=r`
|
|
|
57
57
|
background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
|
|
58
58
|
box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs));
|
|
59
59
|
outline: var(--nile-outline-none, var(--ng-private-outline-transparent));
|
|
60
|
-
color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder
|
|
60
|
+
color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder));
|
|
61
61
|
text-align: center;
|
|
62
62
|
font-family: var(--nile-font-family, var(--ng-font-family-display));
|
|
63
63
|
font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
|
|
@@ -67,7 +67,7 @@ export const styles = css `
|
|
|
67
67
|
background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
|
|
68
68
|
box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs));
|
|
69
69
|
outline: var(--nile-outline-none, var(--ng-private-outline-transparent));
|
|
70
|
-
color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder
|
|
70
|
+
color: var(--nile-colors-dark-500, var(--ng-colors-text-placeholder));
|
|
71
71
|
text-align: center;
|
|
72
72
|
font-family: var(--nile-font-family, var(--ng-font-family-display));
|
|
73
73
|
font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
|
|
@@ -1 +1 @@
|
|
|
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"]}
|
|
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));\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/version.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// Version utility - placeholders will be replaced during build
|
|
2
|
-
export const NILE_ELEMENTS_VERSION = '1.7.
|
|
2
|
+
export const NILE_ELEMENTS_VERSION = '1.7.5';
|
|
3
3
|
export const NILE_VERSION = '1.2.4';
|
|
4
4
|
// Set global versions for runtime access
|
|
5
5
|
if (typeof window !== 'undefined') {
|
package/dist/src/version.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,qBAAqB,GAAG,2BAA2B,CAAC;AACjE,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAE/C,yCAAyC;AACzC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IACjC,MAAc,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;IAC3D,MAAc,CAAC,WAAW,GAAG,YAAY,CAAC;IAC3C,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,CAAC;AACzE,CAAC","sourcesContent":["// Version utility - placeholders will be replaced during build\nexport const NILE_ELEMENTS_VERSION = '1.7.
|
|
1
|
+
{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,qBAAqB,GAAG,2BAA2B,CAAC;AACjE,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAE/C,yCAAyC;AACzC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IACjC,MAAc,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;IAC3D,MAAc,CAAC,WAAW,GAAG,YAAY,CAAC;IAC3C,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,CAAC;AACzE,CAAC","sourcesContent":["// Version utility - placeholders will be replaced during build\nexport const NILE_ELEMENTS_VERSION = '1.7.5';\nexport const NILE_VERSION = '1.2.4';\n\n// Set global versions for runtime access\nif (typeof window !== 'undefined') {\n (window as any).nileElementsVersion = NILE_ELEMENTS_VERSION;\n (window as any).nileVersion = NILE_VERSION;\n window.process = window.process || { env: { NODE_ENV: 'production' } };\n}\n"]}
|