@t007/input 0.0.29 → 0.0.31

package/dist/index.css

@@ -65,6 +65,7 @@
 }
 :where(:root, .t007-input-field) {
   --t007-input-color: black;
+  --t007-input-inverse-color: rgb(from var(--t007-input-color) calc(255 - r) calc(255 - g) calc(255 - b));
   --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);
@@ -117,21 +118,41 @@
   --t007-scroll-assist-width: calc(var(--t007-input-unit) * 2);
   --t007-scroll-assist-inset-x: calc(var(--t007-input-unit) * -0.25);
   --t007-scroll-assist-opacity: 0.4;
+  --t007-input-select-appearance: base-select;
+  --t007-input-select-timing: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --t007-input-select-transition-time: 200ms;
+  --t007-input-select-picker-bg: transparent;
+  --t007-input-select-picker-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23000' %3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A");
+  --t007-input-option-color: var(--t007-input-inverse-color);
+  --t007-input-option-active-color: var(--t007-input-inverse-color);
+  --t007-input-option-bg: rgb(from var(--t007-input-color) r g b / 0.777);
+  --t007-input-option-checked-bg: rgb(from var(--t007-input-checkbox-checked-background) r g b / 0.666);
+  --t007-input-option-hover-bg: rgb(from var(--t007-input-color) r g b / 0.999);
+  --t007-input-option-checked-hover-bg: rgb(from var(--t007-input-checkbox-checked-background) r g b / 0.888);
+  --t007-input-option-border: 1px solid var(--t007-input-base-color);
+  --t007-input-option-checked-border: 1px solid rgb(from var(--t007-input-checkbox-checked-background) r g b / 0.15);
+  --t007-input-option-focus-border: 1px solid var(--t007-input-focused-color);
+  --t007-input-option-blur: 3.5px;
+  --t007-input-option-entry-scale: 0.25;
+  --t007-input-option-stagger-delay: 20ms;
+  --t007-input-color-height: var(--t007-input-height);
+  --t007-input-color-border: none;
+  --t007-input-color-radius: 50%;
 }
 :where(:root) {
   --t007-input-checkmark-color: white;
   --t007-input-checkmark-width: 2px;
   --t007-input-checkbox-background: whitesmoke;
   --t007-input-checkbox-checked-background: dodgerblue;
-  --t007-input-checkbox-border-color: #707070;
-  --t007-input-checkbox-checked-border-color: black;
+  --t007-input-checkbox-border-color: rgb(from var(--t007-input-color) calc(r + 112) calc(g + 112) calc(b + 112));
+  --t007-input-checkbox-checked-border-color: var(--t007-input-inverse-color);
   --t007-input-checkbox-border-width: 1px;
   --t007-input-checkbox-border-radius: calc(var(--t007-input-unit) * 0.2);
 }
 :where(:root) {
   --t007-input-radio-color: dodgerblue;
   --t007-input-radio-background: whitesmoke;
-  --t007-input-radio-border-color: #707070;
+  --t007-input-radio-border-color: rgb(from var(--t007-input-color) calc(r + 112) calc(g + 112) calc(b + 112));
   --t007-input-radio-checked-border-color: dodgerblue;
   --t007-input-radio-checked-background: whitesmoke;
   --t007-input-radio-border-width: 1px;
@@ -388,7 +409,7 @@
   resize: none;
 }
 :where(select.t007-input::picker(select)) {
-  color: black;
+  color: var(--t007-input-inverse-color);
 }
 .t007-input::placeholder {
   color: currentColor;
@@ -403,7 +424,7 @@
   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-bleeding-edge input[type=file])::file-selector-button {
   font-family: inherit;
   font-weight: bold;
   font-size: calc(var(--t007-input-unit) / 1.25);
@@ -419,10 +440,10 @@
   cursor: pointer;
   transition: filter 200ms ease;
 }
-:where(.t007-input[type=file])::file-selector-button:where(:active) {
+:where(.t007-input-bleeding-edge 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-bleeding-edge 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 {
@@ -725,3 +746,118 @@
     opacity: 0;
   }
 }
+.t007-input-bleeding-edge :is(#o, select) {
+  white-space: nowrap;
+}
+@supports (appearance: base-select) {
+  .t007-input-bleeding-edge :is(#o, select),
+  .t007-input-bleeding-edge :is(#o, select)::picker(select) {
+    appearance: var(--t007-input-select-appearance);
+  }
+  .t007-input-bleeding-edge :is(#o, select) {
+    position: relative;
+    align-items: center;
+  }
+  .t007-input-bleeding-edge :is(#o, select)::picker-icon {
+    content: "";
+    position: relative;
+    width: var(--t007-input-unit);
+    height: var(--t007-input-unit);
+    background-image: var(--t007-input-select-picker-icon);
+    background-position: center;
+    background-repeat: no-repeat;
+    transition: all var(--t007-input-select-transition-time) ease-out;
+    transition-timing-function: var(--t007-input-select-timing);
+  }
+  .t007-input-bleeding-edge :is(#o, select):open::picker-icon {
+    rotate: 180deg;
+  }
+  .t007-input-bleeding-edge :is(#o, select):active::picker-icon {
+    translate: 0 calc(var(--t007-input-unit) / 10);
+  }
+  .t007-input-bleeding-edge :is(#o, select)::picker(select) {
+    background: var(--t007-input-select-picker-bg);
+    margin: calc(var(--t007-input-unit) / 1.34) 2px calc(var(--t007-input-unit) / 1.34) 1px;
+    border: none;
+    transition-property: display, overlay;
+    transition-duration: calc(var(--t007-input-select-transition-time) * 2.5);
+    transition-behavior: allow-discrete;
+  }
+  .t007-input-bleeding-edge :is(#o, select) option {
+    position: relative;
+    backdrop-filter: blur(var(--t007-input-option-blur));
+    border-radius: calc(var(--t007-input-unit) / 4);
+    display: flex;
+    justify-content: center;
+    margin-bottom: calc(var(--t007-input-unit) / 4);
+    padding: calc(var(--t007-input-unit) / 3) calc(var(--t007-input-unit) / 2.5);
+    background: var(--t007-input-option-bg);
+    color: var(--t007-input-option-color);
+    border: var(--t007-input-option-border);
+    transition-property: opacity, scale;
+    transition-duration: var(--t007-input-select-transition-time);
+    transition-delay: calc((sibling-count() - sibling-index()) * var(--t007-input-option-stagger-delay));
+    scale: var(--t007-input-option-entry-scale);
+    opacity: 0;
+  }
+  .t007-input-bleeding-edge :is(#o, select) option:is(:checked, :focus) {
+    color: var(--t007-input-option-active-color);
+  }
+  .t007-input-bleeding-edge :is(#o, select) option:checked {
+    background: var(--t007-input-option-checked-bg);
+    border: var(--t007-input-option-checked-border);
+  }
+  .t007-input-bleeding-edge :is(#o, select) option:focus {
+    border: var(--t007-input-option-focus-border);
+  }
+  .t007-input-bleeding-edge :is(#o, select) option:hover {
+    background: var(--t007-input-option-hover-bg);
+  }
+  .t007-input-bleeding-edge :is(#o, select) option:checked:hover {
+    background: var(--t007-input-option-checked-hover-bg);
+  }
+  .t007-input-bleeding-edge :is(#o, select) option:focus-visible {
+    outline: none !important;
+  }
+  .t007-input-bleeding-edge :is(#o, select) option::checkmark {
+    display: none;
+  }
+  .t007-input-bleeding-edge :is(#o, select):open option {
+    scale: 1;
+    opacity: 1;
+    transition-delay: calc(sibling-index() * var(--t007-input-option-stagger-delay));
+  }
+  @starting-style {
+    .t007-input-bleeding-edge :is(#o, select):open option {
+      scale: var(--t007-input-option-entry-scale);
+      opacity: 0;
+    }
+  }
+}
+.t007-input-bleeding-edge:has(input[type=color]) {
+  --t007-input-width: var(--t007-input-height);
+  --t007-input-padding: 0;
+  --t007-input-border-radius: calc(var(--t007-input-height) / 2);
+}
+.t007-input-bleeding-edge:has(input[type=color]) .t007-input-wrapper {
+  box-shadow: 0 0 calc(var(--t007-input-unit) / 2.1) var(--input-color);
+}
+.t007-input-bleeding-edge:has(input[type=color]) .t007-input-outline-notch {
+  max-width: 0;
+}
+.t007-input-bleeding-edge input[type=color] {
+  width: var(--t007-input-height);
+  height: var(--t007-input-height);
+  padding: 0;
+}
+.t007-input-bleeding-edge input[type=color]::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+.t007-input-bleeding-edge input[type=color]::-webkit-color-swatch {
+  border: var(--t007-input-color-border);
+  border-radius: var(--t007-input-color-radius);
+}
+.t007-input-bleeding-edge input[type=color]::-moz-color-swatch {
+  border: var(--t007-input-color-border);
+  border-radius: var(--t007-input-color-radius);
+}

package/dist/index.d.ts

@@ -54,20 +54,20 @@ export interface FormManager {
   /** Attach a fallback helper node.
    * @param field Field wrapper element.
    */
-  setFallbackHelper(field: HTMLElement): void;
+  setFallbackHelper(field: HTMLDivElement): void;
   /** Wire listeners onto a managed field.
    * @param field Field wrapper element.
    */
-  setFieldListeners(field: HTMLElement): void;
+  setFieldListeners(field: HTMLDivElement): void;
   /** Normalize field markup before use.
    * @param field Field wrapper element.
    */
-  setUpField(field: HTMLElement): void;
+  setUpField(field: HTMLDivElement): void;
   /** Create a field element from options.
    * @param options Field configuration.
    * @returns Created field element.
    */
-  field(options: FieldOptions): HTMLElement;
+  field(options: FieldOptions): HTMLDivElement;
   /** Validate a form and attach the proper hooks.
    * @param form Form element to validate.
    */
@@ -82,11 +82,11 @@ export const formManager: FormManager;
  * @param options Field configuration.
  * @returns Created field element.
  */
-export const field = FormManager["field"];
+export const field: FormManager["field"];
 /** Attach validation hooks to a form element.
  * @param form Form element to validate.
  */
-export const handleFormValidation = FormManager["handleFormValidation"];
+export const handleFormValidation: FormManager["handleFormValidation"];
 
 declare global {
   interface T007Namespace {

package/dist/index.global.js

@@ -17,7 +17,7 @@
     }
   }
 
-  // ../../../sia-reactor/dist/chunk-EZ4VRGYI.js
+  // ../../../sia-reactor/dist/chunk-4PLMBUCP.js
   var CTX = {
     /** Flag indicating whether the application is running in development mode. */
     isDevEnv: "undefined" !== typeof process ? process.env.NODE_ENV !== "production" : true,
@@ -30,7 +30,7 @@
   var RTR_LOG = console.log.bind(console, "[S.I.A Reactor]");
   var NIL = Object.freeze({});
 
-  // ../utils/dist/chunk-Y5YJMRXD.js
+  // ../utils/dist/chunk-4O76EZJ4.js
   var INTERACTIVE_SELECTOR = ":is(button,[href],input:not([type='hidden']),select,textarea,details>summary,[contenteditable='true'],iframe,audio[controls],video[controls],[tabindex]):not([disabled],[tabindex='-1'],[data-focus-guard],[inert],[inert] *)";
   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) {
@@ -69,15 +69,18 @@
   function isArr(obj) {
     return Array.isArray(obj);
   }
-  function isSameURL(src1, src2) {
-    if (!isStr(src1) || !isStr(src2) || !src1 || !src2) return false;
+  function cleanURL(url) {
     try {
-      const u1 = new URL(src1, window.location.href), u2 = new URL(src2, window.location.href);
-      return decodeURIComponent(u1.origin + u1.pathname) === decodeURIComponent(u2.origin + u2.pathname);
+      const u = new URL(url, window.location.href);
+      return decodeURIComponent(u.origin + u.pathname);
     } catch {
-      return src1.replace(/\\/g, "/").split("?")[0].trim() === src2.replace(/\\/g, "/").split("?")[0].trim();
+      return url.replace(/\\/g, "/").split("?")[0].trim();
     }
   }
+  function isSameURL(url1, url2) {
+    if (!isStr(url1) || !isStr(url2) || !url1 || !url2) return false;
+    return cleanURL(url1) === cleanURL(url2);
+  }
   function formatSize(bytes, decimals = 3, base = 1e3) {
     if (bytes < base) return `${bytes} byte${bytes == 1 ? "" : "s"}`;
     const units = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"], exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(base)), units.length - 1);
@@ -226,7 +229,9 @@
     getFilesHelper: (files, opts) => getFilesHelper(files, opts),
     formatSize: (size, decimals = 3, base = 1e3) => formatSize(size, decimals, base),
     togglePasswordType: (input) => input.type = input.type === "password" ? "text" : "password",
-    toggleFilled: (input) => input?.toggleAttribute("data-filled", input.type === "checkbox" || input.type === "radio" ? input.checked : input.value !== "" || input.files?.length > 0),
+    toggleFilled(input) {
+      input.toggleAttribute("data-filled", input.type === "checkbox" || input.type === "radio" ? input.checked : input.value !== "" || input.files?.length > 0), input.type === "color" && input.t007Field.style.setProperty("--input-color", input.value);
+    },
     setFallbackHelper(field2) {
       const helperTextWrapper = field2?.querySelector(".t007-input-helper-text-wrapper");
       !helperTextWrapper?.querySelector(".t007-input-helper-text[data-violation='auto']") && helperTextWrapper?.append(createEl("p", { className: "t007-input-helper-text" }, { violation: "auto" }));
@@ -260,12 +265,13 @@
       initScrollAssist(field2.querySelector(".t007-input-helper-text-wrapper"), { vertical: false });
     },
     setUpField(field2) {
-      if (field2.dataset.setUp) return;
-      t007.FM.toggleFilled(field2.querySelector(".t007-input")), t007.FM.setFallbackHelper(field2), t007.FM.setFieldListeners(field2);
-      field2.dataset.setUp = "true";
+      if (field2.dataset.setup) return;
+      const input = field2.querySelector(".t007-input");
+      t007.FM.toggleFilled((input.t007Field = field2, input)), t007.FM.setFallbackHelper(field2), t007.FM.setFieldListeners(field2);
+      field2.dataset.setup = "true";
     },
-    field({ isWrapper = false, label = "", type = "text", placeholder = "", custom = "", minSize, maxSize, minTotalSize, maxTotalSize, options = [], indeterminate = false, eyeToggler = true, passwordMeter = true, helperText = {}, className = "", fieldClassName = "", children, startIcon = "", endIcon = "", nativeIcon = "", passwordVisibleIcon = "", passwordHiddenIcon = "", ...otherProps }) {
-      const isSelect = type === "select", isTextArea = type === "textarea", isCheckboxOrRadio = type === "checkbox" || type === "radio", field2 = createEl("div", { className: `t007-input-field${isWrapper ? " t007-input-is-wrapper" : ""}${indeterminate ? " t007-input-indeterminate" : ""}${!!nativeIcon ? " t007-input-icon-override" : ""}${helperText === false ? " t007-input-no-helper" : ""}${fieldClassName ? ` ${fieldClassName}` : ""}` }), labelEl = createEl("label", { className: isCheckboxOrRadio ? `t007-input-${type}-wrapper` : "t007-input-wrapper" });
+    field({ isWrapper = false, label = "", type = "text", placeholder = "", custom = "", minSize, maxSize, minTotalSize, maxTotalSize, options = [], indeterminate = false, eyeToggler = true, passwordMeter = true, helperText = {}, className = "", fieldClassName = "", children, startIcon = "", endIcon = "", nativeIcon = "", passwordVisibleIcon = "", passwordHiddenIcon = "", bleedingEdge = true, ...otherProps }) {
+      const isSelect = type === "select", isTextArea = type === "textarea", isCheckboxOrRadio = type === "checkbox" || type === "radio", field2 = createEl("div", { className: `t007-input-field${isWrapper ? " t007-input-is-wrapper" : ""}${indeterminate ? " t007-input-indeterminate" : ""}${!!nativeIcon ? " t007-input-icon-override" : ""}${helperText === false ? " t007-input-no-helper" : ""}${fieldClassName ? ` ${fieldClassName}` : ""}${bleedingEdge ? " t007-input-bleeding-edge" : ""}` }), labelEl = createEl("label", { className: isCheckboxOrRadio ? `t007-input-${type}-wrapper` : "t007-input-wrapper" });
       field2.append(labelEl);
       if (isCheckboxOrRadio) {
         labelEl.innerHTML = `
@@ -344,7 +350,7 @@
         form.classList.toggle("t007-input-submit-loading", false);
       });
       function toggleError(input, bool, flag = false) {
-        const field2 = input.closest(".t007-input-field"), floatingLabel = field2.querySelector(".t007-input-floating-label");
+        const field2 = input.t007Field, floatingLabel = field2.querySelector(".t007-input-floating-label");
         if (bool && flag) {
           input.setAttribute("data-error", "");
           floatingLabel?.classList.add("t007-input-shake"), setTimeout(() => floatingLabel?.classList.remove("t007-input-shake"), 520);
@@ -352,17 +358,17 @@
         toggleHelper(input, input.hasAttribute("data-error"));
       }
       function toggleHelper(input, bool) {
-        const field2 = input.closest(".t007-input-field"), violation = t007.FM.violationKeys.find((violation2) => input.Validity?.[violation2] || input.validity[violation2]) ?? "", helper = field2.querySelector(`.t007-input-helper-text[data-violation="${violation}"]`), fallbackHelper = field2.querySelector(`.t007-input-helper-text[data-violation="auto"]`);
-        input.closest(".t007-input-field").querySelectorAll(`.t007-input-helper-text:not([data-violation="${violation}"])`).forEach((helper2) => helper2?.classList.remove("t007-input-show"));
+        const field2 = input.t007Field, violation = t007.FM.violationKeys.find((violation2) => input.Validity?.[violation2] || input.validity[violation2]) ?? "", helper = field2.querySelector(`.t007-input-helper-text[data-violation="${violation}"]`), fallbackHelper = field2.querySelector(`.t007-input-helper-text[data-violation="auto"]`);
+        input.t007Field.querySelectorAll(`.t007-input-helper-text:not([data-violation="${violation}"])`).forEach((helper2) => helper2?.classList.remove("t007-input-show"));
         if (helper) helper.classList.toggle("t007-input-show", bool);
         else if (fallbackHelper) fallbackHelper.textContent = input.validationMessage, fallbackHelper.classList.toggle("t007-input-show", bool);
       }
       function updatePasswordMeter(input) {
-        const passwordMeter = input.closest(".t007-input-field").querySelector(".t007-input-password-meter");
+        const passwordMeter = input.t007Field.querySelector(".t007-input-password-meter");
         if (passwordMeter) passwordMeter.dataset.strengthLevel = `${getStrengthLevel(input.value, Number(input.minLength ?? 0))}`;
       }
       function validateInput(input, flag = false) {
-        if (form.dataset.globalError || !input?.classList.contains("t007-input")) return;
+        if (form.dataset.globalError || !input.classList.contains("t007-input")) return;
         updatePasswordMeter(input);
         let value, errorBool;
         switch (input.custom ?? input.getAttribute("custom")) {

package/dist/index.js

@@ -65,7 +65,9 @@ var formManager = {
   getFilesHelper: (files, opts) => getFilesHelper(files, opts),
   formatSize: (size, decimals = 3, base = 1e3) => formatFileSize(size, decimals, base),
   togglePasswordType: (input) => input.type = input.type === "password" ? "text" : "password",
-  toggleFilled: (input) => input?.toggleAttribute("data-filled", input.type === "checkbox" || input.type === "radio" ? input.checked : input.value !== "" || input.files?.length > 0),
+  toggleFilled(input) {
+    input.toggleAttribute("data-filled", input.type === "checkbox" || input.type === "radio" ? input.checked : input.value !== "" || input.files?.length > 0), input.type === "color" && input.t007Field.style.setProperty("--input-color", input.value);
+  },
   setFallbackHelper(field2) {
     const helperTextWrapper = field2?.querySelector(".t007-input-helper-text-wrapper");
     !helperTextWrapper?.querySelector(".t007-input-helper-text[data-violation='auto']") && helperTextWrapper?.append(createEl("p", { className: "t007-input-helper-text" }, { violation: "auto" }));
@@ -99,12 +101,13 @@ var formManager = {
     initScrollAssist(field2.querySelector(".t007-input-helper-text-wrapper"), { vertical: false });
   },
   setUpField(field2) {
-    if (field2.dataset.setUp) return;
-    t007.FM.toggleFilled(field2.querySelector(".t007-input")), t007.FM.setFallbackHelper(field2), t007.FM.setFieldListeners(field2);
-    field2.dataset.setUp = "true";
+    if (field2.dataset.setup) return;
+    const input = field2.querySelector(".t007-input");
+    t007.FM.toggleFilled((input.t007Field = field2, input)), t007.FM.setFallbackHelper(field2), t007.FM.setFieldListeners(field2);
+    field2.dataset.setup = "true";
   },
-  field({ isWrapper = false, label = "", type = "text", placeholder = "", custom = "", minSize, maxSize, minTotalSize, maxTotalSize, options = [], indeterminate = false, eyeToggler = true, passwordMeter = true, helperText = {}, className = "", fieldClassName = "", children, startIcon = "", endIcon = "", nativeIcon = "", passwordVisibleIcon = "", passwordHiddenIcon = "", ...otherProps }) {
-    const isSelect = type === "select", isTextArea = type === "textarea", isCheckboxOrRadio = type === "checkbox" || type === "radio", field2 = createEl("div", { className: `t007-input-field${isWrapper ? " t007-input-is-wrapper" : ""}${indeterminate ? " t007-input-indeterminate" : ""}${!!nativeIcon ? " t007-input-icon-override" : ""}${helperText === false ? " t007-input-no-helper" : ""}${fieldClassName ? ` ${fieldClassName}` : ""}` }), labelEl = createEl("label", { className: isCheckboxOrRadio ? `t007-input-${type}-wrapper` : "t007-input-wrapper" });
+  field({ isWrapper = false, label = "", type = "text", placeholder = "", custom = "", minSize, maxSize, minTotalSize, maxTotalSize, options = [], indeterminate = false, eyeToggler = true, passwordMeter = true, helperText = {}, className = "", fieldClassName = "", children, startIcon = "", endIcon = "", nativeIcon = "", passwordVisibleIcon = "", passwordHiddenIcon = "", bleedingEdge = true, ...otherProps }) {
+    const isSelect = type === "select", isTextArea = type === "textarea", isCheckboxOrRadio = type === "checkbox" || type === "radio", field2 = createEl("div", { className: `t007-input-field${isWrapper ? " t007-input-is-wrapper" : ""}${indeterminate ? " t007-input-indeterminate" : ""}${!!nativeIcon ? " t007-input-icon-override" : ""}${helperText === false ? " t007-input-no-helper" : ""}${fieldClassName ? ` ${fieldClassName}` : ""}${bleedingEdge ? " t007-input-bleeding-edge" : ""}` }), labelEl = createEl("label", { className: isCheckboxOrRadio ? `t007-input-${type}-wrapper` : "t007-input-wrapper" });
     field2.append(labelEl);
     if (isCheckboxOrRadio) {
       labelEl.innerHTML = `
@@ -183,7 +186,7 @@ var formManager = {
       form.classList.toggle("t007-input-submit-loading", false);
     });
     function toggleError(input, bool, flag = false) {
-      const field2 = input.closest(".t007-input-field"), floatingLabel = field2.querySelector(".t007-input-floating-label");
+      const field2 = input.t007Field, floatingLabel = field2.querySelector(".t007-input-floating-label");
       if (bool && flag) {
         input.setAttribute("data-error", "");
         floatingLabel?.classList.add("t007-input-shake"), setTimeout(() => floatingLabel?.classList.remove("t007-input-shake"), 520);
@@ -191,17 +194,17 @@ var formManager = {
       toggleHelper(input, input.hasAttribute("data-error"));
     }
     function toggleHelper(input, bool) {
-      const field2 = input.closest(".t007-input-field"), violation = t007.FM.violationKeys.find((violation2) => input.Validity?.[violation2] || input.validity[violation2]) ?? "", helper = field2.querySelector(`.t007-input-helper-text[data-violation="${violation}"]`), fallbackHelper = field2.querySelector(`.t007-input-helper-text[data-violation="auto"]`);
-      input.closest(".t007-input-field").querySelectorAll(`.t007-input-helper-text:not([data-violation="${violation}"])`).forEach((helper2) => helper2?.classList.remove("t007-input-show"));
+      const field2 = input.t007Field, violation = t007.FM.violationKeys.find((violation2) => input.Validity?.[violation2] || input.validity[violation2]) ?? "", helper = field2.querySelector(`.t007-input-helper-text[data-violation="${violation}"]`), fallbackHelper = field2.querySelector(`.t007-input-helper-text[data-violation="auto"]`);
+      input.t007Field.querySelectorAll(`.t007-input-helper-text:not([data-violation="${violation}"])`).forEach((helper2) => helper2?.classList.remove("t007-input-show"));
       if (helper) helper.classList.toggle("t007-input-show", bool);
       else if (fallbackHelper) fallbackHelper.textContent = input.validationMessage, fallbackHelper.classList.toggle("t007-input-show", bool);
     }
     function updatePasswordMeter(input) {
-      const passwordMeter = input.closest(".t007-input-field").querySelector(".t007-input-password-meter");
+      const passwordMeter = input.t007Field.querySelector(".t007-input-password-meter");
       if (passwordMeter) passwordMeter.dataset.strengthLevel = `${getStrengthLevel(input.value, Number(input.minLength ?? 0))}`;
     }
     function validateInput(input, flag = false) {
-      if (form.dataset.globalError || !input?.classList.contains("t007-input")) return;
+      if (form.dataset.globalError || !input.classList.contains("t007-input")) return;
       updatePasswordMeter(input);
       let value, errorBool;
       switch (input.custom ?? input.getAttribute("custom")) {

package/dist/react.d.ts

@@ -48,6 +48,8 @@ interface BaseProps {
   /** End icon rendered inside the field control. */
   endIcon?: React.ReactNode;
   // onFlagError?: (args: { violation: keyof ValidityState | null; helper: string }) => void;
+  /** Whether to activate bleeding edge CSS styles that augment native styles for input types, e.g. file, color, select, e.t.c */
+  bleedingEdge?: boolean;
 }
 type PasswordInputProps = BaseProps & InputAttributes & PasswordInputAddon;
 type FileInputProps = BaseProps & InputAttributes & FileInputAddon;

package/dist/react.js

@@ -63,7 +63,7 @@ var isNativeIconType = (t) => nativeIconTypes.includes(t);
 import { useScrollAssist } from "@t007/utils/hooks/react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var Input = React.forwardRef(function Input2(props, ref) {
-  const { isWrapper = false, label = "", type = "text", helperText, error, custom = "", className, fieldClassName, children, endIcon, ...otherProps } = props;
+  const { isWrapper = false, label = "", type = "text", helperText, error, custom = "", className = "", fieldClassName = "", children, endIcon, bleedingEdge = true, ...otherProps } = props;
   let options;
   let indeterminate = false;
   let minLength;
@@ -147,7 +147,7 @@ var Input = React.forwardRef(function Input2(props, ref) {
     const el = inputRef.current;
     if (!el) return;
     const form = el.closest("form");
-    setFilled(hasValue(el));
+    setFilled(hasValue(el)), el.type === "color" && el.closest(".t007-input-field")?.style.setProperty("--input-color", el.value);
     updatePasswordStrength(el.value);
     if (custom === "confirm_password") {
       const passwordInput = form?.querySelector("[custom='password']");
@@ -156,7 +156,7 @@ var Input = React.forwardRef(function Input2(props, ref) {
       const confirmInput = form?.querySelector("[custom='confirm_password']");
       if (confirmInput) confirmInput.setCustomValidity(el.value.trim() === confirmInput.value.trim() ? "" : "Both passwords do not match");
     }
-    if (el.type === "radio") el?.closest("form")?.querySelectorAll(".t007-input[name='radio']").forEach(fireInput);
+    if (el.type === "radio") form?.querySelectorAll(".t007-input[name='radio']").forEach(fireInput);
     validateInput(el);
   }, [custom, hasValue, updatePasswordStrength, validateInput]);
   useEffect(() => void fireInput(inputRef.current), []);
@@ -164,7 +164,7 @@ var Input = React.forwardRef(function Input2(props, ref) {
   useScrollAssist(helperTextWrapperRef, { pxPerSecond: 80 });
   useImperativeHandle(ref, () => inputRef.current);
   const Wrapper = isWrapper ? "div" : "label";
-  return /* @__PURE__ */ jsxs("div", { className: `t007-input-field ${fieldClassName}${isWrapper ? " t007-input-is-wrapper" : ""}${indeterminate ? " t007-input-indeterminate" : ""}${nativeIcon ? " t007-input-icon-override" : ""}${helperText === false ? " t007-input-no-helper" : ""}`, children: [
+  return /* @__PURE__ */ jsxs("div", { className: `t007-input-field ${fieldClassName}${isWrapper ? " t007-input-is-wrapper" : ""}${indeterminate ? " t007-input-indeterminate" : ""}${nativeIcon ? " t007-input-icon-override" : ""}${helperText === false ? " t007-input-no-helper" : ""}${bleedingEdge ? " t007-input-bleeding-edge" : ""}`, children: [
     /* @__PURE__ */ jsxs(Wrapper, { className: type === "checkbox" || type === "radio" ? `t007-input-${type}-wrapper` : "t007-input-wrapper", children: [
       type === "checkbox" || type === "radio" ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("span", { className: `t007-input-${type}-box`, children: /* @__PURE__ */ jsx("span", { className: `t007-input-${type}-tag` }) }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t007/input",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "description": "A lightweight, pure JS input system.",
   "author": "Oketade Oluwatobiloba <tobioketade007@gmail.com>",
   "license": "MIT",
@@ -68,7 +68,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@t007/utils": "^0.0.31"
+    "@t007/utils": "^0.0.33"
   },
   "peerDependencies": {
     "react": "^18.0.0"