@citizenplane/pimp 8.0.0 → 8.0.1

package/dist/pimp.es.js

@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createBlock, createCommentVNode, createElementVNode, resolveDynamicComponent, mergeProps, withCtx, createVNode, createTextVNode, toDisplayString, withDirectives, vModelText, Fragment, renderList, vModelSelect, defineComponent, watch, h as h$1, resolveDirective, Transition, normalizeStyle, withKeys, TransitionGroup, vShow, withModifiers, vModelCheckbox } from "vue";
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createBlock, createCommentVNode, createElementVNode, resolveDynamicComponent, mergeProps, withCtx, createVNode, resolveDirective, createTextVNode, toDisplayString, withDirectives, vModelText, Fragment, renderList, vModelSelect, defineComponent, watch, h as h$1, Transition, normalizeStyle, withKeys, TransitionGroup, vShow, ref, withModifiers, vModelCheckbox } from "vue";
 function _mergeNamespaces(n2, m) {
   m.forEach(function(e2) {
     e2 && typeof e2 !== "string" && !Array.isArray(e2) && Object.keys(e2).forEach(function(k2) {
@@ -461,15 +461,14 @@ function floorMod(x, n2) {
   return x - n2 * Math.floor(x / n2);
 }
 function padStart(input, n2 = 2) {
-  const minus = input < 0 ? "-" : "";
-  const target = minus ? input * -1 : input;
-  let result;
-  if (target.toString().length < n2) {
-    result = ("0".repeat(n2) + target).slice(-n2);
+  const isNeg = input < 0;
+  let padded;
+  if (isNeg) {
+    padded = "-" + ("" + -input).padStart(n2, "0");
   } else {
-    result = target.toString();
+    padded = ("" + input).padStart(n2, "0");
   }
-  return `${minus}${result}`;
+  return padded;
 }
 function parseInteger(string) {
   if (isUndefined(string) || string === null || string === "") {
@@ -1309,6 +1308,16 @@ class Settings {
     IANAZone.resetCache();
   }
 }
+let intlLFCache = {};
+function getCachedLF(locString, opts = {}) {
+  const key = JSON.stringify([locString, opts]);
+  let dtf = intlLFCache[key];
+  if (!dtf) {
+    dtf = new Intl.ListFormat(locString, opts);
+    intlLFCache[key] = dtf;
+  }
+  return dtf;
+}
 let intlDTCache = {};
 function getCachedDTF(locString, opts = {}) {
   const key = JSON.stringify([locString, opts]);
@@ -1416,8 +1425,9 @@ class PolyNumberFormatter {
   constructor(intl, forceSimple, opts) {
     this.padTo = opts.padTo || 0;
     this.floor = opts.floor || false;
-    if (!forceSimple) {
-      const intlOpts = { useGrouping: false };
+    const _a = opts, { padTo, floor } = _a, otherOpts = __objRest(_a, ["padTo", "floor"]);
+    if (!forceSimple || Object.keys(otherOpts).length > 0) {
+      const intlOpts = __spreadValues({ useGrouping: false }, opts);
       if (opts.padTo > 0)
         intlOpts.minimumIntegerDigits = opts.padTo;
       this.inf = getCachedINF(intl, intlOpts);
@@ -1534,7 +1544,7 @@ class Locale {
     }
     return this.fastNumbersCached;
   }
-  listingMode(defaultOK = true) {
+  listingMode() {
     const isActuallyEn = this.isEnglish();
     const hasNoWeirdness = (this.numberingSystem === null || this.numberingSystem === "latn") && (this.outputCalendar === null || this.outputCalendar === "gregory");
     return isActuallyEn && hasNoWeirdness ? "en" : "intl";
@@ -1601,6 +1611,9 @@ class Locale {
   relFormatter(opts = {}) {
     return new PolyRelFormatter(this.intl, this.isEnglish(), opts);
   }
+  listFormatter(opts = {}) {
+    return getCachedLF(this.intl, opts);
+  }
   isEnglish() {
     return this.locale === "en" || this.locale.toLowerCase() === "en-us" || new Intl.DateTimeFormat(this.intl).resolvedOptions().locale.startsWith("en-us");
   }
@@ -2001,6 +2014,16 @@ class Duration {
     });
     return this.isValid ? Formatter.create(this.loc, fmtOpts).formatDurationFromString(this, fmt) : INVALID$2;
   }
+  toHuman(opts = {}) {
+    const l2 = orderedUnits$1.map((unit) => {
+      const val = this.values[unit];
+      if (isUndefined(val)) {
+        return null;
+      }
+      return this.loc.numberFormatter(__spreadProps(__spreadValues({ style: "unit", unitDisplay: "long" }, opts), { unit: unit.slice(0, -1) })).format(val);
+    }).filter((n2) => n2);
+    return this.loc.listFormatter(__spreadValues({ type: "conjunction", style: opts.listStyle || "narrow" }, opts)).format(l2);
+  }
   toObject() {
     if (!this.isValid)
       return {};
@@ -3190,35 +3213,57 @@ function toTechFormat(dt, format, allowZ = true) {
     forceSimple: true
   }).formatDateTimeFromString(dt, format) : null;
 }
-function toTechTimeFormat(dt, {
-  suppressSeconds = false,
-  suppressMilliseconds = false,
-  includeOffset,
-  includePrefix = false,
-  includeZone = false,
-  spaceZone = false,
-  format = "extended"
-}) {
-  let fmt = format === "basic" ? "HHmm" : "HH:mm";
-  if (!suppressSeconds || dt.second !== 0 || dt.millisecond !== 0) {
-    fmt += format === "basic" ? "ss" : ":ss";
-    if (!suppressMilliseconds || dt.millisecond !== 0) {
-      fmt += ".SSS";
-    }
-  }
-  if ((includeZone || includeOffset) && spaceZone) {
-    fmt += " ";
-  }
-  if (includeZone) {
-    fmt += "z";
-  } else if (includeOffset) {
-    fmt += format === "basic" ? "ZZZ" : "ZZ";
+function toISODate(o2, extended) {
+  const longFormat = o2.c.year > 9999 || o2.c.year < 0;
+  let c2 = "";
+  if (longFormat && o2.c.year >= 0)
+    c2 += "+";
+  c2 += padStart(o2.c.year, longFormat ? 6 : 4);
+  if (extended) {
+    c2 += "-";
+    c2 += padStart(o2.c.month);
+    c2 += "-";
+    c2 += padStart(o2.c.day);
+  } else {
+    c2 += padStart(o2.c.month);
+    c2 += padStart(o2.c.day);
   }
-  let str = toTechFormat(dt, fmt);
-  if (includePrefix) {
-    str = "T" + str;
+  return c2;
+}
+function toISOTime(o2, extended, suppressSeconds, suppressMilliseconds, includeOffset) {
+  let c2 = padStart(o2.c.hour);
+  if (extended) {
+    c2 += ":";
+    c2 += padStart(o2.c.minute);
+    if (o2.c.second !== 0 || !suppressSeconds) {
+      c2 += ":";
+    }
+  } else {
+    c2 += padStart(o2.c.minute);
+  }
+  if (o2.c.second !== 0 || !suppressSeconds) {
+    c2 += padStart(o2.c.second);
+    if (o2.c.millisecond !== 0 || !suppressMilliseconds) {
+      c2 += ".";
+      c2 += padStart(o2.c.millisecond, 3);
+    }
+  }
+  if (includeOffset) {
+    if (o2.isOffsetFixed && o2.offset === 0) {
+      c2 += "Z";
+    } else if (o2.o < 0) {
+      c2 += "-";
+      c2 += padStart(Math.trunc(-o2.o / 60));
+      c2 += ":";
+      c2 += padStart(Math.trunc(-o2.o % 60));
+    } else {
+      c2 += "+";
+      c2 += padStart(Math.trunc(o2.o / 60));
+      c2 += ":";
+      c2 += padStart(Math.trunc(o2.o % 60));
+    }
   }
-  return str;
+  return c2;
 }
 const defaultUnitValues = {
   month: 1,
@@ -3746,18 +3791,26 @@ class DateTime {
   toLocaleParts(opts = {}) {
     return this.isValid ? Formatter.create(this.loc.clone(opts), opts).formatDateTimeParts(this) : [];
   }
-  toISO(opts = {}) {
+  toISO({
+    format = "extended",
+    suppressSeconds = false,
+    suppressMilliseconds = false,
+    includeOffset = true
+  } = {}) {
     if (!this.isValid) {
       return null;
     }
-    return `${this.toISODate(opts)}T${this.toISOTime(opts)}`;
+    const ext = format === "extended";
+    let c2 = toISODate(this, ext);
+    c2 += "T";
+    c2 += toISOTime(this, ext, suppressSeconds, suppressMilliseconds, includeOffset);
+    return c2;
   }
   toISODate({ format = "extended" } = {}) {
-    let fmt = format === "basic" ? "yyyyMMdd" : "yyyy-MM-dd";
-    if (this.year > 9999) {
-      fmt = "+" + fmt;
+    if (!this.isValid) {
+      return null;
     }
-    return toTechFormat(this, fmt);
+    return toISODate(this, format === "extended");
   }
   toISOWeekDate() {
     return toTechFormat(this, "kkkk-'W'WW-c");
@@ -3769,13 +3822,11 @@ class DateTime {
     includePrefix = false,
     format = "extended"
   } = {}) {
-    return toTechTimeFormat(this, {
-      suppressSeconds,
-      suppressMilliseconds,
-      includeOffset,
-      includePrefix,
-      format
-    });
+    if (!this.isValid) {
+      return null;
+    }
+    let c2 = includePrefix ? "T" : "";
+    return c2 + toISOTime(this, format === "extended", suppressSeconds, suppressMilliseconds, includeOffset);
   }
   toRFC2822() {
     return toTechFormat(this, "EEE, dd LLL yyyy HH:mm:ss ZZZ", false);
@@ -3784,14 +3835,22 @@ class DateTime {
     return toTechFormat(this.toUTC(), "EEE, dd LLL yyyy HH:mm:ss 'GMT'");
   }
   toSQLDate() {
-    return toTechFormat(this, "yyyy-MM-dd");
+    if (!this.isValid) {
+      return null;
+    }
+    return toISODate(this, true);
   }
   toSQLTime({ includeOffset = true, includeZone = false } = {}) {
-    return toTechTimeFormat(this, {
-      includeOffset,
-      includeZone,
-      spaceZone: true
-    });
+    let fmt = "HH:mm:ss.SSS";
+    if (includeZone || includeOffset) {
+      fmt += " ";
+      if (includeZone) {
+        fmt += "z";
+      } else if (includeOffset) {
+        fmt += "ZZ";
+      }
+    }
+    return toTechFormat(this, fmt, true);
   }
   toSQL(opts = {}) {
     if (!this.isValid) {
@@ -3849,8 +3908,8 @@ class DateTime {
     if (!this.isValid)
       return false;
     const inputMs = otherDateTime.valueOf();
-    const otherZoneDateTime = this.setZone(otherDateTime.zone, { keepLocalTime: true });
-    return otherZoneDateTime.startOf(unit) <= inputMs && inputMs <= otherZoneDateTime.endOf(unit);
+    const adjustedToZone = this.setZone(otherDateTime.zone, { keepLocalTime: true });
+    return adjustedToZone.startOf(unit) <= inputMs && inputMs <= adjustedToZone.endOf(unit);
   }
   equals(other) {
     return this.isValid && other.isValid && this.valueOf() === other.valueOf() && this.zone.equals(other.zone) && this.loc.equals(other.loc);
@@ -4349,6 +4408,18 @@ const _sfc_main$g = {
     disabled: {
       type: Boolean,
       default: false
+    },
+    isInvalid: {
+      type: Boolean,
+      default: false
+    },
+    errorMessage: {
+      type: String,
+      default: ""
+    },
+    autocompleteBirthday: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ["update:modelValue", "on-validation"],
@@ -4412,11 +4483,9 @@ const _sfc_main$g = {
       return this.day === "" && this.month === "" && this.year === "";
     },
     isDateValid() {
-      if (!this.required && this.areInputsEmpty)
+      if (this.areInputsEmpty && !this.errorMessage)
         return true;
-      const isValid = this.isDayValid && this.isMonthValid && this.isYearValid && this.isDateBeforeMaxDate && this.isDateAfterMinDate;
-      this.$emit("on-validation", isValid);
-      return isValid;
+      return !this.isInvalid && this.isDayValid && this.isMonthValid && this.isYearValid && this.isDateBeforeMaxDate && this.isDateAfterMinDate;
     },
     isDayValid() {
       return this.day >= 1 && this.day <= this.monthMaxDay;
@@ -4430,10 +4499,11 @@ const _sfc_main$g = {
     areAllFieldsEmpty() {
       return !this.day && !this.month && !this.year;
     },
-    errorMessage() {
-      if (this.areAllFieldsEmpty && this.required) {
-        return `The ${this.label} field is required.`;
-      }
+    advancedErrorMessage() {
+      if (this.isDateValid)
+        return "";
+      if (this.errorMessage)
+        return this.errorMessage;
       if (!this.isMonthValid) {
         return "Month is required.";
       }
@@ -4463,6 +4533,15 @@ const _sfc_main$g = {
       return {
         "cpDate__month--isEmpty": !this.month
       };
+    },
+    autocompleteFields() {
+      if (!this.autocompleteBirthday)
+        return "off";
+      return {
+        day: "bday-day",
+        month: "bday-month",
+        year: "bday-year"
+      };
     }
   },
   watch: {
@@ -4471,7 +4550,6 @@ const _sfc_main$g = {
     },
     month() {
       this.handleUpdate();
-      this.focusOnFirstEmptyInput();
     },
     year() {
       this.handleUpdate();
@@ -4484,31 +4562,20 @@ const _sfc_main$g = {
       return DateTime.fromISO(this.modelValue)[token];
     },
     handleUpdate() {
-      const dateValue = this.isDateValid ? this.isoDate : "Invalid Datetime";
-      this.$emit("update:modelValue", dateValue);
-    },
-    focusOnFirstEmptyInput() {
-      if (!this.isDayValid) {
-        this.$refs.day.focus();
-        return;
-      }
-      if (!this.isYearValid)
-        this.$refs.year.focus();
+      this.$emit("update:modelValue", this.isoDate);
+      this.$emit("on-validation", this.isDateValid);
     }
   }
 };
 const _hoisted_1$d = ["for"];
 const _hoisted_2$c = { class: "cpDate__inputs" };
-const _hoisted_3$9 = ["required", "disabled"];
+const _hoisted_3$9 = ["required", "disabled", "autocomplete"];
 const _hoisted_4$9 = /* @__PURE__ */ createElementVNode("div", { class: "cpDate__divider" }, null, -1);
-const _hoisted_5$7 = ["id", "required", "disabled"];
-const _hoisted_6$6 = /* @__PURE__ */ createElementVNode("option", {
-  value: "",
-  disabled: ""
-}, "Month", -1);
+const _hoisted_5$7 = ["id", "required", "disabled", "autocomplete"];
+const _hoisted_6$6 = /* @__PURE__ */ createElementVNode("option", { value: "" }, "Month", -1);
 const _hoisted_7$5 = ["value"];
 const _hoisted_8$4 = /* @__PURE__ */ createElementVNode("div", { class: "cpDate__divider" }, null, -1);
-const _hoisted_9$4 = ["min", "max", "disabled", "required"];
+const _hoisted_9$4 = ["disabled", "required", "autocomplete"];
 const _hoisted_10$4 = {
   key: 0,
   class: "cpDate__errorMessage"
@@ -4516,6 +4583,7 @@ const _hoisted_10$4 = {
 function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_cp_icon = resolveComponent("cp-icon");
   const _component_transition_expand = resolveComponent("transition-expand");
+  const _directive_maska = resolveDirective("maska");
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["cpDate", $options.dynamicClasses])
   }, [
@@ -4532,19 +4600,17 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
     ], 8, _hoisted_1$d)) : createCommentVNode("", true),
     createElementVNode("div", _hoisted_2$c, [
       withDirectives(createElementVNode("input", {
-        ref: "day",
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $data.day = $event),
         placeholder: "DD",
         class: "cpDate__day",
-        type: "number",
         inputmode: "numeric",
-        min: 1,
-        max: 31,
         maxlength: "2",
         required: $props.required,
-        disabled: $props.disabled
+        disabled: $props.disabled,
+        autocomplete: $options.autocompleteFields.day
       }, null, 8, _hoisted_3$9), [
-        [vModelText, $data.day]
+        [vModelText, $data.day],
+        [_directive_maska, "##"]
       ]),
       _hoisted_4$9,
       createElementVNode("div", {
@@ -4554,7 +4620,8 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
           id: $options.cpDateId,
           "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => $data.month = $event),
           required: $props.required,
-          disabled: $props.disabled
+          disabled: $props.disabled,
+          autocomplete: $options.autocompleteFields.month
         }, [
           _hoisted_6$6,
           (openBlock(true), createElementBlock(Fragment, null, renderList($options.months, (monthItem, index) => {
@@ -4569,24 +4636,22 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
       ], 2),
       _hoisted_8$4,
       withDirectives(createElementVNode("input", {
-        ref: "year",
         "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => $data.year = $event),
         placeholder: "YYYY",
         class: "cpDate__year",
-        type: "number",
         inputmode: "numeric",
-        min: $options.minYear,
-        max: $options.maxYear,
         maxlength: "4",
         disabled: $props.disabled,
-        required: $props.required
+        required: $props.required,
+        autocomplete: $options.autocompleteFields.year
       }, null, 8, _hoisted_9$4), [
-        [vModelText, $data.year]
+        [vModelText, $data.year],
+        [_directive_maska, "####"]
       ])
     ]),
     createVNode(_component_transition_expand, null, {
       default: withCtx(() => [
-        !$options.isDateValid ? (openBlock(), createElementBlock("div", _hoisted_10$4, toDisplayString($options.errorMessage), 1)) : createCommentVNode("", true)
+        $options.advancedErrorMessage ? (openBlock(), createElementBlock("div", _hoisted_10$4, toDisplayString($options.advancedErrorMessage), 1)) : createCommentVNode("", true)
       ]),
       _: 1
     })
@@ -7138,20 +7203,6 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
 }
 var TransitionExpand = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c], ["__scopeId", "data-v-d29b8092"]]);
 var CpInput_vue_vue_type_style_index_0_lang = "";
-const inputTypesList = [
-  "text",
-  "date",
-  "datetime-local",
-  "email",
-  "month",
-  "number",
-  "password",
-  "search",
-  "tel",
-  "time",
-  "url",
-  "week"
-];
 const _sfc_main$b = {
   name: "CpInput",
   components: {
@@ -7159,6 +7210,7 @@ const _sfc_main$b = {
     BaseInputLabel,
     TransitionExpand
   },
+  inheritAttrs: false,
   props: {
     modelValue: {
       type: [String, Number, Boolean],
@@ -7168,46 +7220,10 @@ const _sfc_main$b = {
       type: String,
       default: ""
     },
-    placeholder: {
-      type: String,
-      default: "",
-      required: true
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
     inputId: {
       type: String,
-      default: ""
-    },
-    type: {
-      type: String,
-      default: inputTypesList[0],
-      validator: (value) => {
-        return inputTypesList.includes(value);
-      }
-    },
-    name: {
-      type: String,
-      default: ""
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
       default: null
     },
-    autocomplete: {
-      type: String,
-      default: "on"
-    },
-    inputMode: {
-      type: String,
-      default: "text"
-    },
     isInvalid: {
       type: Boolean,
       default: false
@@ -7234,18 +7250,35 @@ const _sfc_main$b = {
     }
   },
   emits: ["update:modelValue"],
+  setup(props, { attrs }) {
+    const _a = attrs, { ["class"]: value, id } = _a, restAttributes = __objRest(_a, ["class", "id"]);
+    const inputIdentifier = id === void 0 ? ref(randomString()) : id;
+    return {
+      inputIdentifier,
+      restAttributes
+    };
+  },
   data() {
     return {
-      inputReferenceId: this.inputId,
       isDOMElementValid: true
     };
   },
   computed: {
+    isDisabled() {
+      return this.checkAttribute("disabled");
+    },
+    isRequired() {
+      return this.checkAttribute("required");
+    },
+    isReadonly() {
+      return this.checkAttribute("readonly");
+    },
     dynamicClasses() {
       return [
+        this.$attrs.class,
         {
           "cpInput--isInvalid": this.isInputInvalid,
-          "cpInput--isDisabled": this.disabled,
+          "cpInput--isDisabled": this.isDisabled,
           "cpInput--hasNoBorder": this.removeBorder,
           "cpInput--isLarge": this.isLarge
         }
@@ -7259,11 +7292,13 @@ const _sfc_main$b = {
       };
     },
     inputLabelTitle() {
-      const requiredLabel = this.required && this.label ? "*" : "";
-      return `${this.label} ${requiredLabel}`;
+      if (this.label === "")
+        return "";
+      const requiredMark = this.isRequired ? "*" : "";
+      return `${this.label} ${requiredMark}`;
     },
     isValid() {
-      return this.modelValue && !this.readonly && !this.isInvalid && this.isDOMElementValid;
+      return this.modelValue && !this.isReadonly && !this.isInvalid && this.isDOMElementValid;
     },
     isInputInvalid() {
       return this.isInvalid || !this.isDOMElementValid;
@@ -7275,15 +7310,11 @@ const _sfc_main$b = {
       return !!this.$slots["input-icon-after"];
     },
     DOMElement() {
-      return this.$refs.cpInputContainer.children.namedItem(this.inputReferenceId);
+      return this.$refs.cpInputContainer.children.namedItem(this.inputIdentifier);
     }
   },
   mounted() {
-    if (!this.inputReferenceId)
-      this.inputReferenceId = randomString();
-    this.$nextTick(() => {
-      this.checkInputValidity();
-    });
+    this.$nextTick(() => this.checkInputValidity());
   },
   methods: {
     handleChange(e2) {
@@ -7299,6 +7330,9 @@ const _sfc_main$b = {
       if (!this.DOMElement)
         return false;
       this.isDOMElementValid = this.DOMElement.validity && this.DOMElement.validity.valid || this.DOMElement.validity && this.DOMElement.validity.valueMissing;
+    },
+    checkAttribute(attribute) {
+      return this.$attrs[attribute] === "" || this.$attrs[attribute] === true;
     }
   }
 };
@@ -7311,7 +7345,7 @@ const _hoisted_3$7 = {
   key: 2,
   class: "cpInput__icon cpInput__icon--isAfter"
 };
-const _hoisted_4$7 = ["id", "disabled", "name", "placeholder", "readonly", "required", "autocomplete", "inputmode", "type", "value"];
+const _hoisted_4$7 = ["id", "value"];
 function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_base_input_label = resolveComponent("base-input-label");
   const _component_cp_icon = resolveComponent("cp-icon");
@@ -7319,12 +7353,13 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
   const _directive_maska = resolveDirective("maska");
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["cpInput", $options.dynamicClasses]),
-    "aria-disabled": $props.disabled,
+    "aria-disabled": $options.isDisabled,
     onClick: _cache[1] || (_cache[1] = (...args) => $options.focusOnInput && $options.focusOnInput(...args))
   }, [
     $props.label ? (openBlock(), createBlock(_component_base_input_label, {
       key: 0,
-      for: $data.inputReferenceId
+      for: $setup.inputIdentifier,
+      class: "cpInput__label"
     }, {
       default: withCtx(() => [
         createTextVNode(toDisplayString($options.inputLabelTitle), 1)
@@ -7358,20 +7393,13 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
       $options.hasAfterIcon ? (openBlock(), createElementBlock("div", _hoisted_3$7, [
         renderSlot(_ctx.$slots, "input-icon-after")
       ])) : createCommentVNode("", true),
-      withDirectives(createElementVNode("input", {
-        id: $data.inputReferenceId,
-        disabled: $props.disabled,
-        name: $props.name,
-        placeholder: $props.placeholder,
-        readonly: $props.readonly,
-        required: $props.required,
-        autocomplete: $props.autocomplete,
-        inputmode: $props.inputMode,
-        type: $props.type,
-        value: $props.modelValue,
+      withDirectives(createElementVNode("input", mergeProps({
+        id: $setup.inputIdentifier,
+        value: $props.modelValue
+      }, $setup.restAttributes, {
         class: "cpInput__inner",
         onInput: _cache[0] || (_cache[0] = (...args) => $options.handleChange && $options.handleChange(...args))
-      }, null, 40, _hoisted_4$7), [
+      }), null, 16, _hoisted_4$7), [
         [_directive_maska, $props.mask]
       ])
     ], 2),
@@ -7380,7 +7408,8 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
         $options.isInputInvalid && $props.errorMessage ? (openBlock(), createBlock(_component_base_input_label, {
           key: 0,
           "is-invalid": $props.isInvalid,
-          for: $data.inputReferenceId
+          for: $setup.inputIdentifier,
+          class: "cpInput__label cpInput__label--isAfter"
         }, {
           default: withCtx(() => [
             createTextVNode(toDisplayString($props.errorMessage), 1)
@@ -7522,16 +7551,16 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_core_datepicker = resolveComponent("core-datepicker");
   return openBlock(), createElementBlock("div", _hoisted_1$a, [
     withDirectives(createVNode(_component_cp_input, {
+      id: $data.datePickerReferenceId,
       "model-value": $options.inputComputedValue,
       type: "text",
-      "input-id": $data.datePickerReferenceId,
       placeholder: $props.placeholder,
       "is-invalid": $props.isError,
       "error-message": $props.errorMessage,
       disabled: $data.isDisabled,
       label: $props.label,
       class: "cpDatepicker__input"
-    }, null, 8, ["model-value", "input-id", "placeholder", "is-invalid", "error-message", "disabled", "label"]), [
+    }, null, 8, ["id", "model-value", "placeholder", "is-invalid", "error-message", "disabled", "label"]), [
       [vShow, !$props.isInline]
     ]),
     createVNode(_component_core_datepicker, {
@@ -7731,8 +7760,8 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_core_datepicker = resolveComponent("core-datepicker");
   return openBlock(), createElementBlock("div", _hoisted_1$9, [
     createVNode(_component_cp_input, {
+      id: $props.triggerElementId,
       type: "text",
-      "input-id": $props.triggerElementId,
       "model-value": $options.humanDateFormat($data.dateOne, $data.dateTwo),
       placeholder: "Select a date",
       "is-invalid": $props.isError,
@@ -7740,7 +7769,7 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
       disabled: $data.isDisabled,
       label: $props.label,
       class: "cpCalendar__input"
-    }, null, 8, ["input-id", "model-value", "is-invalid", "error-message", "disabled", "label"]),
+    }, null, 8, ["id", "model-value", "is-invalid", "error-message", "disabled", "label"]),
     createVNode(_component_core_datepicker, {
       "date-one": $data.dateOne,
       "date-two": $data.dateTwo,
@@ -7864,6 +7893,7 @@ const _sfc_main$8 = {
     intent: {
       type: String,
       required: true,
+      default: Intent.INFO.value,
       validator(value) {
         const intentValues = Object.values(Intent).map((item) => item.value);
         return intentValues.includes(value);
@@ -8025,7 +8055,8 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$7, [
     $props.label ? (openBlock(), createBlock(_component_base_input_label, {
       key: 0,
-      for: $data.inputReferenceId
+      for: $data.inputReferenceId,
+      class: "cpTextarea__label"
     }, {
       default: withCtx(() => [
         createTextVNode(toDisplayString($options.inputLabelTitle), 1)
@@ -8047,7 +8078,8 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
         $props.isInvalid ? (openBlock(), createBlock(_component_base_input_label, {
           key: 0,
           for: $data.inputReferenceId,
-          "is-invalid": ""
+          "is-invalid": "",
+          class: "cpTextarea__label cpTextarea__label--isAfter"
         }, {
           default: withCtx(() => [
             createTextVNode(toDisplayString($props.errorMessage), 1)
@@ -8153,7 +8185,8 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
   }, [
     $props.label ? (openBlock(), createBlock(_component_base_input_label, {
       key: 0,
-      for: $data.selectReferenceId
+      for: $data.selectReferenceId,
+      class: "cpSelect__label"
     }, {
       default: withCtx(() => [
         createTextVNode(toDisplayString($options.selectLabelTitle), 1)
@@ -8186,7 +8219,8 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
         $props.isInvalid ? (openBlock(), createBlock(_component_base_input_label, {
           key: 0,
           "is-invalid": $props.isInvalid,
-          for: $data.selectReferenceId
+          for: $data.selectReferenceId,
+          class: "cpSelect__label cpSelect__label--isAfter"
         }, {
           default: withCtx(() => [
             createTextVNode(toDisplayString($props.errorMessage), 1)