@t007/input 0.0.4 → 0.0.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 OLUWATOBILOBA OKETADE
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,241 @@
+# @t007/input
+
+> An advanced, highly customizable, and fully automated vanilla JavaScript form management system. Features floating labels, automatic validation, mutation observing, and native file-size enforcement.
+
+[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
+[![NPM Version](https://img.shields.io/npm/v/@t007/input.svg)](https://www.npmjs.com/package/@t007/input)
+
+[Live Demo](https://tobi007-del.github.io/t007-tools/packages/input/src/index.html) | [Report Bug](https://github.com/Tobi007-del/t007-tools/issues)
+
+---
+
+## Table of contents
+
+- [@t007/input](#t007input)
+  - [Table of contents](#table-of-contents)
+  - [Overview](#overview)
+  - [Demo \& Screenshots](#demo--screenshots)
+  - [Features](#features)
+  - [Tech Stack](#tech-stack)
+  - [Getting Started](#getting-started)
+  - [Usage](#usage)
+  - [API Reference](#api-reference)
+  - [Advanced Usage](#advanced-usage)
+  - [Customization](#customization)
+  - [Author](#author)
+  - [Acknowledgments](#acknowledgments)
+
+---
+
+## Overview
+
+**@t007/input** is a powerful Form Manager (FM) designed to take the pain out of HTML5 forms. It automatically handles floating labels, injects custom icons, tracks password strength, and strictly enforces validation rules (including deep file-size and mime-type checks) without requiring a massive framework.
+
+### Why @t007/input?
+
+- ✅ **DOM Mutation Auto-Tracking:** Automatically initializes new inputs added to the DOM dynamically.
+- ✅ **Advanced File Validation:** Built-in checks for `maxSize`, `minSize`, `maxTotalSize`, and specific MIME types.
+- ✅ **Intelligent Password UX:** Ships with a built-in password strength meter, confirm-password matching, and toggleable visibility icons.
+- ✅ **Zero Frameworks:** Pure vanilla JS. Drop it into React, Vue, or a static HTML site.
+- ✅ **Global Injection:** Automatically attaches to `window.field` and `window.handleFormValidation` for instant legacy integration.
+
+---
+
+## Demo & Screenshots
+
+### Standard Input Fields
+Beautiful floating labels with native error state handling.
+<img src="https://raw.githubusercontent.com/Tobi007-del/t007-tools/refs/heads/main/assets/images/input_library_desktop_preview.png" alt="Desktop Preview" width="600" />
+
+### Mobile & Responsive State
+<img src="https://raw.githubusercontent.com/Tobi007-del/t007-tools/refs/heads/main/assets/images/input_library_mobile_preview.png" alt="Mobile Preview" width="300" />
+
+### Form Validation in Action
+<img src="https://raw.githubusercontent.com/Tobi007-del/t007-tools/refs/heads/main/assets/images/input_library_sample_1.png" alt="Validation Example 1" width="600" />
+<img src="https://raw.githubusercontent.com/Tobi007-del/t007-tools/refs/heads/main/assets/images/input_library_sample_2.png" alt="Validation Example 2" width="600" />
+
+---
+
+## Features
+
+- **Programmatic Field Generation**: Create complex DOM inputs (with icons, meters, and helpers) via a single JS object.
+- **Client & Server Sync**: Supports `form.validateOnServer()` hooks before allowing submission.
+- **Automatic Error Shaking**: Visual feedback (shake animation) on invalid focus-out or submit.
+- **Horizontal Scroll Assist**: Built-in helper for long error messages overflowing the container.
+- **Tree-Shakeable**: Import only the utilities you need.
+
+---
+
+## Tech Stack
+
+### Built with
+
+- Vanilla JavaScript (ES6+)
+- HTML5 Form Validation API
+- MutationObserver API
+- Bundled via `tsup` (ESM, CJS, IIFE outputs)
+
+---
+
+## Getting Started
+
+### Installation
+
+Install via your preferred package manager:
+
+```bash
+npm install @t007/input
+# or
+yarn add @t007/input
+# or
+pnpm add @t007/input
+````
+
+-----
+
+## Usage
+
+### Modern Bundlers (ESM)
+
+```javascript
+import '@t007/input/style.css';
+import { field, handleFormValidation, formManager } from '@t007/input'; // also attached to window.t007
+
+// 1. Create a complex input field programmatically
+const emailInput = field({
+  type: 'email',
+  label: 'Email Address',
+  placeholder: 'Enter your email',
+  required: true,
+  helperText: {
+    info: "We'll never share your email.",
+    typeMismatch: "Please enter a valid email address."
+  }
+});
+
+// 2. Append to a form
+const myForm = document.querySelector('.t007-input-form');
+myForm.appendChild(emailInput);
+
+// 3. Initialize the validation engine
+handleFormValidation(myForm);
+```
+
+### CDN / Browser (Global)
+
+When loaded via a `<script>` tag, the library automatically scans the DOM for forms with the class `.t007-input-form` and initializes them.
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@t007/input@latest/dist/index.min.css">
+</head>
+<body>
+  
+  <form class="t007-input-form" novalidate>
+    <div class="t007-input-field">
+      <label class="t007-input-wrapper">
+        <span class="t007-input-outline">
+          <span class="t007-input-outline-leading"></span>
+          <span class="t007-input-outline-notch">
+            <span class="t007-input-floating-label">Username</span>
+          </span>
+          <span class="t007-input-outline-trailing"></span>
+        </span>
+        <input type="text" class="t007-input" required minlength="3">
+      </label>
+    </div>
+    <button type="submit">Submit</button>
+  </form>
+
+  <script src="https://cdn.jsdelivr.net/npm/@t007/input@latest"></script>
+</body>
+</html>
+```
+
+-----
+
+## API Reference
+
+### `field(config)`
+
+Programmatically generates the complex DOM structure required for the floating labels, icons, and error states.
+
+  - **`config.type`** *(String)*: Standard HTML input type, or `"select"`, `"textarea"`.
+  - **`config.label`** *(String)*: The floating label text.
+  - **`config.placeholder`** *(String)*: Standard placeholder.
+  - **`config.options`** *(Array)*: Used only when `type="select"`. Array of strings or `{value, option}` objects.
+  - **`config.helperText`** *(Object | Boolean)*: Maps native HTML5 validity states to custom error messages.
+      - `info`: Default helper text.
+      - `valueMissing`: Shown when `required` fails.
+      - `typeMismatch`: Shown when email/url format fails.
+      - *(Set to `false` to disable the helper line entirely).*
+  - **`config.passwordMeter`** *(Boolean)*: Enables the 4-tier password strength bar.
+  - **`config.eyeToggler`** *(Boolean)*: Enables the show/hide password icons.
+  - **`...otherProps`**: Any standard HTML attributes (`required`, `minlength`, `disabled`) are passed directly to the input.
+
+### `handleFormValidation(formElement)`
+
+Attaches the event listeners to a specific form, preventing default submission if inputs are invalid, and triggering the `.t007-input-shake` animations on errors.
+
+### `The Form Manager (t007.FM)`
+
+The core object injected into the global namespace containing utility functions like `togglePasswordType`, `getFilesHelper`, and `observeDOMForFields()`.
+
+-----
+
+## Advanced Usage
+
+### File Validation
+
+The library extends native file inputs with custom attributes for strict size enforcement:
+
+```javascript
+const fileUploader = field({
+  type: 'file',
+  label: 'Upload Avatar',
+  accept: 'image/png, image/jpeg',
+  multiple: true,
+  maxSize: 5000000, // 5MB max per file
+  maxTotalSize: 15000000, // 15MB max total upload
+  maxLength: 3 // Max 3 files allowed
+});
+```
+
+### Password Management
+
+Setting an input's custom attribute to `password` or `confirm_password` automatically links their validation states.
+
+```javascript
+// Master password
+field({ type: 'password', custom: 'password', label: 'Password' });
+
+// Confirmation (Automatically errors if it doesn't match the master)
+field({ type: 'password', custom: 'confirm_password', label: 'Confirm Password' });
+```
+
+-----
+
+## Customization
+
+You can deeply customize the look and feel by overriding the built-in CSS variables or targeting the specific classes.
+
+### Important Selectors
+
+  - `.t007-input`: The actual `<input>` element.
+  - `.t007-input-floating-label`: The label text.
+  - `.t007-input-outline`: The border wrapper holding the label.
+  - `[data-error]`: Attribute added dynamically on validation failure.
+  - `.t007-input-password-strength-meter`: The container for the 4 strength bars.
+
+-----
+
+## Author
+
+  - Developer - [Oketade Oluwatobiloba (Tobi007-del)](https://github.com/Tobi007-del)
+  - Project - [t007-tools](https://github.com/Tobi007-del/t007-tools)
+
+## Acknowledgments
+
+Built to provide a robust, dependency-free form validation engine that rivals heavyweight frontend frameworks. Part of the `@t007` utility ecosystem.

package/{src/css → dist}/index.css

@@ -1,3 +1,4 @@
+/* src/css/index.css */
 :where(:root) {
   --t007-input-dark-error-color: #f44336;
   --t007-input-font-family: inherit;
@@ -20,39 +21,32 @@
   --t007-input-ripple-size: 250%;
   --t007-input-ripple-color: rgb(from var(--t007-input-checkbox-checked-background) r g b/0.15);
 }
-
-/* general input state variables */
 :where(:root, .t007-input-field) {
   --t007-input-color: black;
-  /* borders */
   --t007-input-base-color: rgb(from var(--t007-input-color) r g b / 0.45);
   --t007-input-hover-color: rgb(from var(--t007-input-color) r g b / 1);
   --t007-input-focused-color: rgb(from var(--t007-input-color) r g b / 1);
   --t007-input-filled-color: var(--t007-input-base-color);
   --t007-input-error-color: #d32f2f;
   --t007-input-disabled-color: gray;
-  /* label */
   --t007-input-base-label-color: rgb(from var(--t007-input-base-color) r g b / 0.95);
   --t007-input-hover-label-color: var(--t007-input-base-label-color);
   --t007-input-focused-label-color: var(--t007-input-focused-color);
   --t007-input-filled-label-color: var(--t007-input-base-label-color);
   --t007-input-error-label-color: var(--t007-input-error-color);
   --t007-input-disabled-label-color: var(--t007-input-disabled-color);
-  /* value */
   --t007-input-base-value-color: rgb(from var(--t007-input-color) r g b / 1);
   --t007-input-hover-value-color: var(--t007-input-base-value-color);
   --t007-input-focused-value-color: var(--t007-input-base-value-color);
   --t007-input-filled-value-color: var(--t007-input-base-value-color);
   --t007-input-error-value-color: var(--t007-input-base-value-color);
   --t007-input-disabled-value-color: var(--t007-input-disabled-color);
-  /* helper */
   --t007-input-base-helper-color: rgb(from var(--t007-input-color) r g b / 0.8);
   --t007-input-hover-helper-color: var(--t007-input-base-helper-color);
   --t007-input-focused-helper-color: rgb(from var(--t007-input-color) r g b / 0.9);
   --t007-input-filled-helper-color: var(--t007-input-filled-color);
   --t007-input-error-helper-color: var(--t007-input-error-color);
   --t007-input-disabled-helper-color: var(--t007-input-disabled-color);
-  /* background */
   --t007-input-base-background-color: transparent;
   --t007-input-hover-background-color: var(--t007-input-base-background-color);
   --t007-input-focused-background-color: var(--t007-input-base-background-color);
@@ -60,10 +54,8 @@
   --t007-input-error-background-color: var(--t007-input-base-background-color);
   --t007-input-disabled-background-color: var(--t007-input-base-background-color);
   --t007-input-autofill-background-color: var(--t007-input-base-background-color);
-  /* icon */
   --t007-input-icon-fill: var(--t007-input-color);
   --t007-input-icon-stroke: unset;
-  /* derived */
   --t007-input-padding: calc(var(--t007-input-height) / 4);
   --t007-input-floating-label-font-size: calc(var(--t007-input-font-size) * var(--t007-input-floating-label-scale));
   --t007-input-helper-font-size: calc(var(--t007-input-font-size) * 0.7);
@@ -78,8 +70,6 @@
   --t007-input-radio-gap: calc(var(--t007-input-font-size) * 0.5);
   --t007-input-radio-size: calc(var(--t007-input-font-size) * 0.85);
 }
-
-/* checkbox input state variables */
 :where(:root) {
   --t007-input-checkmark-color: white;
   --t007-input-checkmark-width: 2px;
@@ -90,8 +80,6 @@
   --t007-input-checkbox-border-width: 1px;
   --t007-input-checkbox-border-radius: 0.2rem;
 }
-
-/* radio input state variables */
 :where(:root) {
   --t007-input-radio-color: dodgerblue;
   --t007-input-radio-background: whitesmoke;
@@ -100,25 +88,35 @@
   --t007-input-radio-checked-background: whitesmoke;
   --t007-input-radio-border-width: 1px;
 }
-
 .t007-input-field,
-.t007-input-field *[class^="t007-input"],
-.t007-input-field *[class^="t007-input"]::after,
-.t007-input-field *[class^="t007-input"]::before {
+.t007-input-field *[class^=t007-input],
+.t007-input-field *[class^=t007-input]::after,
+.t007-input-field *[class^=t007-input]::before {
   box-sizing: border-box;
   font-family: var(--t007-input-font-family);
-  transition-property: transform, filter, background-color, color, border, right, left, top, bottom, width, height, font-size, scale;
+  transition-property:
+    transform,
+    filter,
+    background-color,
+    color,
+    border,
+    right,
+    left,
+    top,
+    bottom,
+    width,
+    height,
+    font-size,
+    scale;
   transition-duration: 150ms;
   transition-timing-function: ease;
 }
-
 :where(.t007-input-field) *,
 :where(.t007-input-field) *::after,
 :where(.t007-input-field) *::before {
   padding: 0;
   margin: 0;
 }
-
 .t007-input-field {
   --t007-input-current-color: var(--t007-input-base-color);
   --t007-input-current-label-color: var(--t007-input-base-label-color);
@@ -131,17 +129,15 @@
   isolation: isolate;
   -webkit-font-smoothing: antialiased;
 }
-
-.t007-input-field:where(.t007-input-is-wrapper):where(:has([contenteditable="true"]:not(:empty)):not(:has([contenteditable="true"] > br:only-child)):not(:has([contenteditable="true"] > :only-child > br:only-child))),
-.t007-input-field:where(.t007-input-is-wrapper):where(:has([data-wrapper-filled], [contenteditable="true"][data-filled])),
-.t007-input-field:where(:has(.t007-input:is([data-filled], :-webkit-autofill, :not(:placeholder-shown):where(:not(select):not([type="date"]):not([type="time"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="color"]):not([type="range"]):not([type="file"]))))) {
+.t007-input-field:where(.t007-input-is-wrapper):where(:has([contenteditable=true]:not(:empty)):not(:has([contenteditable=true] > br:only-child)):not(:has([contenteditable=true] > :only-child > br:only-child))),
+.t007-input-field:where(.t007-input-is-wrapper):where(:has([data-wrapper-filled], [contenteditable=true][data-filled])),
+.t007-input-field:where(:has(.t007-input:is([data-filled], :-webkit-autofill, :not(:placeholder-shown):where(:not(select):not([type=date]):not([type=time]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=color]):not([type=range]):not([type=file]))))) {
   --t007-input-current-color: var(--t007-input-filled-color);
   --t007-input-current-label-color: var(--t007-input-filled-label-color);
   --t007-input-current-value-color: var(--t007-input-filled-value-color);
   --t007-input-current-helper-color: var(--t007-input-filled-helper-color);
   --t007-input-current-background-color: var(--t007-input-filled-background-color);
 }
-
 .t007-input-field:where(:hover) {
   --t007-input-current-color: var(--t007-input-hover-color);
   --t007-input-current-label-color: var(--t007-input-hover-label-color);
@@ -149,8 +145,7 @@
   --t007-input-current-helper-color: var(--t007-input-hover-helper-color);
   --t007-input-current-background-color: var(--t007-input-hover-background-color);
 }
-
-.t007-input-field:where(.t007-input-is-wrapper):where(:has([data-wrapper-focused], [contenteditable="true"]:focus)),
+.t007-input-field:where(.t007-input-is-wrapper):where(:has([data-wrapper-focused], [contenteditable=true]:focus)),
 .t007-input-field:where(:has(.t007-input:focus)) {
   --t007-input-current-color: var(--t007-input-focused-color);
   --t007-input-current-label-color: var(--t007-input-focused-label-color);
@@ -158,8 +153,7 @@
   --t007-input-current-helper-color: var(--t007-input-focused-helper-color);
   --t007-input-current-background-color: var(--t007-input-focused-background-color);
 }
-
-.t007-input-field:where(.t007-input-is-wrapper):where(:has([data-wrapper-error], [contenteditable="true"][data-error])),
+.t007-input-field:where(.t007-input-is-wrapper):where(:has([data-wrapper-error], [contenteditable=true][data-error])),
 .t007-input-field:where(:has(.t007-input[data-error])) {
   --t007-input-current-color: var(--t007-input-error-color);
   --t007-input-current-label-color: var(--t007-input-error-label-color);
@@ -167,7 +161,6 @@
   --t007-input-current-helper-color: var(--t007-input-error-helper-color);
   --t007-input-current-background-color: var(--t007-input-error-background-color);
 }
-
 .t007-input-field:has(.t007-input:disabled) {
   --t007-input-current-color: var(--t007-input-disabled-color);
   --t007-input-current-label-color: var(--t007-input-disabled-label-color);
@@ -177,19 +170,15 @@
   opacity: var(--t007-input-disabled-opacity);
   cursor: not-allowed;
 }
-
 .t007-input-field:has(.t007-input:-webkit-autofill) {
   --t007-input-current-background-color: var(--t007-input-autofill-background-color);
 }
-
-.t007-input-field:where(.t007-input-no-helper:has(.t007-input[type="checkbox"], .t007-input[type="radio"])) {
+.t007-input-field:where(.t007-input-no-helper:has(.t007-input[type=checkbox], .t007-input[type=radio])) {
   display: contents;
 }
-
 .t007-input-field:has(.t007-input[hidden]) {
   display: none;
 }
-
 .t007-input-wrapper {
   position: relative;
   width: 100%;
@@ -199,24 +188,19 @@
   padding: var(--t007-input-padding);
   border-radius: var(--t007-input-border-radius);
 }
-
 .t007-input-field.t007-input-is-wrapper .t007-input-wrapper {
   min-height: fit-content;
   padding: var(--t007-input-border-width);
 }
-
 .t007-input-wrapper:has(textarea) {
   min-height: fit-content;
 }
-
 .t007-input-wrapper:has(.t007-input-icon) {
   padding-right: 0;
 }
-
 .t007-input-field.t007-input-icon-override .t007-input-wrapper {
   padding-right: 12px;
 }
-
 .t007-input-outline {
   position: absolute;
   inset: 0;
@@ -228,7 +212,6 @@
   text-align: left;
   border-radius: inherit;
 }
-
 .t007-input-outline > * {
   height: 100%;
   background-color: var(--t007-input-current-background-color);
@@ -237,13 +220,11 @@
   border-style: var(--t007-input-border-style);
   pointer-events: none;
 }
-
-.t007-input-field.t007-input-is-wrapper:has([data-wrapper-focused], [contenteditable="true"]:focus) .t007-input-outline > *,
+.t007-input-field.t007-input-is-wrapper:has([data-wrapper-focused], [contenteditable=true]:focus) .t007-input-outline > *,
 .t007-input-field:has(.t007-input:focus) .t007-input-outline > * {
   border-width: var(--t007-input-focused-border-width);
   border-style: var(--t007-input-focused-border-style);
 }
-
 .t007-input-outline-leading {
   width: max(0.75rem, var(--t007-input-border-radius));
   border-top-left-radius: inherit;
@@ -252,7 +233,6 @@
   border-bottom-right-radius: 0;
   border-right: none !important;
 }
-
 .t007-input-outline-trailing {
   flex: 1;
   min-width: var(--t007-input-border-radius);
@@ -262,7 +242,6 @@
   border-bottom-right-radius: inherit;
   border-left: none !important;
 }
-
 .t007-input-outline-notch {
   flex: 0 0 auto;
   position: relative;
@@ -270,19 +249,29 @@
   max-width: calc(100% - 0.75rem);
   border-left: none !important;
   border-right: none !important;
-  transition-property: border-bottom, transform, filter, background-color, color, right, left, top, bottom, width, height, font-size, scale;
+  transition-property:
+    border-bottom,
+    transform,
+    filter,
+    background-color,
+    color,
+    right,
+    left,
+    top,
+    bottom,
+    width,
+    height,
+    font-size,
+    scale;
 }
-
 .t007-input-field:has(.t007-input-icon) .t007-input-outline-notch {
   max-width: calc(100% - 3.75rem);
 }
-
 .t007-input-field.t007-input-is-wrapper .t007-input-outline-notch,
-.t007-input-field:has(.t007-input:is([data-filled], :focus, :-webkit-autofill, :not(:placeholder-shown):where(:not(select):not([type="date"]):not([type="time"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="color"]):not([type="range"]):not([type="file"])))) .t007-input-outline-notch,
-.t007-input-field:has(.t007-input:is(select, :not([placeholder=""]), [type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"], [type="color"], [type="range"], [type="file"])) .t007-input-outline-notch {
+.t007-input-field:has(.t007-input:is([data-filled], :focus, :-webkit-autofill, :not(:placeholder-shown):where(:not(select):not([type=date]):not([type=time]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=color]):not([type=range]):not([type=file])))) .t007-input-outline-notch,
+.t007-input-field:has(.t007-input:is(select, :not([placeholder=""]), [type=date], [type=time], [type=datetime-local], [type=month], [type=week], [type=color], [type=range], [type=file])) .t007-input-outline-notch {
   border-top: none !important;
 }
-
 .t007-input-floating-label {
   position: relative;
   top: calc(var(--t007-input-height) / 2);
@@ -300,27 +289,23 @@
   white-space: nowrap;
   will-change: transform;
 }
-
 .t007-input-floating-label:not(:empty) {
   margin-inline: 0.25rem;
 }
-
 .t007-input-field.t007-input-is-wrapper .t007-input-floating-label,
-.t007-input-field:has(.t007-input:is([data-filled], :focus, :-webkit-autofill, :not(:placeholder-shown):where(:not(select):not([type="date"]):not([type="time"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="color"]):not([type="range"]):not([type="file"])))) .t007-input-floating-label,
-.t007-input-field:has(.t007-input:is(select, :not([placeholder=""]), [type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"], [type="color"], [type="range"], [type="file"])) .t007-input-floating-label {
+.t007-input-field:has(.t007-input:is([data-filled], :focus, :-webkit-autofill, :not(:placeholder-shown):where(:not(select):not([type=date]):not([type=time]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=color]):not([type=range]):not([type=file])))) .t007-input-floating-label,
+.t007-input-field:has(.t007-input:is(select, :not([placeholder=""]), [type=date], [type=time], [type=datetime-local], [type=month], [type=week], [type=color], [type=range], [type=file])) .t007-input-floating-label {
   transform: translateY(calc(-1 * ((var(--t007-input-height) / 2) + (var(--t007-input-font-size) / 2))));
   font-size: var(--t007-input-floating-label-font-size);
   opacity: 1;
   right: auto;
   max-width: 133%;
 }
-
 .t007-input-field.t007-input-is-wrapper .t007-input-floating-label.t007-input-shake,
-.t007-input-field:has(.t007-input:is([data-filled], :focus, :-webkit-autofill, :not(:placeholder-shown):where(:not(select):not([type="date"]):not([type="time"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="color"]):not([type="range"]):not([type="file"])))) .t007-input-floating-label.t007-input-shake,
-.t007-input-field:has(.t007-input:is(select, :not([placeholder=""]), [type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"], [type="color"], [type="range"], [type="file"])) .t007-input-floating-label.t007-input-shake {
+.t007-input-field:has(.t007-input:is([data-filled], :focus, :-webkit-autofill, :not(:placeholder-shown):where(:not(select):not([type=date]):not([type=time]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=color]):not([type=range]):not([type=file])))) .t007-input-floating-label.t007-input-shake,
+.t007-input-field:has(.t007-input:is(select, :not([placeholder=""]), [type=date], [type=time], [type=datetime-local], [type=month], [type=week], [type=color], [type=range], [type=file])) .t007-input-floating-label.t007-input-shake {
   transform: translateY(calc(-1 * ((var(--t007-input-height) / 2) + (var(--t007-input-font-size) / 2)))) translateX(0.25rem);
 }
-
 .t007-input {
   border: none;
   background: none;
@@ -336,49 +321,39 @@
   font-family: inherit;
   outline: none !important;
 }
-
-.t007-input[type="file"] {
+.t007-input[type=file] {
   height: unset;
 }
-
-.t007-input:is([type="checkbox"], [type="radio"]) {
+.t007-input:is([type=checkbox], [type=radio]) {
   opacity: 0;
   position: absolute;
   pointer-events: none;
 }
-
 .t007-input:not(select) {
   appearance: none;
 }
-
 .t007-input:where(textarea) {
   min-height: 100%;
   height: auto;
   resize: none;
 }
-
 :where(select.t007-input::picker(select)) {
   color: black;
 }
-
 .t007-input::placeholder {
   color: currentColor;
   opacity: 0.55;
 }
-
-.t007-input-field:has(.t007-input[type="file"]) {
-  /* computed values for the selector button */
+.t007-input-field:has(.t007-input[type=file]) {
   --t007-input-sb-active-margin: calc((var(--t007-input-floating-label-font-size) * 1.3) / 2);
   --t007-input-sb-padding-inline: calc(var(--t007-input-font-size) / 3.5);
   --t007-input-sb-padding-block: calc(((var(--t007-input-height) / 2) - ((var(--t007-input-font-size) / 1.25) / 2)) - ((var(--t007-input-floating-label-font-size) * 1.3) / 2) - 1px);
 }
-
-.t007-input-wrapper:has(.t007-input[type="file"]) {
+.t007-input-wrapper:has(.t007-input[type=file]) {
   padding-block: var(--t007-input-sb-active-margin);
   padding-left: var(--t007-input-sb-active-margin);
 }
-
-:where(.t007-input[type="file"])::file-selector-button {
+:where(.t007-input[type=file])::file-selector-button {
   font-family: inherit;
   font-weight: bold;
   font-size: calc(var(--t007-input-font-size) / 1.25);
@@ -394,16 +369,13 @@
   cursor: pointer;
   transition: filter 200ms ease;
 }
-
-:where(.t007-input[type="file"])::file-selector-button:where(:active) {
+:where(.t007-input[type=file])::file-selector-button:where(:active) {
   border-width: 1px;
 }
-
-:where(.t007-input[type="file"])::file-selector-button:where(:hover, :focus-visible) {
+:where(.t007-input[type=file])::file-selector-button:where(:hover, :focus-visible) {
   filter: brightness(80%);
 }
-
-:where(.t007-input[type="file"].t007-input-image-selected)::file-selector-button {
+:where(.t007-input[type=file].t007-input-image-selected)::file-selector-button {
   background:
     center/contain no-repeat var(--t007-input-image-src),
     linear-gradient(black, black),
@@ -412,16 +384,13 @@
   padding-block: var(--t007-input-sb-padding-block);
   border: none;
 }
-
 .t007-input:-webkit-autofill {
   transition: background-color 50000000s ease-in-out 0s !important;
   -webkit-text-fill-color: var(--t007-input-current-value-color) !important;
 }
-
 .t007-input-field.t007-input-icon-override input::-webkit-calendar-picker-indicator {
   opacity: 0;
 }
-
 .t007-input-icon {
   background: none;
   border: none;
@@ -434,43 +403,35 @@
   justify-content: center;
   pointer-events: none;
 }
-
 .t007-input-icon:is(.t007-input-password-hidden-icon, .t007-input-password-visible-icon) {
   pointer-events: all;
 }
-
 .t007-input-icon:hover {
   background-color: rgba(0, 0, 0, 0.02);
 }
-
 .t007-input-field.t007-input-icon-override .t007-input-icon {
   position: absolute;
   right: 0;
 }
-
 .t007-input-field.t007-input-icon-override svg,
 .t007-input-icon svg {
   width: var(--t007-input-icon-width);
   height: var(--t007-input-icon-height);
 }
-
 .t007-input-icon svg path {
   fill: var(--t007-input-icon-fill);
   stroke: var(--t007-input-icon-stroke);
 }
-
-.t007-input-field:has(input[type="password"]) .t007-input-password-visible-icon,
-.t007-input-field:has(input[type="text"]) .t007-input-password-hidden-icon {
+.t007-input-field:has(input[type=password]) .t007-input-password-visible-icon,
+.t007-input-field:has(input[type=text]) .t007-input-password-hidden-icon {
   display: none;
 }
-
 .t007-input-helper-line {
   position: relative;
   margin-inline: 1rem;
   height: calc(var(--t007-input-helper-font-size) * 1.4);
   color: var(--t007-input-current-helper-color);
 }
-
 .t007-input-helper-text-wrapper {
   position: relative;
   width: 100%;
@@ -479,31 +440,31 @@
   overflow-y: hidden;
   scrollbar-width: none;
 }
-
 .t007-input-helper-text-wrapper::-webkit-scrollbar {
   display: none;
 }
-
 .t007-input-scroll-assist {
   position: absolute;
   top: 1px;
   min-width: 2rem;
   height: 100%;
   opacity: 0.075;
-  background: linear-gradient(var(--gradient-dir), transparent 0, currentColor 30%, transparent);
+  background:
+    linear-gradient(
+      var(--gradient-dir),
+      transparent 0,
+      currentColor 30%,
+      transparent);
   z-index: 2;
 }
-
-.t007-input-scroll-assist[data-scroll-direction="left"] {
+.t007-input-scroll-assist[data-scroll-direction=left] {
   left: -0.25rem;
   --gradient-dir: to right;
 }
-
-.t007-input-scroll-assist[data-scroll-direction="right"] {
+.t007-input-scroll-assist[data-scroll-direction=right] {
   right: -0.25rem;
   --gradient-dir: to left;
 }
-
 .t007-input-helper-text {
   position: absolute;
   top: 2px;
@@ -512,39 +473,31 @@
   line-height: 1.2;
   white-space: nowrap;
 }
-
-.t007-input-helper-text[data-violation="none"],
+.t007-input-helper-text[data-violation=none],
 .t007-input-helper-text.t007-input-show {
   opacity: 1;
 }
-
-.t007-input-helper-line:has(.t007-input-show) [data-violation="none"],
-.t007-input-helper-line:not(:has(.t007-input-show, [data-violation="none"])) .t007-input-scroll-assist {
+.t007-input-helper-line:has(.t007-input-show) [data-violation=none],
+.t007-input-helper-line:not(:has(.t007-input-show, [data-violation=none])) .t007-input-scroll-assist {
   opacity: 0;
 }
-
 .t007-input-password-meter {
   --t007-input-p-meter-current-color: var(--t007-input-p-meter-color-weak);
   display: none;
   margin-top: 0.75rem;
 }
-
-.t007-input-field:has(.t007-input:is([type="password"], [type="text"]):is([data-filled], :-webkit-autofill, :not(:placeholder-shown))) .t007-input-password-meter {
+.t007-input-field:has(.t007-input:is([type=password], [type=text]):is([data-filled], :-webkit-autofill, :not(:placeholder-shown))) .t007-input-password-meter {
   display: block;
 }
-
 .t007-input-password-meter[data-strength-level="2"] {
   --t007-input-p-meter-current-color: var(--t007-input-p-meter-color-fair);
 }
-
 .t007-input-password-meter[data-strength-level="3"] {
   --t007-input-p-meter-current-color: var(--t007-input-p-meter-color-strong);
 }
-
 .t007-input-password-meter[data-strength-level="4"] {
   --t007-input-p-meter-current-color: var(--t007-input-p-meter-color-very-strong);
 }
-
 .t007-input-password-meter::after {
   content: "";
   position: relative;
@@ -556,123 +509,98 @@
   color: var(--t007-input-p-meter-current-color);
   line-height: normal;
 }
-
 .t007-input-password-meter[data-strength-level="1"]::after {
   content: "Weak";
 }
-
 .t007-input-password-meter[data-strength-level="2"]::after {
   content: "Fair";
 }
-
 .t007-input-password-meter[data-strength-level="3"]::after {
   content: "Strong";
 }
-
 .t007-input-password-meter[data-strength-level="4"]::after {
   content: "Very Strong";
 }
-
 .t007-input-password-strength-meter {
   display: flex;
 }
-
 .t007-input-password-strength-meter > div {
   flex: 1;
   margin-right: var(--t007-input-p-meter-gap);
   height: var(--t007-input-p-meter-height);
   border-radius: var(--t007-input-p-meter-border-radius);
 }
-
 .t007-input-password-meter[data-strength-level="1"] .t007-input-p-weak,
 .t007-input-password-meter[data-strength-level="2"] :is(.t007-input-p-weak, .t007-input-p-fair),
 .t007-input-password-meter[data-strength-level="3"] :is(.t007-input-p-weak, .t007-input-p-fair, .t007-input-p-strong),
 .t007-input-password-meter[data-strength-level="4"] :is(.t007-input-p-weak, .t007-input-p-fair, .t007-input-p-strong, .t007-input-p-very-strong) {
   background-color: var(--t007-input-p-meter-current-color);
 }
-
 .t007-input-checkbox-wrapper,
 .t007-input-radio-wrapper {
   position: relative;
   display: inline-flex;
   align-items: center;
 }
-
 .t007-input-checkbox-wrapper {
   font-size: var(--t007-input-checkbox-font-size);
 }
-
 .t007-input-radio-wrapper {
   font-size: var(--t007-input-radio-font-size);
 }
-
 .t007-input-checkbox-label,
 .t007-input-radio-label {
   color: var(--t007-input-current-label-color);
 }
-
 .t007-input-checkbox-label:not(:empty) {
   margin-left: var(--t007-input-checkbox-gap);
 }
-
 .t007-input-radio-label:not(:empty) {
   margin-left: var(--t007-input-radio-gap);
 }
-
 :is(.t007-input-checkbox-wrapper, .t007-input-radio-wrapper):hover {
   filter: brightness(95%);
 }
-
 .t007-input-checkbox-box,
 .t007-input-radio-box {
   position: relative;
   border-style: solid;
 }
-
 .t007-input-checkbox-box {
   width: var(--t007-input-checkbox-size);
   height: var(--t007-input-checkbox-size);
   border-width: var(--t007-input-checkbox-border-width);
 }
-
 .t007-input-radio-box {
   width: var(--t007-input-radio-size);
   height: var(--t007-input-radio-size);
   border-width: var(--t007-input-radio-border-width);
 }
-
 .t007-input-checkbox-box {
   background: var(--t007-input-checkbox-background);
   border-color: var(--t007-input-checkbox-border-color);
 }
-
 .t007-input-radio-box {
   background: var(--t007-input-radio-background);
   border-color: var(--t007-input-radio-border-color);
 }
-
 .t007-input-checkbox-box {
   border-radius: var(--t007-input-checkbox-border-radius);
 }
-
 .t007-input-radio-box {
   border-radius: 50%;
 }
-
-.t007-input-field:has(.t007-input[type="checkbox"]:checked) .t007-input-checkbox-box {
+.t007-input-field:has(.t007-input[type=checkbox]:checked) .t007-input-checkbox-box {
   background: var(--t007-input-checkbox-checked-background);
   border-color: var(--t007-input-checkbox-checked-border-color);
 }
-
-.t007-input-field:has(.t007-input[type="radio"]:checked) .t007-input-radio-box {
+.t007-input-field:has(.t007-input[type=radio]:checked) .t007-input-radio-box {
   background: var(--t007-input-radio-checked-background);
   border-color: var(--t007-input-radio-checked-border-color);
 }
-
-.t007-input-field:has(.t007-input:is([type="checkbox"], [type="radio"])[data-error]) :is(.t007-input-checkbox-box, .t007-input-radio-box) {
+.t007-input-field:has(.t007-input:is([type=checkbox], [type=radio])[data-error]) :is(.t007-input-checkbox-box, .t007-input-radio-box) {
   border-color: var(--t007-input-error-color);
 }
-
 .t007-input-checkbox-tag,
 .t007-input-radio-tag {
   content: "";
@@ -682,7 +610,6 @@
   left: 2.6%;
   margin: auto;
 }
-
 .t007-input-checkbox-tag {
   top: -14.25%;
   width: 35%;
@@ -691,7 +618,6 @@
   border-width: 0 var(--t007-input-checkmark-width) var(--t007-input-checkmark-width) 0;
   transform: rotate(45deg);
 }
-
 .t007-input-field.t007-input-indeterminate .t007-input-checkbox-tag {
   top: 50%;
   left: 50.5%;
@@ -702,7 +628,6 @@
   background-color: var(--t007-input-checkmark-color);
   border: none;
 }
-
 .t007-input-radio-tag {
   width: 70%;
   height: 72.5%;
@@ -712,21 +637,16 @@
   scale: 0;
   transition-timing-function: cubic-bezier(0.34, 1.64, 0.64, 1);
 }
-
-.t007-input-field:has(.t007-input:is([type="radio"], [type="checkbox"]):checked) :is(.t007-input-checkbox-tag, .t007-input-radio-tag) {
+.t007-input-field:has(.t007-input:is([type=radio], [type=checkbox]):checked) :is(.t007-input-checkbox-tag, .t007-input-radio-tag) {
   opacity: 1;
   scale: 1;
 }
-
-/* Base styles to enable pointer effects */
 :where(.t007-input-rippler),
 .t007-input-checkbox-box,
 .t007-input-radio-box {
   position: relative;
   outline: none !important;
 }
-
-/* Pulse bubble effect on click */
 .t007-input-rippler::before,
 .t007-input-checkbox-box::before,
 .t007-input-radio-box::before {
@@ -739,27 +659,27 @@
   background: var(--t007-input-ripple-color);
   border-radius: 50%;
   transform: translate(-50%, -50%);
-  transition-property: width, height, opacity;
+  transition-property:
+    width,
+    height,
+    opacity;
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
   opacity: 0;
   pointer-events: none;
 }
-
 .t007-input-rippler:is(:hover, :focus-visible, :has(:focus-visible), :has(~ :focus-visible))::before,
-.t007-input-field:is(:hover, :has(.t007-input[type="checkbox"]:focus-visible)) .t007-input-checkbox-box::before,
-.t007-input-field:is(:hover, :has(.t007-input[type="radio"]:focus-visible)) .t007-input-radio-box::before {
+.t007-input-field:is(:hover, :has(.t007-input[type=checkbox]:focus-visible)) .t007-input-checkbox-box::before,
+.t007-input-field:is(:hover, :has(.t007-input[type=radio]:focus-visible)) .t007-input-radio-box::before {
   width: var(--t007-input-ripple-size);
   height: var(--t007-input-ripple-size);
   opacity: 1;
 }
-
 .t007-input-rippler:is(:checked, :has(:checked), :has(~ :checked))::before,
-.t007-input-field:has(.t007-input[type="checkbox"]:checked) .t007-input-checkbox-box::before,
-.t007-input-field:has(.t007-input[type="radio"]:checked) .t007-input-radio-box::before {
+.t007-input-field:has(.t007-input[type=checkbox]:checked) .t007-input-checkbox-box::before,
+.t007-input-field:has(.t007-input[type=radio]:checked) .t007-input-radio-box::before {
   animation: t007-ripple-pulse 350ms ease-out;
 }
-
 @keyframes t007-ripple-pulse {
   0% {
     width: 0;

package/dist/index.global.js

@@ -25,8 +25,11 @@
       for (const k of Object.keys(styles)) if (styles[k] !== void 0) el.style[k] = styles[k];
     }
   }
-  function loadResource(src, type = "style", { module, media, crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, attempts = 3, retryKey = false } = {}, w = window) {
+  var VIRTUAL_RESOURCE = /* @__PURE__ */ Symbol.for("T007_VIRTUAL_RESOURCE");
+  function loadResource(req, type = "style", { module, media, crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, attempts = 3, retryKey = false } = {}, w = window) {
     w.t007._resourceCache ??= {};
+    if (req === VIRTUAL_RESOURCE || "symbol" === typeof req) return Promise.resolve();
+    const src = req;
     if (w.t007._resourceCache[src]) return w.t007._resourceCache[src];
     const existing = type === "script" ? Array.prototype.find.call(w.document.scripts, (s) => isSameURL(s.src, src)) : type === "style" ? Array.prototype.find.call(w.document.styleSheets, (s) => isSameURL(s.href, src)) : null;
     if (existing) return w.t007._resourceCache[src] = Promise.resolve(existing);
@@ -123,12 +126,13 @@
   }
   if (typeof window !== "undefined") {
     window.t007 ??= {};
+    t007.VIRTUAL_RESOURCE = VIRTUAL_RESOURCE;
     window.T007_TOAST_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest`;
     window.T007_INPUT_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest`;
     window.T007_DIALOG_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest`;
-    window.T007_TOAST_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest/style.css`;
-    window.T007_INPUT_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest/style.css`;
-    window.T007_DIALOG_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest/style.css`;
+    window.T007_TOAST_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest/dist/index.min.css`;
+    window.T007_INPUT_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest/dist/index.min.css`;
+    window.T007_DIALOG_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest/dist/index.min.css`;
   }
 
   // src/index.js

package/dist/standalone.js

@@ -23,8 +23,11 @@ function assignEl(el, props, dataset, styles) {
     for (const k of Object.keys(styles)) if (styles[k] !== void 0) el.style[k] = styles[k];
   }
 }
-function loadResource(src, type = "style", { module, media, crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, attempts = 3, retryKey = false } = {}, w = window) {
+var VIRTUAL_RESOURCE = /* @__PURE__ */ Symbol.for("T007_VIRTUAL_RESOURCE");
+function loadResource(req, type = "style", { module, media, crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, attempts = 3, retryKey = false } = {}, w = window) {
   w.t007._resourceCache ??= {};
+  if (req === VIRTUAL_RESOURCE || "symbol" === typeof req) return Promise.resolve();
+  const src = req;
   if (w.t007._resourceCache[src]) return w.t007._resourceCache[src];
   const existing = type === "script" ? Array.prototype.find.call(w.document.scripts, (s) => isSameURL(s.src, src)) : type === "style" ? Array.prototype.find.call(w.document.styleSheets, (s) => isSameURL(s.href, src)) : null;
   if (existing) return w.t007._resourceCache[src] = Promise.resolve(existing);
@@ -121,12 +124,13 @@ function initScrollAssist(el, { pxPerSecond = 80, assistClassName = "tmg-video-c
 }
 if (typeof window !== "undefined") {
   window.t007 ??= {};
+  t007.VIRTUAL_RESOURCE = VIRTUAL_RESOURCE;
   window.T007_TOAST_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest`;
   window.T007_INPUT_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest`;
   window.T007_DIALOG_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest`;
-  window.T007_TOAST_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest/style.css`;
-  window.T007_INPUT_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest/style.css`;
-  window.T007_DIALOG_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest/style.css`;
+  window.T007_TOAST_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest/dist/index.min.css`;
+  window.T007_INPUT_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest/dist/index.min.css`;
+  window.T007_DIALOG_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest/dist/index.min.css`;
 }
 
 // src/index.js

package/package.json

@@ -1,56 +1,59 @@
 {
   "name": "@t007/input",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "A lightweight, pure JS input system.",
   "author": "Oketade Oluwatobiloba <tobioketade007@gmail.com>",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/tobi007-del/t007-tools.git",
+    "url": "git+https://github.com/Tobi007-del/t007-tools.git",
     "directory": "packages/input"
   },
-  "homepage": "https://github.com/tobi007-del/t007-tools/tree/main/packages/input#readme",
+  "homepage": "https://github.com/Tobi007-del/t007-tools/tree/main/packages/input#readme",
   "bugs": {
-    "url": "https://github.com/tobi007-del/t007-tools/issues"
+    "url": "https://github.com/Tobi007-del/t007-tools/issues"
   },
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "unpkg": "./dist/index.global.js",
   "jsdelivr": "./dist/index.global.js",
-  "types": "./src/ts/types/index.d.ts",
-  "style": "./src/css/index.css",
+  "types": "./dist/index.d.ts",
+  "style": "./dist/index.css",
   "sideEffects": [
     "*.css"
   ],
   "exports": {
     ".": {
-      "types": "./src/ts/types/index.d.ts",
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
     "./standalone": "./dist/standalone.js",
     "./global": "./dist/index.global.js",
-    "./style.css": "./src/css/index.css"
+    "./style.css": "./dist/index.css"
+  },
+  "publishConfig": {
+    "access": "public"
   },
   "scripts": {
-    "build": "tsup --config ../../tsup.config.ts"
+    "build": "tsup --config ../../tsup.config.ts",
+    "prepublishOnly": "shx cp ../../LICENSE ."
   },
   "files": [
-    "dist",
-    "./src/ts/types/index.d.ts",
-    "./src/css/index.css"
+    "dist"
   ],
   "keywords": [
+    "t007",
+    "ecosystem",
+    "ui",
+    "vanilla-js",
     "input",
     "form",
     "form-validation",
     "form-manager",
     "file-upload",
     "password-meter",
-    "t007",
-    "ui",
-    "vanilla-js",
     "monkey-patch"
   ],
   "dependencies": {