@featherk/ui 0.9.6 → 0.9.8

package/README.md

@@ -5,7 +5,7 @@ Vue UI component package for FeatherK.
 ## Components Overview
 
 - **Address**: `USAddress` - Presentational US address renderer driven by a parent-owned `useUSAddress` view model.
-  - Component guide: [docs/address/USAddress.md](./docs/address/USAddress.md)
+  - Component guide: [docs/address/USAddress.md](https://github.com/NantHealth/featherk/blob/integration/packages/ui/docs/address/USAddress.md)
 
 ## Importing Components
 

package/dist/address/USAddress.vue.d.ts

@@ -1,80 +1,15 @@
-interface USAddressViewModel {
-    formData: {
-        address1: string;
-        address2: string;
-        city: string;
-        state: string | null;
-        zip: string;
-    };
-    addressValidate: {
-        value: boolean;
-    };
-    address1Valid: {
-        value: boolean;
-    };
-    cityValid: {
-        value: boolean;
-    };
-    stateValid: {
-        value: boolean;
-    };
-    zipValid: {
-        value: boolean;
-    };
-    addressValid: {
-        value: boolean;
-    };
-    optionalFeedbackActive?: {
-        value: boolean;
-    };
-    optionalPartialInvalid?: {
-        value: boolean;
-    };
-    optionalMissingRequiredFields?: {
-        value: boolean;
-    };
-    optionalZipInvalid?: {
-        value: boolean;
-    };
-    stateDefaultItem: {
-        label: string;
-        value: string | null;
-    };
-    stateOptions: Array<{
-        label: string;
-        value: string;
-    }>;
-    zipDisplay: {
-        value: string;
-    };
-    zipWrapperClass: string;
-    onAddress1Input: (...args: unknown[]) => void;
-    onAddress2Input: (...args: unknown[]) => void;
-    onCityInput: (...args: unknown[]) => void;
-    onStateChange: (event: {
-        value: string | null;
-    }) => void;
-    onZipInput: (...args: unknown[]) => void;
-}
+import type { USAddressMessageScope, USAddressMessages, USAddressViewModel } from "./types";
 type __VLS_Props = {
     id: string;
     address: USAddressViewModel;
     required?: boolean;
     messageScope?: USAddressMessageScope;
+    messages?: USAddressMessages;
     showAddress2?: boolean;
-    address1Placeholder?: string;
-    address2Placeholder?: string;
-    cityPlaceholder?: string;
-    zipPlaceholder?: string;
 };
-type USAddressMessageScope = "field" | "fieldset";
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     required: boolean;
     messageScope: USAddressMessageScope;
     showAddress2: boolean;
-    address1Placeholder: string;
-    address2Placeholder: string;
-    cityPlaceholder: string;
-    zipPlaceholder: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/address/index.d.ts

@@ -1 +1,2 @@
 export { default as USAddress } from "./USAddress.vue";
+export type { USAddressMessageScope, USAddressMessages, USAddressFormData, USAddressValidityState, USAddressOptionalFeedbackState, USAddressStateItem, USAddressStateOption, USAddressDerivedState, USAddressInputHandlers, USAddressViewModel, } from "./types";

package/dist/address/types.d.ts

@@ -0,0 +1,103 @@
+export type USAddressMessageScope = "field" | "fieldset";
+export type USAddressFormData = {
+    address1: string;
+    address2: string;
+    city: string;
+    state: string | null;
+    zip: string;
+};
+export type USAddressValidityState = {
+    addressValidate: {
+        value: boolean;
+    };
+    address1Valid: {
+        value: boolean;
+    };
+    cityValid: {
+        value: boolean;
+    };
+    stateValid: {
+        value: boolean;
+    };
+    zipValid: {
+        value: boolean;
+    };
+    addressValid: {
+        value: boolean;
+    };
+};
+export type USAddressOptionalFeedbackState = {
+    optionalFeedbackActive: {
+        value: boolean;
+    };
+    optionalPartialInvalid: {
+        value: boolean;
+    };
+    optionalMissingRequiredFields: {
+        value: boolean;
+    };
+    optionalZipInvalid: {
+        value: boolean;
+    };
+};
+export type USAddressStateItem = {
+    label: string;
+    value: string | null;
+};
+export type USAddressStateOption = {
+    label: string;
+    value: string;
+};
+export type USAddressDerivedState = {
+    stateDefaultItem: USAddressStateItem;
+    stateOptions: USAddressStateOption[];
+    zipDisplay: {
+        value: string;
+    };
+    zipWrapperClass: string;
+};
+export type USAddressInputHandlers = {
+    onAddress1Input: (...args: unknown[]) => void;
+    onAddress2Input: (...args: unknown[]) => void;
+    onCityInput: (...args: unknown[]) => void;
+    onStateChange: (event: {
+        value: string | null;
+    }) => void;
+    onZipInput: (...args: unknown[]) => void;
+};
+export type USAddressViewModel = {
+    formData: USAddressFormData;
+} & USAddressValidityState & Partial<USAddressOptionalFeedbackState> & USAddressDerivedState & USAddressInputHandlers;
+export type USAddressMessages = {
+    placeholder?: {
+        address1?: string;
+        address2?: string;
+        city?: string;
+        zip?: string;
+    };
+    fieldset?: {
+        error?: {
+            required?: string;
+            zip?: string;
+        };
+        hint?: {
+            address?: string;
+        };
+    };
+    field?: {
+        error?: {
+            address1?: string;
+            address2?: string;
+            city?: string;
+            state?: string;
+            zip?: string;
+        };
+        hint?: {
+            address1?: string;
+            address2?: string;
+            city?: string;
+            state?: string;
+            zip?: string;
+        };
+    };
+};

package/dist/featherk-ui.es.js

@@ -1,101 +1,171 @@
 import "./ui.css";
-import { defineComponent as B, computed as l, openBlock as d, createElementBlock as S, normalizeClass as L, createElementVNode as k, createVNode as V, unref as t, Fragment as R, createBlock as r, withCtx as i, createTextVNode as v, createCommentVNode as n, toDisplayString as c } from "vue";
-import { Error as f, Hint as _ } from "@progress/kendo-vue-labels";
-import { TextBox as A } from "@progress/kendo-vue-inputs";
-import { DropDownList as $ } from "@progress/kendo-vue-dropdowns";
-const N = { class: "address1" }, b = {
+import { defineComponent as G, computed as l, openBlock as s, createElementBlock as S, normalizeClass as U, createElementVNode as g, createVNode as I, unref as r, Fragment as j, createBlock as o, withCtx as v, createTextVNode as n, toDisplayString as p, createCommentVNode as f } from "vue";
+import { Error as m, Hint as V } from "@progress/kendo-vue-labels";
+import { TextBox as k } from "@progress/kendo-vue-inputs";
+import { DropDownList as H } from "@progress/kendo-vue-dropdowns";
+const K = { class: "address1" }, W = {
   key: 0,
   class: "address2"
-}, x = { class: "city" }, T = { class: "state" }, G = { class: "zip" }, M = {
+}, J = { class: "city" }, Q = { class: "state" }, X = { class: "zip" }, Y = {
   key: 1,
   class: "messages"
-}, E = "Enter a 5 or 9 digit zip code.", U = "Address is optional. Enter Address 1, City, State, and ZIP (Address Line 2 is optional), or clear the address.", H = /* @__PURE__ */ B({
+}, q = "Enter a 5 or 9 digit zip code.", ee = "Incomplete address.", ae = /* @__PURE__ */ G({
   __name: "USAddress",
   props: {
     id: {},
     address: {},
     required: { type: Boolean, default: !0 },
     messageScope: { default: "fieldset" },
-    showAddress2: { type: Boolean, default: !0 },
-    address1Placeholder: { default: "Address Line 1" },
-    address2Placeholder: { default: "Address Line 2" },
-    cityPlaceholder: { default: "City" },
-    zipPlaceholder: { default: "00000-0000" }
+    messages: {},
+    showAddress2: { type: Boolean, default: !0 }
   },
   setup(D) {
-    const s = D, o = l(() => s.messageScope === "field"), y = l(() => s.messageScope === "fieldset"), a = l(() => s.required), m = l(() => a.value), I = l(() => ({
-      address1: `${s.id}-address1`,
-      address2: `${s.id}-address2`,
-      city: `${s.id}-city`,
-      state: `${s.id}-state`,
-      zip: `${s.id}-zip`
-    })), e = l(() => s.address), C = l(() => e.value.address1Valid.value && e.value.cityValid.value && e.value.stateValid.value), g = l(() => e.value.formData.address1.trim() !== "" || e.value.formData.address2.trim() !== "" || e.value.formData.city.trim() !== "" || (e.value.formData.state ?? "").trim() !== "" || e.value.formData.zip.replace(/\D/g, "") !== ""), P = l(() => {
+    const i = D, t = {
+      placeholder: {
+        address1: "Address Line 1",
+        address2: "Address Line 2",
+        city: "City",
+        zip: "00000-0000"
+      },
+      fieldset: {
+        error: {
+          required: "Required fields are missing.",
+          zip: q
+        },
+        hint: {
+          address: "Enter address information."
+        }
+      },
+      field: {
+        error: {
+          address1: "Required",
+          address2: "",
+          city: "Required",
+          state: "Required",
+          zip: q
+        },
+        hint: {
+          address1: "Enter address line 1.",
+          address2: "Optional",
+          city: "",
+          state: "",
+          zip: q
+        }
+      }
+    }, E = (a) => ({
+      placeholder: {
+        address1: a?.placeholder?.address1 ?? t.placeholder.address1,
+        address2: a?.placeholder?.address2 ?? t.placeholder.address2,
+        city: a?.placeholder?.city ?? t.placeholder.city,
+        zip: a?.placeholder?.zip ?? t.placeholder.zip
+      },
+      fieldset: {
+        error: {
+          required: a?.fieldset?.error?.required ?? t.fieldset.error.required,
+          zip: a?.fieldset?.error?.zip ?? t.fieldset.error.zip
+        },
+        hint: {
+          address: a?.fieldset?.hint?.address ?? t.fieldset.hint.address
+        }
+      },
+      field: {
+        error: {
+          address1: a?.field?.error?.address1 ?? t.field.error.address1,
+          address2: a?.field?.error?.address2 ?? t.field.error.address2,
+          city: a?.field?.error?.city ?? t.field.error.city,
+          state: a?.field?.error?.state ?? t.field.error.state,
+          zip: a?.field?.error?.zip ?? t.field.error.zip
+        },
+        hint: {
+          address1: a?.field?.hint?.address1 ?? t.field.hint.address1,
+          address2: a?.field?.hint?.address2 ?? t.field.hint.address2,
+          city: a?.field?.hint?.city ?? t.field.hint.city,
+          state: a?.field?.hint?.state ?? t.field.hint.state,
+          zip: a?.field?.hint?.zip ?? t.field.hint.zip
+        }
+      }
+    }), d = l(() => E(i.messages)), y = l(() => i.messageScope === "field"), A = l(() => i.messageScope === "fieldset"), u = l(() => i.required), _ = l(() => u.value), z = l(() => ({
+      address1: `${i.id}-address1`,
+      address2: `${i.id}-address2`,
+      city: `${i.id}-city`,
+      state: `${i.id}-state`,
+      zip: `${i.id}-zip`
+    })), e = l(() => i.address), x = l(() => e.value.address1Valid.value && e.value.cityValid.value && e.value.stateValid.value), w = l(() => e.value.formData.address1.trim() !== "" || e.value.formData.address2.trim() !== "" || e.value.formData.city.trim() !== "" || (e.value.formData.state ?? "").trim() !== "" || e.value.formData.zip.replace(/\D/g, "") !== ""), F = l(() => {
       if (e.value.optionalZipInvalid)
         return e.value.optionalZipInvalid.value;
-      const p = e.value.formData.zip.replace(/\D/g, "");
-      return !a.value && g.value && p.length !== 5 && p.length !== 9;
-    }), w = l(() => e.value.optionalPartialInvalid ? e.value.optionalPartialInvalid.value : !a.value && g.value && !e.value.addressValid.value), h = l(() => a.value || !w.value ? !1 : e.value.optionalFeedbackActive ? e.value.optionalFeedbackActive.value : !1), O = l(() => m.value && !e.value.address1Valid.value || h.value && e.value.formData.address1.trim() === ""), q = l(() => m.value && !e.value.cityValid.value || h.value && e.value.formData.city.trim() === ""), F = l(() => m.value && !e.value.stateValid.value || h.value && (e.value.formData.state ?? "").trim() === ""), z = l(() => m.value && !e.value.zipValid.value || h.value && P.value), Z = l(() => y.value && a.value ? `${s.address2Placeholder} (Optional)` : s.address2Placeholder);
-    return (p, u) => (d(), S("div", {
-      class: L(["fkui-us-address", { "fkui-us-address--fieldset-scope": y.value }])
+      const a = e.value.formData.zip.replace(/\D/g, "");
+      return !u.value && w.value && a.length !== 5 && a.length !== 9;
+    }), M = l(() => e.value.optionalPartialInvalid ? e.value.optionalPartialInvalid.value : !u.value && w.value && !e.value.addressValid.value), h = l(() => u.value || !M.value ? !1 : e.value.optionalFeedbackActive ? e.value.optionalFeedbackActive.value : !1), O = l(() => _.value && !e.value.address1Valid.value || h.value && e.value.formData.address1.trim() === ""), P = l(() => _.value && !e.value.cityValid.value || h.value && e.value.formData.city.trim() === ""), b = l(() => _.value && !e.value.stateValid.value || h.value && (e.value.formData.state ?? "").trim() === ""), C = l(() => _.value && !e.value.zipValid.value || h.value && F.value), c = l(() => u.value ? e.value.addressValidate.value : h.value), Z = l(() => u.value ? e.value.address1Valid.value : !O.value), B = l(() => u.value ? e.value.cityValid.value : !P.value), L = l(() => u.value ? e.value.stateValid.value : !b.value), R = l(() => u.value ? e.value.zipValid.value : !C.value), $ = l(() => {
+      const a = d.value.placeholder.address2;
+      return A.value && u.value ? `${a} (Optional)` : a;
+    }), N = l(() => {
+      const a = [];
+      return x.value || a.push(d.value.fieldset.error.required), e.value.zipValid.value || a.push(d.value.fieldset.error.zip), a.join(" ");
+    }), T = l(() => {
+      const a = [ee];
+      return F.value && a.push(d.value.fieldset.error.zip), a.join(" ");
+    });
+    return (a, te) => (s(), S("div", {
+      class: U(["fkui-us-address", { "fkui-us-address--fieldset-scope": A.value }])
     }, [
-      k("div", N, [
-        V(t(A), {
-          id: I.value.address1,
-          placeholder: p.address1Placeholder,
+      g("div", K, [
+        I(r(k), {
+          id: z.value.address1,
+          placeholder: d.value.placeholder.address1,
           value: e.value.formData.address1,
-          valid: a.value ? e.value.address1Valid.value : !0,
-          validate: a.value ? e.value.addressValidate.value : !1,
-          validityStyles: a.value ? e.value.addressValidate.value : !1,
+          valid: Z.value,
+          validate: c.value,
+          validityStyles: c.value,
           onInput: e.value.onAddress1Input
         }, null, 8, ["id", "placeholder", "value", "valid", "validate", "validityStyles", "onInput"]),
-        o.value ? (d(), S(R, { key: 0 }, [
-          O.value ? (d(), r(t(f), { key: 0 }, {
-            default: i(() => [...u[0] || (u[0] = [
-              v(" Required. ", -1)
-            ])]),
+        y.value ? (s(), S(j, { key: 0 }, [
+          O.value ? (s(), o(r(m), { key: 0 }, {
+            default: v(() => [
+              n(p(d.value.field.error.address1), 1)
+            ]),
             _: 1
-          })) : (d(), r(t(_), { key: 1 }, {
-            default: i(() => [...u[1] || (u[1] = [
-              v("Enter address line 1.", -1)
-            ])]),
+          })) : (s(), o(r(V), { key: 1 }, {
+            default: v(() => [
+              n(p(d.value.field.hint.address1), 1)
+            ]),
             _: 1
           }))
-        ], 64)) : n("", !0)
+        ], 64)) : f("", !0)
       ]),
-      p.showAddress2 ? (d(), S("div", b, [
-        V(t(A), {
-          id: I.value.address2,
-          placeholder: Z.value,
+      a.showAddress2 ? (s(), S("div", W, [
+        I(r(k), {
+          id: z.value.address2,
+          placeholder: $.value,
           value: e.value.formData.address2,
           onInput: e.value.onAddress2Input
         }, null, 8, ["id", "placeholder", "value", "onInput"]),
-        o.value ? (d(), r(t(_), { key: 0 }, {
-          default: i(() => [...u[2] || (u[2] = [
-            v("Optional.", -1)
-          ])]),
+        y.value ? (s(), o(r(V), { key: 0 }, {
+          default: v(() => [
+            n(p(d.value.field.hint.address2), 1)
+          ]),
           _: 1
-        })) : n("", !0)
-      ])) : n("", !0),
-      k("div", x, [
-        V(t(A), {
-          id: I.value.city,
-          placeholder: p.cityPlaceholder,
+        })) : f("", !0)
+      ])) : f("", !0),
+      g("div", J, [
+        I(r(k), {
+          id: z.value.city,
+          placeholder: d.value.placeholder.city,
           value: e.value.formData.city,
-          valid: a.value ? e.value.cityValid.value : !0,
-          validate: a.value ? e.value.addressValidate.value : !1,
-          validityStyles: a.value ? e.value.addressValidate.value : !1,
+          valid: B.value,
+          validate: c.value,
+          validityStyles: c.value,
           onInput: e.value.onCityInput
         }, null, 8, ["id", "placeholder", "value", "valid", "validate", "validityStyles", "onInput"]),
-        o.value && q.value ? (d(), r(t(f), { key: 0 }, {
-          default: i(() => [...u[3] || (u[3] = [
-            v(" Required. ", -1)
-          ])]),
+        y.value && P.value ? (s(), o(r(m), { key: 0 }, {
+          default: v(() => [
+            n(p(d.value.field.error.city), 1)
+          ]),
           _: 1
-        })) : n("", !0)
+        })) : f("", !0)
       ]),
-      k("div", T, [
-        V(t($), {
-          id: I.value.state,
+      g("div", Q, [
+        I(r(H), {
+          id: z.value.state,
           value: e.value.formData.state,
           onChange: e.value.onStateChange,
           defaultItem: e.value.stateDefaultItem,
@@ -104,69 +174,69 @@ const N = { class: "address1" }, b = {
           valueField: "value",
           dataItemKey: "value",
           valuePrimitive: !0,
-          valid: a.value ? e.value.stateValid.value : !0,
-          validate: a.value ? e.value.addressValidate.value : !1,
-          validityStyles: a.value ? e.value.addressValidate.value : !1
+          valid: L.value,
+          validate: c.value,
+          validityStyles: c.value
         }, null, 8, ["id", "value", "onChange", "defaultItem", "dataItems", "valid", "validate", "validityStyles"]),
-        o.value && F.value ? (d(), r(t(f), { key: 0 }, {
-          default: i(() => [...u[4] || (u[4] = [
-            v(" Required. ", -1)
-          ])]),
+        y.value && b.value ? (s(), o(r(m), { key: 0 }, {
+          default: v(() => [
+            n(p(d.value.field.error.state), 1)
+          ]),
           _: 1
-        })) : n("", !0)
+        })) : f("", !0)
       ]),
-      k("div", G, [
-        V(t(A), {
-          id: I.value.zip,
-          placeholder: p.zipPlaceholder,
+      g("div", X, [
+        I(r(k), {
+          id: z.value.zip,
+          placeholder: d.value.placeholder.zip,
           wrapperClass: e.value.zipWrapperClass,
           value: e.value.zipDisplay.value,
           onInput: e.value.onZipInput,
-          valid: a.value ? e.value.zipValid.value : !0,
-          validate: a.value ? e.value.addressValidate.value : !1,
-          validityStyles: a.value ? e.value.addressValidate.value : !1,
+          valid: R.value,
+          validate: c.value,
+          validityStyles: c.value,
           style: { width: "100%" }
         }, null, 8, ["id", "placeholder", "wrapperClass", "value", "onInput", "valid", "validate", "validityStyles"]),
-        o.value && z.value ? (d(), r(t(f), { key: 0 }, {
-          default: i(() => [
-            v(c(E))
+        y.value && C.value ? (s(), o(r(m), { key: 0 }, {
+          default: v(() => [
+            n(p(d.value.field.error.zip), 1)
           ]),
           _: 1
-        })) : n("", !0),
-        o.value && !z.value ? (d(), r(t(_), { key: 1 }, {
-          default: i(() => [
-            v(c(E))
+        })) : f("", !0),
+        y.value && !C.value ? (s(), o(r(V), { key: 1 }, {
+          default: v(() => [
+            n(p(d.value.field.hint.zip), 1)
           ]),
           _: 1
-        })) : n("", !0)
+        })) : f("", !0)
       ]),
-      y.value ? (d(), S("div", M, [
-        m.value && !e.value.addressValid.value ? (d(), r(t(f), { key: 0 }, {
-          default: i(() => [
-            v(c(C.value ? "" : "Required fields are missing.") + " " + c(e.value.zipValid.value ? "" : E), 1)
+      A.value ? (s(), S("div", Y, [
+        _.value && !e.value.addressValid.value ? (s(), o(r(m), { key: 0 }, {
+          default: v(() => [
+            n(p(N.value), 1)
           ]),
           _: 1
-        })) : h.value ? (d(), r(t(f), { key: 1 }, {
-          default: i(() => [
-            v(c(U) + " " + c(P.value ? E : ""), 1)
+        })) : h.value ? (s(), o(r(m), { key: 1 }, {
+          default: v(() => [
+            n(p(T.value), 1)
           ]),
           _: 1
-        })) : (d(), r(t(_), { key: 2 }, {
-          default: i(() => [...u[5] || (u[5] = [
-            v("Enter address information.", -1)
-          ])]),
+        })) : (s(), o(r(V), { key: 2 }, {
+          default: v(() => [
+            n(p(d.value.fieldset.hint.address), 1)
+          ]),
           _: 1
         }))
-      ])) : n("", !0)
+      ])) : f("", !0)
     ], 2));
   }
-}), K = (D, s) => {
-  const o = D.__vccOpts || D;
-  for (const [y, a] of s)
-    o[y] = a;
-  return o;
-}, X = /* @__PURE__ */ K(H, [["__scopeId", "data-v-95d578ff"]]);
+}), le = (D, i) => {
+  const t = D.__vccOpts || D;
+  for (const [E, d] of i)
+    t[E] = d;
+  return t;
+}, ue = /* @__PURE__ */ le(ae, [["__scopeId", "data-v-8aeb035b"]]);
 export {
-  X as USAddress
+  ue as USAddress
 };
 //# sourceMappingURL=featherk-ui.es.js.map

package/dist/featherk-ui.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"featherk-ui.es.js","sources":["../src/address/USAddress.vue"],"sourcesContent":["<template>\n  <div\n    class=\"fkui-us-address\"\n    :class=\"{ 'fkui-us-address--fieldset-scope': fieldsetScope }\"\n  >\n    <div class=\"address1\">\n      <TextBox\n        :id=\"fieldIds.address1\"\n        :placeholder=\"address1Placeholder\"\n        :value=\"address.formData.address1\"\n        :valid=\"isRequired ? address.address1Valid.value : true\"\n        :validate=\"isRequired ? address.addressValidate.value : false\"\n        :validityStyles=\"isRequired ? address.addressValidate.value : false\"\n        @input=\"address.onAddress1Input\"\n      />\n      <template v-if=\"fieldScope\">\n        <Error v-if=\"showAddress1Error\"> Required. </Error>\n        <Hint v-else>Enter address line 1.</Hint>\n      </template>\n    </div>\n\n    <div v-if=\"showAddress2\" class=\"address2\">\n      <TextBox\n        :id=\"fieldIds.address2\"\n        :placeholder=\"address2PlaceholderDisplay\"\n        :value=\"address.formData.address2\"\n        @input=\"address.onAddress2Input\"\n      />\n      <Hint v-if=\"fieldScope\">Optional.</Hint>\n    </div>\n\n    <div class=\"city\">\n      <TextBox\n        :id=\"fieldIds.city\"\n        :placeholder=\"cityPlaceholder\"\n        :value=\"address.formData.city\"\n        :valid=\"isRequired ? address.cityValid.value : true\"\n        :validate=\"isRequired ? address.addressValidate.value : false\"\n        :validityStyles=\"isRequired ? address.addressValidate.value : false\"\n        @input=\"address.onCityInput\"\n      />\n      <Error v-if=\"fieldScope && showCityError\"> Required. </Error>\n    </div>\n\n    <div class=\"state\">\n      <DropDownList\n        :id=\"fieldIds.state\"\n        :value=\"address.formData.state\"\n        @change=\"address.onStateChange\"\n        :defaultItem=\"address.stateDefaultItem\"\n        :dataItems=\"address.stateOptions\"\n        textField=\"label\"\n        valueField=\"value\"\n        dataItemKey=\"value\"\n        :valuePrimitive=\"true\"\n        :valid=\"isRequired ? address.stateValid.value : true\"\n        :validate=\"isRequired ? address.addressValidate.value : false\"\n        :validityStyles=\"isRequired ? address.addressValidate.value : false\"\n      />\n      <Error v-if=\"fieldScope && showStateError\"> Required. </Error>\n    </div>\n\n    <div class=\"zip\">\n      <TextBox\n        :id=\"fieldIds.zip\"\n        :placeholder=\"zipPlaceholder\"\n        :wrapperClass=\"address.zipWrapperClass\"\n        :value=\"address.zipDisplay.value\"\n        @input=\"address.onZipInput\"\n        :valid=\"isRequired ? address.zipValid.value : true\"\n        :validate=\"isRequired ? address.addressValidate.value : false\"\n        :validityStyles=\"isRequired ? address.addressValidate.value : false\"\n        :style=\"{ width: '100%' }\"\n      />\n      <Error v-if=\"fieldScope && showZipError\">\n        {{ ZIP_CODE_MESSAGE }}\n      </Error>\n      <Hint v-if=\"fieldScope && !showZipError\">\n        {{ ZIP_CODE_MESSAGE }}\n      </Hint>\n    </div>\n\n    <div v-if=\"fieldsetScope\" class=\"messages\">\n      <Error v-if=\"showErrors && !address.addressValid.value\">\n        {{ nonZipRequiredFieldsValid ? \"\" : \"Required fields are missing.\" }}\n        {{ address.zipValid.value ? \"\" : ZIP_CODE_MESSAGE }}\n      </Error>\n      <Error v-else-if=\"showOptionalFeedback\">\n        {{ OPTIONAL_FIELDS_MESSAGE }}\n        {{ optionalZipInvalid ? ZIP_CODE_MESSAGE : \"\" }}\n      </Error>\n      <Hint v-else>Enter address information.</Hint>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { Error, Hint } from \"@progress/kendo-vue-labels\";\nimport { TextBox } from \"@progress/kendo-vue-inputs\";\nimport { DropDownList } from \"@progress/kendo-vue-dropdowns\";\n\ninterface USAddressViewModel {\n  formData: {\n    address1: string;\n    address2: string;\n    city: string;\n    state: string | null;\n    zip: string;\n  };\n  addressValidate: { value: boolean };\n  address1Valid: { value: boolean };\n  cityValid: { value: boolean };\n  stateValid: { value: boolean };\n  zipValid: { value: boolean };\n  addressValid: { value: boolean };\n  optionalFeedbackActive?: { value: boolean };\n  optionalPartialInvalid?: { value: boolean };\n  optionalMissingRequiredFields?: { value: boolean };\n  optionalZipInvalid?: { value: boolean };\n  stateDefaultItem: { label: string; value: string | null };\n  stateOptions: Array<{ label: string; value: string }>;\n  zipDisplay: { value: string };\n  zipWrapperClass: string;\n  onAddress1Input: (...args: unknown[]) => void;\n  onAddress2Input: (...args: unknown[]) => void;\n  onCityInput: (...args: unknown[]) => void;\n  onStateChange: (event: { value: string | null }) => void;\n  onZipInput: (...args: unknown[]) => void;\n}\n\nconst props = withDefaults(\n  defineProps<{\n    id: string;\n    address: USAddressViewModel;\n    required?: boolean;\n    messageScope?: USAddressMessageScope;\n    showAddress2?: boolean;\n    address1Placeholder?: string;\n    address2Placeholder?: string;\n    cityPlaceholder?: string;\n    zipPlaceholder?: string;\n  }>(),\n  {\n    required: true,\n    messageScope: \"fieldset\",\n    showAddress2: true,\n    address1Placeholder: \"Address Line 1\",\n    address2Placeholder: \"Address Line 2\",\n    cityPlaceholder: \"City\",\n    zipPlaceholder: \"00000-0000\",\n  },\n);\n\nconst ZIP_CODE_MESSAGE = \"Enter a 5 or 9 digit zip code.\";\nconst OPTIONAL_FIELDS_MESSAGE =\n  \"Address is optional. Enter Address 1, City, State, and ZIP (Address Line 2 is optional), or clear the address.\";\n\ntype USAddressMessageScope = \"field\" | \"fieldset\";\n\nconst fieldScope = computed(() => {\n  return props.messageScope === \"field\";\n});\n\nconst fieldsetScope = computed(() => {\n  return props.messageScope === \"fieldset\";\n});\n\nconst isRequired = computed(() => props.required);\n\nconst showErrors = computed(() => isRequired.value);\n\nconst fieldIds = computed(() => ({\n  address1: `${props.id}-address1`,\n  address2: `${props.id}-address2`,\n  city: `${props.id}-city`,\n  state: `${props.id}-state`,\n  zip: `${props.id}-zip`,\n}));\n\nconst address = computed(() => props.address);\n\nconst nonZipRequiredFieldsValid = computed(() => {\n  return (\n    address.value.address1Valid.value &&\n    address.value.cityValid.value &&\n    address.value.stateValid.value\n  );\n});\n\nconst hasAnyOptionalInput = computed(() => {\n  return (\n    address.value.formData.address1.trim() !== \"\" ||\n    address.value.formData.address2.trim() !== \"\" ||\n    address.value.formData.city.trim() !== \"\" ||\n    (address.value.formData.state ?? \"\").trim() !== \"\" ||\n    address.value.formData.zip.replace(/\\D/g, \"\") !== \"\"\n  );\n});\n\nconst optionalZipInvalid = computed(() => {\n  if (address.value.optionalZipInvalid) {\n    return address.value.optionalZipInvalid.value;\n  }\n\n  const zipDigits = address.value.formData.zip.replace(/\\D/g, \"\");\n  return (\n    !isRequired.value &&\n    hasAnyOptionalInput.value &&\n    zipDigits.length !== 5 &&\n    zipDigits.length !== 9\n  );\n});\n\nconst optionalPartialInvalid = computed(() => {\n  if (address.value.optionalPartialInvalid) {\n    return address.value.optionalPartialInvalid.value;\n  }\n\n  return (\n    !isRequired.value &&\n    hasAnyOptionalInput.value &&\n    !address.value.addressValid.value\n  );\n});\n\nconst showOptionalFeedback = computed(() => {\n  if (isRequired.value || !optionalPartialInvalid.value) {\n    return false;\n  }\n\n  if (address.value.optionalFeedbackActive) {\n    return address.value.optionalFeedbackActive.value;\n  }\n\n  return false;\n});\n\nconst showAddress1Error = computed(() => {\n  return (\n    (showErrors.value && !address.value.address1Valid.value) ||\n    (showOptionalFeedback.value &&\n      address.value.formData.address1.trim() === \"\")\n  );\n});\n\nconst showCityError = computed(() => {\n  return (\n    (showErrors.value && !address.value.cityValid.value) ||\n    (showOptionalFeedback.value && address.value.formData.city.trim() === \"\")\n  );\n});\n\nconst showStateError = computed(() => {\n  return (\n    (showErrors.value && !address.value.stateValid.value) ||\n    (showOptionalFeedback.value &&\n      (address.value.formData.state ?? \"\").trim() === \"\")\n  );\n});\n\nconst showZipError = computed(() => {\n  return (\n    (showErrors.value && !address.value.zipValid.value) ||\n    (showOptionalFeedback.value && optionalZipInvalid.value)\n  );\n});\n\nconst address2PlaceholderDisplay = computed(() => {\n  if (fieldsetScope.value && isRequired.value) {\n    return `${props.address2Placeholder} (Optional)`;\n  }\n  return props.address2Placeholder;\n});\n</script>\n\n<style scoped>\n.fkui-us-address {\n  display: grid;\n  grid-template-columns: 2fr 1fr 1fr;\n  grid-template-areas:\n    \"address1 address1 address1\"\n    \"address2 address2 address2\"\n    \"city     state    zip\"\n    \"messages messages messages\";\n  gap: 0.75rem;\n  margin-bottom: 1rem;\n\n  .address1 {\n    grid-area: address1;\n  }\n\n  .address2 {\n    grid-area: address2;\n  }\n\n  .city {\n    grid-area: city;\n  }\n\n  .state {\n    grid-area: state;\n  }\n\n  .zip {\n    grid-area: zip;\n  }\n\n  .messages {\n    grid-area: messages;\n  }\n\n  :deep(.fk-zip-textbox) {\n    min-width: 100%;\n  }\n}\n\n.fkui-us-address--fieldset-scope {\n  row-gap: 0.5rem;\n\n  .messages {\n    margin-top: -0.375rem;\n  }\n}\n</style>\n"],"names":["ZIP_CODE_MESSAGE","OPTIONAL_FIELDS_MESSAGE","props","__props","fieldScope","computed","fieldsetScope","isRequired","showErrors","fieldIds","address","nonZipRequiredFieldsValid","hasAnyOptionalInput","optionalZipInvalid","zipDigits","optionalPartialInvalid","showOptionalFeedback","showAddress1Error","showCityError","showStateError","showZipError","address2PlaceholderDisplay","_createElementBlock","_normalizeClass","_createElementVNode","_hoisted_1","_createVNode","_unref","TextBox","address1Placeholder","_Fragment","_createBlock","Error","_cache","Hint","showAddress2","_openBlock","_hoisted_2","_hoisted_3","cityPlaceholder","_hoisted_4","DropDownList","_hoisted_5","zipPlaceholder","_hoisted_6","_toDisplayString","_createTextVNode"],"mappings":"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"}
+{"version":3,"file":"featherk-ui.es.js","sources":["../src/address/USAddress.vue"],"sourcesContent":["<template>\n  <div\n    class=\"fkui-us-address\"\n    :class=\"{ 'fkui-us-address--fieldset-scope': fieldsetScope }\"\n  >\n    <div class=\"address1\">\n      <TextBox\n        :id=\"fieldIds.address1\"\n        :placeholder=\"resolvedMessages.placeholder.address1\"\n        :value=\"address.formData.address1\"\n        :valid=\"address1DisplayValid\"\n        :validate=\"validationStylesActive\"\n        :validityStyles=\"validationStylesActive\"\n        @input=\"address.onAddress1Input\"\n      />\n      <template v-if=\"fieldScope\">\n        <Error v-if=\"showAddress1Error\">\n          {{ resolvedMessages.field.error.address1 }}\n        </Error>\n        <Hint v-else>{{ resolvedMessages.field.hint.address1 }}</Hint>\n      </template>\n    </div>\n\n    <div v-if=\"showAddress2\" class=\"address2\">\n      <TextBox\n        :id=\"fieldIds.address2\"\n        :placeholder=\"address2PlaceholderDisplay\"\n        :value=\"address.formData.address2\"\n        @input=\"address.onAddress2Input\"\n      />\n      <Hint v-if=\"fieldScope\">{{ resolvedMessages.field.hint.address2 }}</Hint>\n    </div>\n\n    <div class=\"city\">\n      <TextBox\n        :id=\"fieldIds.city\"\n        :placeholder=\"resolvedMessages.placeholder.city\"\n        :value=\"address.formData.city\"\n        :valid=\"cityDisplayValid\"\n        :validate=\"validationStylesActive\"\n        :validityStyles=\"validationStylesActive\"\n        @input=\"address.onCityInput\"\n      />\n      <Error v-if=\"fieldScope && showCityError\">\n        {{ resolvedMessages.field.error.city }}\n      </Error>\n    </div>\n\n    <div class=\"state\">\n      <DropDownList\n        :id=\"fieldIds.state\"\n        :value=\"address.formData.state\"\n        @change=\"address.onStateChange\"\n        :defaultItem=\"address.stateDefaultItem\"\n        :dataItems=\"address.stateOptions\"\n        textField=\"label\"\n        valueField=\"value\"\n        dataItemKey=\"value\"\n        :valuePrimitive=\"true\"\n        :valid=\"stateDisplayValid\"\n        :validate=\"validationStylesActive\"\n        :validityStyles=\"validationStylesActive\"\n      />\n      <Error v-if=\"fieldScope && showStateError\">\n        {{ resolvedMessages.field.error.state }}\n      </Error>\n    </div>\n\n    <div class=\"zip\">\n      <TextBox\n        :id=\"fieldIds.zip\"\n        :placeholder=\"resolvedMessages.placeholder.zip\"\n        :wrapperClass=\"address.zipWrapperClass\"\n        :value=\"address.zipDisplay.value\"\n        @input=\"address.onZipInput\"\n        :valid=\"zipDisplayValid\"\n        :validate=\"validationStylesActive\"\n        :validityStyles=\"validationStylesActive\"\n        :style=\"{ width: '100%' }\"\n      />\n      <Error v-if=\"fieldScope && showZipError\">\n        {{ resolvedMessages.field.error.zip }}\n      </Error>\n      <Hint v-if=\"fieldScope && !showZipError\">\n        {{ resolvedMessages.field.hint.zip }}\n      </Hint>\n    </div>\n\n    <div v-if=\"fieldsetScope\" class=\"messages\">\n      <Error v-if=\"showErrors && !address.addressValid.value\">\n        {{ fieldsetErrorMessage }}\n      </Error>\n      <Error v-else-if=\"showOptionalFeedback\">\n        {{ optionalFieldsetErrorMessage }}\n      </Error>\n      <Hint v-else>{{ resolvedMessages.fieldset.hint.address }}</Hint>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { Error, Hint } from \"@progress/kendo-vue-labels\";\nimport { TextBox } from \"@progress/kendo-vue-inputs\";\nimport { DropDownList } from \"@progress/kendo-vue-dropdowns\";\nimport type {\n  USAddressMessageScope,\n  USAddressMessages,\n  USAddressViewModel,\n} from \"./types\";\n\nconst props = withDefaults(\n  defineProps<{\n    id: string;\n    address: USAddressViewModel;\n    required?: boolean;\n    messageScope?: USAddressMessageScope;\n    messages?: USAddressMessages;\n    showAddress2?: boolean;\n  }>(),\n  {\n    required: true,\n    messageScope: \"fieldset\",\n    showAddress2: true,\n  },\n);\n\nconst ZIP_CODE_MESSAGE = \"Enter a 5 or 9 digit zip code.\";\nconst OPTIONAL_FIELDS_MESSAGE = \"Incomplete address.\";\n\ntype USAddressResolvedMessages = {\n  placeholder: {\n    address1: string;\n    address2: string;\n    city: string;\n    zip: string;\n  };\n  fieldset: {\n    error: {\n      required: string;\n      zip: string;\n    };\n    hint: {\n      address: string;\n    };\n  };\n  field: {\n    error: {\n      address1: string;\n      address2: string;\n      city: string;\n      state: string;\n      zip: string;\n    };\n    hint: {\n      address1: string;\n      address2: string;\n      city: string;\n      state: string;\n      zip: string;\n    };\n  };\n};\n\nconst DEFAULT_MESSAGES: USAddressResolvedMessages = {\n  placeholder: {\n    address1: \"Address Line 1\",\n    address2: \"Address Line 2\",\n    city: \"City\",\n    zip: \"00000-0000\",\n  },\n  fieldset: {\n    error: {\n      required: \"Required fields are missing.\",\n      zip: ZIP_CODE_MESSAGE,\n    },\n    hint: {\n      address: \"Enter address information.\",\n    },\n  },\n  field: {\n    error: {\n      address1: \"Required\",\n      address2: \"\",\n      city: \"Required\",\n      state: \"Required\",\n      zip: ZIP_CODE_MESSAGE,\n    },\n    hint: {\n      address1: \"Enter address line 1.\",\n      address2: \"Optional\",\n      city: \"\",\n      state: \"\",\n      zip: ZIP_CODE_MESSAGE,\n    },\n  },\n};\n\nconst resolveMessages = (\n  source?: USAddressMessages,\n): USAddressResolvedMessages => {\n  return {\n    placeholder: {\n      address1:\n        source?.placeholder?.address1 ?? DEFAULT_MESSAGES.placeholder.address1,\n      address2:\n        source?.placeholder?.address2 ?? DEFAULT_MESSAGES.placeholder.address2,\n      city: source?.placeholder?.city ?? DEFAULT_MESSAGES.placeholder.city,\n      zip: source?.placeholder?.zip ?? DEFAULT_MESSAGES.placeholder.zip,\n    },\n    fieldset: {\n      error: {\n        required:\n          source?.fieldset?.error?.required ??\n          DEFAULT_MESSAGES.fieldset.error.required,\n        zip:\n          source?.fieldset?.error?.zip ?? DEFAULT_MESSAGES.fieldset.error.zip,\n      },\n      hint: {\n        address:\n          source?.fieldset?.hint?.address ??\n          DEFAULT_MESSAGES.fieldset.hint.address,\n      },\n    },\n    field: {\n      error: {\n        address1:\n          source?.field?.error?.address1 ??\n          DEFAULT_MESSAGES.field.error.address1,\n        address2:\n          source?.field?.error?.address2 ??\n          DEFAULT_MESSAGES.field.error.address2,\n        city: source?.field?.error?.city ?? DEFAULT_MESSAGES.field.error.city,\n        state:\n          source?.field?.error?.state ?? DEFAULT_MESSAGES.field.error.state,\n        zip: source?.field?.error?.zip ?? DEFAULT_MESSAGES.field.error.zip,\n      },\n      hint: {\n        address1:\n          source?.field?.hint?.address1 ?? DEFAULT_MESSAGES.field.hint.address1,\n        address2:\n          source?.field?.hint?.address2 ?? DEFAULT_MESSAGES.field.hint.address2,\n        city: source?.field?.hint?.city ?? DEFAULT_MESSAGES.field.hint.city,\n        state: source?.field?.hint?.state ?? DEFAULT_MESSAGES.field.hint.state,\n        zip: source?.field?.hint?.zip ?? DEFAULT_MESSAGES.field.hint.zip,\n      },\n    },\n  };\n};\n\nconst resolvedMessages = computed(() => resolveMessages(props.messages));\n\nconst fieldScope = computed(() => {\n  return props.messageScope === \"field\";\n});\n\nconst fieldsetScope = computed(() => {\n  return props.messageScope === \"fieldset\";\n});\n\nconst isRequired = computed(() => props.required);\n\nconst showErrors = computed(() => isRequired.value);\n\nconst fieldIds = computed(() => ({\n  address1: `${props.id}-address1`,\n  address2: `${props.id}-address2`,\n  city: `${props.id}-city`,\n  state: `${props.id}-state`,\n  zip: `${props.id}-zip`,\n}));\n\nconst address = computed(() => props.address);\n\nconst nonZipRequiredFieldsValid = computed(() => {\n  return (\n    address.value.address1Valid.value &&\n    address.value.cityValid.value &&\n    address.value.stateValid.value\n  );\n});\n\nconst hasAnyOptionalInput = computed(() => {\n  return (\n    address.value.formData.address1.trim() !== \"\" ||\n    address.value.formData.address2.trim() !== \"\" ||\n    address.value.formData.city.trim() !== \"\" ||\n    (address.value.formData.state ?? \"\").trim() !== \"\" ||\n    address.value.formData.zip.replace(/\\D/g, \"\") !== \"\"\n  );\n});\n\nconst optionalZipInvalid = computed(() => {\n  if (address.value.optionalZipInvalid) {\n    return address.value.optionalZipInvalid.value;\n  }\n\n  const zipDigits = address.value.formData.zip.replace(/\\D/g, \"\");\n  return (\n    !isRequired.value &&\n    hasAnyOptionalInput.value &&\n    zipDigits.length !== 5 &&\n    zipDigits.length !== 9\n  );\n});\n\nconst optionalPartialInvalid = computed(() => {\n  if (address.value.optionalPartialInvalid) {\n    return address.value.optionalPartialInvalid.value;\n  }\n\n  return (\n    !isRequired.value &&\n    hasAnyOptionalInput.value &&\n    !address.value.addressValid.value\n  );\n});\n\nconst showOptionalFeedback = computed(() => {\n  if (isRequired.value || !optionalPartialInvalid.value) {\n    return false;\n  }\n\n  if (address.value.optionalFeedbackActive) {\n    return address.value.optionalFeedbackActive.value;\n  }\n\n  return false;\n});\n\nconst showAddress1Error = computed(() => {\n  return (\n    (showErrors.value && !address.value.address1Valid.value) ||\n    (showOptionalFeedback.value &&\n      address.value.formData.address1.trim() === \"\")\n  );\n});\n\nconst showCityError = computed(() => {\n  return (\n    (showErrors.value && !address.value.cityValid.value) ||\n    (showOptionalFeedback.value && address.value.formData.city.trim() === \"\")\n  );\n});\n\nconst showStateError = computed(() => {\n  return (\n    (showErrors.value && !address.value.stateValid.value) ||\n    (showOptionalFeedback.value &&\n      (address.value.formData.state ?? \"\").trim() === \"\")\n  );\n});\n\nconst showZipError = computed(() => {\n  return (\n    (showErrors.value && !address.value.zipValid.value) ||\n    (showOptionalFeedback.value && optionalZipInvalid.value)\n  );\n});\n\nconst validationStylesActive = computed(() => {\n  return isRequired.value\n    ? address.value.addressValidate.value\n    : showOptionalFeedback.value;\n});\n\nconst address1DisplayValid = computed(() => {\n  return isRequired.value\n    ? address.value.address1Valid.value\n    : !showAddress1Error.value;\n});\n\nconst cityDisplayValid = computed(() => {\n  return isRequired.value\n    ? address.value.cityValid.value\n    : !showCityError.value;\n});\n\nconst stateDisplayValid = computed(() => {\n  return isRequired.value\n    ? address.value.stateValid.value\n    : !showStateError.value;\n});\n\nconst zipDisplayValid = computed(() => {\n  return isRequired.value ? address.value.zipValid.value : !showZipError.value;\n});\n\nconst address2PlaceholderDisplay = computed(() => {\n  const basePlaceholder = resolvedMessages.value.placeholder.address2;\n\n  if (fieldsetScope.value && isRequired.value) {\n    return `${basePlaceholder} (Optional)`;\n  }\n  return basePlaceholder;\n});\n\nconst fieldsetErrorMessage = computed(() => {\n  const messages: string[] = [];\n\n  if (!nonZipRequiredFieldsValid.value) {\n    messages.push(resolvedMessages.value.fieldset.error.required);\n  }\n\n  if (!address.value.zipValid.value) {\n    messages.push(resolvedMessages.value.fieldset.error.zip);\n  }\n\n  return messages.join(\" \");\n});\n\nconst optionalFieldsetErrorMessage = computed(() => {\n  const messages: string[] = [OPTIONAL_FIELDS_MESSAGE];\n\n  if (optionalZipInvalid.value) {\n    messages.push(resolvedMessages.value.fieldset.error.zip);\n  }\n\n  return messages.join(\" \");\n});\n</script>\n\n<style scoped>\n.fkui-us-address {\n  display: grid;\n  grid-template-columns: 2fr 1fr 1fr;\n  grid-template-areas:\n    \"address1 address1 address1\"\n    \"address2 address2 address2\"\n    \"city     state    zip\"\n    \"messages messages messages\";\n  gap: 0.75rem;\n  margin-bottom: 1rem;\n\n  .address1 {\n    grid-area: address1;\n  }\n\n  .address2 {\n    grid-area: address2;\n  }\n\n  .city {\n    grid-area: city;\n  }\n\n  .state {\n    grid-area: state;\n  }\n\n  .zip {\n    grid-area: zip;\n  }\n\n  .messages {\n    grid-area: messages;\n  }\n\n  :deep(.fk-zip-textbox) {\n    min-width: 100%;\n  }\n}\n\n.fkui-us-address--fieldset-scope {\n  row-gap: 0.5rem;\n\n  .messages {\n    margin-top: -0.375rem;\n  }\n}\n</style>\n"],"names":["ZIP_CODE_MESSAGE","OPTIONAL_FIELDS_MESSAGE","props","__props","DEFAULT_MESSAGES","resolveMessages","source","resolvedMessages","computed","fieldScope","fieldsetScope","isRequired","showErrors","fieldIds","address","nonZipRequiredFieldsValid","hasAnyOptionalInput","optionalZipInvalid","zipDigits","optionalPartialInvalid","showOptionalFeedback","showAddress1Error","showCityError","showStateError","showZipError","validationStylesActive","address1DisplayValid","cityDisplayValid","stateDisplayValid","zipDisplayValid","address2PlaceholderDisplay","basePlaceholder","fieldsetErrorMessage","messages","optionalFieldsetErrorMessage","_createElementBlock","_normalizeClass","_createElementVNode","_hoisted_1","_createVNode","_unref","TextBox","_Fragment","_createBlock","Error","_createTextVNode","_toDisplayString","Hint","showAddress2","_openBlock","_hoisted_2","_hoisted_3","_hoisted_4","DropDownList","_hoisted_5","_hoisted_6"],"mappings":"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"}

package/dist/featherk-ui.umd.js

@@ -1,2 +1,2 @@
-(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@progress/kendo-vue-labels"),require("@progress/kendo-vue-inputs"),require("@progress/kendo-vue-dropdowns")):typeof define=="function"&&define.amd?define(["exports","vue","@progress/kendo-vue-labels","@progress/kendo-vue-inputs","@progress/kendo-vue-dropdowns"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.FeatherKUi={},r.Vue,r.KendoVueLabels,r.KendoVueInputs,r.KendoVueDropdowns))})(this,(function(r,e,o,f,k){"use strict";const B={class:"address1"},S={key:0,class:"address2"},C={class:"city"},x={class:"state"},D={class:"zip"},E={key:1,class:"messages"},v="Enter a 5 or 9 digit zip code.",I="Address is optional. Enter Address 1, City, State, and ZIP (Address Line 2 is optional), or clear the address.",N=((m,l)=>{const s=m.__vccOpts||m;for(const[n,t]of l)s[n]=t;return s})(e.defineComponent({__name:"USAddress",props:{id:{},address:{},required:{type:Boolean,default:!0},messageScope:{default:"fieldset"},showAddress2:{type:Boolean,default:!0},address1Placeholder:{default:"Address Line 1"},address2Placeholder:{default:"Address Line 2"},cityPlaceholder:{default:"City"},zipPlaceholder:{default:"00000-0000"}},setup(m){const l=m,s=e.computed(()=>l.messageScope==="field"),n=e.computed(()=>l.messageScope==="fieldset"),t=e.computed(()=>l.required),u=e.computed(()=>t.value),c=e.computed(()=>({address1:`${l.id}-address1`,address2:`${l.id}-address2`,city:`${l.id}-city`,state:`${l.id}-state`,zip:`${l.id}-zip`})),a=e.computed(()=>l.address),g=e.computed(()=>a.value.address1Valid.value&&a.value.cityValid.value&&a.value.stateValid.value),y=e.computed(()=>a.value.formData.address1.trim()!==""||a.value.formData.address2.trim()!==""||a.value.formData.city.trim()!==""||(a.value.formData.state??"").trim()!==""||a.value.formData.zip.replace(/\D/g,"")!==""),h=e.computed(()=>{if(a.value.optionalZipInvalid)return a.value.optionalZipInvalid.value;const i=a.value.formData.zip.replace(/\D/g,"");return!t.value&&y.value&&i.length!==5&&i.length!==9}),_=e.computed(()=>a.value.optionalPartialInvalid?a.value.optionalPartialInvalid.value:!t.value&&y.value&&!a.value.addressValid.value),p=e.computed(()=>t.value||!_.value?!1:a.value.optionalFeedbackActive?a.value.optionalFeedbackActive.value:!1),w=e.computed(()=>u.value&&!a.value.address1Valid.value||p.value&&a.value.formData.address1.trim()===""),A=e.computed(()=>u.value&&!a.value.cityValid.value||p.value&&a.value.formData.city.trim()===""),P=e.computed(()=>u.value&&!a.value.stateValid.value||p.value&&(a.value.formData.state??"").trim()===""),V=e.computed(()=>u.value&&!a.value.zipValid.value||p.value&&h.value),T=e.computed(()=>n.value&&t.value?`${l.address2Placeholder} (Optional)`:l.address2Placeholder);return(i,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["fkui-us-address",{"fkui-us-address--fieldset-scope":n.value}])},[e.createElementVNode("div",B,[e.createVNode(e.unref(f.TextBox),{id:c.value.address1,placeholder:i.address1Placeholder,value:a.value.formData.address1,valid:t.value?a.value.address1Valid.value:!0,validate:t.value?a.value.addressValidate.value:!1,validityStyles:t.value?a.value.addressValidate.value:!1,onInput:a.value.onAddress1Input},null,8,["id","placeholder","value","valid","validate","validityStyles","onInput"]),s.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[w.value?(e.openBlock(),e.createBlock(e.unref(o.Error),{key:0},{default:e.withCtx(()=>[...d[0]||(d[0]=[e.createTextVNode(" Required. ",-1)])]),_:1})):(e.openBlock(),e.createBlock(e.unref(o.Hint),{key:1},{default:e.withCtx(()=>[...d[1]||(d[1]=[e.createTextVNode("Enter address line 1.",-1)])]),_:1}))],64)):e.createCommentVNode("",!0)]),i.showAddress2?(e.openBlock(),e.createElementBlock("div",S,[e.createVNode(e.unref(f.TextBox),{id:c.value.address2,placeholder:T.value,value:a.value.formData.address2,onInput:a.value.onAddress2Input},null,8,["id","placeholder","value","onInput"]),s.value?(e.openBlock(),e.createBlock(e.unref(o.Hint),{key:0},{default:e.withCtx(()=>[...d[2]||(d[2]=[e.createTextVNode("Optional.",-1)])]),_:1})):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",C,[e.createVNode(e.unref(f.TextBox),{id:c.value.city,placeholder:i.cityPlaceholder,value:a.value.formData.city,valid:t.value?a.value.cityValid.value:!0,validate:t.value?a.value.addressValidate.value:!1,validityStyles:t.value?a.value.addressValidate.value:!1,onInput:a.value.onCityInput},null,8,["id","placeholder","value","valid","validate","validityStyles","onInput"]),s.value&&A.value?(e.openBlock(),e.createBlock(e.unref(o.Error),{key:0},{default:e.withCtx(()=>[...d[3]||(d[3]=[e.createTextVNode(" Required. ",-1)])]),_:1})):e.createCommentVNode("",!0)]),e.createElementVNode("div",x,[e.createVNode(e.unref(k.DropDownList),{id:c.value.state,value:a.value.formData.state,onChange:a.value.onStateChange,defaultItem:a.value.stateDefaultItem,dataItems:a.value.stateOptions,textField:"label",valueField:"value",dataItemKey:"value",valuePrimitive:!0,valid:t.value?a.value.stateValid.value:!0,validate:t.value?a.value.addressValidate.value:!1,validityStyles:t.value?a.value.addressValidate.value:!1},null,8,["id","value","onChange","defaultItem","dataItems","valid","validate","validityStyles"]),s.value&&P.value?(e.openBlock(),e.createBlock(e.unref(o.Error),{key:0},{default:e.withCtx(()=>[...d[4]||(d[4]=[e.createTextVNode(" Required. ",-1)])]),_:1})):e.createCommentVNode("",!0)]),e.createElementVNode("div",D,[e.createVNode(e.unref(f.TextBox),{id:c.value.zip,placeholder:i.zipPlaceholder,wrapperClass:a.value.zipWrapperClass,value:a.value.zipDisplay.value,onInput:a.value.onZipInput,valid:t.value?a.value.zipValid.value:!0,validate:t.value?a.value.addressValidate.value:!1,validityStyles:t.value?a.value.addressValidate.value:!1,style:{width:"100%"}},null,8,["id","placeholder","wrapperClass","value","onInput","valid","validate","validityStyles"]),s.value&&V.value?(e.openBlock(),e.createBlock(e.unref(o.Error),{key:0},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(v))]),_:1})):e.createCommentVNode("",!0),s.value&&!V.value?(e.openBlock(),e.createBlock(e.unref(o.Hint),{key:1},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(v))]),_:1})):e.createCommentVNode("",!0)]),n.value?(e.openBlock(),e.createElementBlock("div",E,[u.value&&!a.value.addressValid.value?(e.openBlock(),e.createBlock(e.unref(o.Error),{key:0},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(g.value?"":"Required fields are missing.")+" "+e.toDisplayString(a.value.zipValid.value?"":v),1)]),_:1})):p.value?(e.openBlock(),e.createBlock(e.unref(o.Error),{key:1},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(I)+" "+e.toDisplayString(h.value?v:""),1)]),_:1})):(e.openBlock(),e.createBlock(e.unref(o.Hint),{key:2},{default:e.withCtx(()=>[...d[5]||(d[5]=[e.createTextVNode("Enter address information.",-1)])]),_:1}))])):e.createCommentVNode("",!0)],2))}}),[["__scopeId","data-v-95d578ff"]]);r.USAddress=N,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})}));
+(function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@progress/kendo-vue-labels"),require("@progress/kendo-vue-inputs"),require("@progress/kendo-vue-dropdowns")):typeof define=="function"&&define.amd?define(["exports","vue","@progress/kendo-vue-labels","@progress/kendo-vue-inputs","@progress/kendo-vue-dropdowns"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i.FeatherKUi={},i.Vue,i.KendoVueLabels,i.KendoVueInputs,i.KendoVueDropdowns))})(this,(function(i,e,s,v,B){"use strict";const x={class:"address1"},E={key:0,class:"address2"},C={class:"city"},I={class:"state"},N={class:"zip"},w={key:1,class:"messages"},y="Enter a 5 or 9 digit zip code.",A="Incomplete address.",T=((m,d)=>{const l=m.__vccOpts||m;for(const[h,r]of d)l[h]=r;return l})(e.defineComponent({__name:"USAddress",props:{id:{},address:{},required:{type:Boolean,default:!0},messageScope:{default:"fieldset"},messages:{},showAddress2:{type:Boolean,default:!0}},setup(m){const d=m,l={placeholder:{address1:"Address Line 1",address2:"Address Line 2",city:"City",zip:"00000-0000"},fieldset:{error:{required:"Required fields are missing.",zip:y},hint:{address:"Enter address information."}},field:{error:{address1:"Required",address2:"",city:"Required",state:"Required",zip:y},hint:{address1:"Enter address line 1.",address2:"Optional",city:"",state:"",zip:y}}},h=t=>({placeholder:{address1:t?.placeholder?.address1??l.placeholder.address1,address2:t?.placeholder?.address2??l.placeholder.address2,city:t?.placeholder?.city??l.placeholder.city,zip:t?.placeholder?.zip??l.placeholder.zip},fieldset:{error:{required:t?.fieldset?.error?.required??l.fieldset.error.required,zip:t?.fieldset?.error?.zip??l.fieldset.error.zip},hint:{address:t?.fieldset?.hint?.address??l.fieldset.hint.address}},field:{error:{address1:t?.field?.error?.address1??l.field.error.address1,address2:t?.field?.error?.address2??l.field.error.address2,city:t?.field?.error?.city??l.field.error.city,state:t?.field?.error?.state??l.field.error.state,zip:t?.field?.error?.zip??l.field.error.zip},hint:{address1:t?.field?.hint?.address1??l.field.hint.address1,address2:t?.field?.hint?.address2??l.field.hint.address2,city:t?.field?.hint?.city??l.field.hint.city,state:t?.field?.hint?.state??l.field.hint.state,zip:t?.field?.hint?.zip??l.field.hint.zip}}}),r=e.computed(()=>h(d.messages)),c=e.computed(()=>d.messageScope==="field"),_=e.computed(()=>d.messageScope==="fieldset"),o=e.computed(()=>d.required),u=e.computed(()=>o.value),f=e.computed(()=>({address1:`${d.id}-address1`,address2:`${d.id}-address2`,city:`${d.id}-city`,state:`${d.id}-state`,zip:`${d.id}-zip`})),a=e.computed(()=>d.address),q=e.computed(()=>a.value.address1Valid.value&&a.value.cityValid.value&&a.value.stateValid.value),D=e.computed(()=>a.value.formData.address1.trim()!==""||a.value.formData.address2.trim()!==""||a.value.formData.city.trim()!==""||(a.value.formData.state??"").trim()!==""||a.value.formData.zip.replace(/\D/g,"")!==""),S=e.computed(()=>{if(a.value.optionalZipInvalid)return a.value.optionalZipInvalid.value;const t=a.value.formData.zip.replace(/\D/g,"");return!o.value&&D.value&&t.length!==5&&t.length!==9}),F=e.computed(()=>a.value.optionalPartialInvalid?a.value.optionalPartialInvalid.value:!o.value&&D.value&&!a.value.addressValid.value),p=e.computed(()=>o.value||!F.value?!1:a.value.optionalFeedbackActive?a.value.optionalFeedbackActive.value:!1),V=e.computed(()=>u.value&&!a.value.address1Valid.value||p.value&&a.value.formData.address1.trim()===""),g=e.computed(()=>u.value&&!a.value.cityValid.value||p.value&&a.value.formData.city.trim()===""),z=e.computed(()=>u.value&&!a.value.stateValid.value||p.value&&(a.value.formData.state??"").trim()===""),k=e.computed(()=>u.value&&!a.value.zipValid.value||p.value&&S.value),n=e.computed(()=>o.value?a.value.addressValidate.value:p.value),O=e.computed(()=>o.value?a.value.address1Valid.value:!V.value),P=e.computed(()=>o.value?a.value.cityValid.value:!g.value),M=e.computed(()=>o.value?a.value.stateValid.value:!z.value),Z=e.computed(()=>o.value?a.value.zipValid.value:!k.value),R=e.computed(()=>{const t=r.value.placeholder.address2;return _.value&&o.value?`${t} (Optional)`:t}),$=e.computed(()=>{const t=[];return q.value||t.push(r.value.fieldset.error.required),a.value.zipValid.value||t.push(r.value.fieldset.error.zip),t.join(" ")}),K=e.computed(()=>{const t=[A];return S.value&&t.push(r.value.fieldset.error.zip),t.join(" ")});return(t,H)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["fkui-us-address",{"fkui-us-address--fieldset-scope":_.value}])},[e.createElementVNode("div",x,[e.createVNode(e.unref(v.TextBox),{id:f.value.address1,placeholder:r.value.placeholder.address1,value:a.value.formData.address1,valid:O.value,validate:n.value,validityStyles:n.value,onInput:a.value.onAddress1Input},null,8,["id","placeholder","value","valid","validate","validityStyles","onInput"]),c.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[V.value?(e.openBlock(),e.createBlock(e.unref(s.Error),{key:0},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.value.field.error.address1),1)]),_:1})):(e.openBlock(),e.createBlock(e.unref(s.Hint),{key:1},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.value.field.hint.address1),1)]),_:1}))],64)):e.createCommentVNode("",!0)]),t.showAddress2?(e.openBlock(),e.createElementBlock("div",E,[e.createVNode(e.unref(v.TextBox),{id:f.value.address2,placeholder:R.value,value:a.value.formData.address2,onInput:a.value.onAddress2Input},null,8,["id","placeholder","value","onInput"]),c.value?(e.openBlock(),e.createBlock(e.unref(s.Hint),{key:0},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.value.field.hint.address2),1)]),_:1})):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",C,[e.createVNode(e.unref(v.TextBox),{id:f.value.city,placeholder:r.value.placeholder.city,value:a.value.formData.city,valid:P.value,validate:n.value,validityStyles:n.value,onInput:a.value.onCityInput},null,8,["id","placeholder","value","valid","validate","validityStyles","onInput"]),c.value&&g.value?(e.openBlock(),e.createBlock(e.unref(s.Error),{key:0},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.value.field.error.city),1)]),_:1})):e.createCommentVNode("",!0)]),e.createElementVNode("div",I,[e.createVNode(e.unref(B.DropDownList),{id:f.value.state,value:a.value.formData.state,onChange:a.value.onStateChange,defaultItem:a.value.stateDefaultItem,dataItems:a.value.stateOptions,textField:"label",valueField:"value",dataItemKey:"value",valuePrimitive:!0,valid:M.value,validate:n.value,validityStyles:n.value},null,8,["id","value","onChange","defaultItem","dataItems","valid","validate","validityStyles"]),c.value&&z.value?(e.openBlock(),e.createBlock(e.unref(s.Error),{key:0},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.value.field.error.state),1)]),_:1})):e.createCommentVNode("",!0)]),e.createElementVNode("div",N,[e.createVNode(e.unref(v.TextBox),{id:f.value.zip,placeholder:r.value.placeholder.zip,wrapperClass:a.value.zipWrapperClass,value:a.value.zipDisplay.value,onInput:a.value.onZipInput,valid:Z.value,validate:n.value,validityStyles:n.value,style:{width:"100%"}},null,8,["id","placeholder","wrapperClass","value","onInput","valid","validate","validityStyles"]),c.value&&k.value?(e.openBlock(),e.createBlock(e.unref(s.Error),{key:0},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.value.field.error.zip),1)]),_:1})):e.createCommentVNode("",!0),c.value&&!k.value?(e.openBlock(),e.createBlock(e.unref(s.Hint),{key:1},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.value.field.hint.zip),1)]),_:1})):e.createCommentVNode("",!0)]),_.value?(e.openBlock(),e.createElementBlock("div",w,[u.value&&!a.value.addressValid.value?(e.openBlock(),e.createBlock(e.unref(s.Error),{key:0},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString($.value),1)]),_:1})):p.value?(e.openBlock(),e.createBlock(e.unref(s.Error),{key:1},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(K.value),1)]),_:1})):(e.openBlock(),e.createBlock(e.unref(s.Hint),{key:2},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.value.fieldset.hint.address),1)]),_:1}))])):e.createCommentVNode("",!0)],2))}}),[["__scopeId","data-v-8aeb035b"]]);i.USAddress=T,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})}));
 //# sourceMappingURL=featherk-ui.umd.js.map

package/dist/featherk-ui.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"featherk-ui.umd.js","sources":["../src/address/USAddress.vue"],"sourcesContent":["<template>\n  <div\n    class=\"fkui-us-address\"\n    :class=\"{ 'fkui-us-address--fieldset-scope': fieldsetScope }\"\n  >\n    <div class=\"address1\">\n      <TextBox\n        :id=\"fieldIds.address1\"\n        :placeholder=\"address1Placeholder\"\n        :value=\"address.formData.address1\"\n        :valid=\"isRequired ? address.address1Valid.value : true\"\n        :validate=\"isRequired ? address.addressValidate.value : false\"\n        :validityStyles=\"isRequired ? address.addressValidate.value : false\"\n        @input=\"address.onAddress1Input\"\n      />\n      <template v-if=\"fieldScope\">\n        <Error v-if=\"showAddress1Error\"> Required. </Error>\n        <Hint v-else>Enter address line 1.</Hint>\n      </template>\n    </div>\n\n    <div v-if=\"showAddress2\" class=\"address2\">\n      <TextBox\n        :id=\"fieldIds.address2\"\n        :placeholder=\"address2PlaceholderDisplay\"\n        :value=\"address.formData.address2\"\n        @input=\"address.onAddress2Input\"\n      />\n      <Hint v-if=\"fieldScope\">Optional.</Hint>\n    </div>\n\n    <div class=\"city\">\n      <TextBox\n        :id=\"fieldIds.city\"\n        :placeholder=\"cityPlaceholder\"\n        :value=\"address.formData.city\"\n        :valid=\"isRequired ? address.cityValid.value : true\"\n        :validate=\"isRequired ? address.addressValidate.value : false\"\n        :validityStyles=\"isRequired ? address.addressValidate.value : false\"\n        @input=\"address.onCityInput\"\n      />\n      <Error v-if=\"fieldScope && showCityError\"> Required. </Error>\n    </div>\n\n    <div class=\"state\">\n      <DropDownList\n        :id=\"fieldIds.state\"\n        :value=\"address.formData.state\"\n        @change=\"address.onStateChange\"\n        :defaultItem=\"address.stateDefaultItem\"\n        :dataItems=\"address.stateOptions\"\n        textField=\"label\"\n        valueField=\"value\"\n        dataItemKey=\"value\"\n        :valuePrimitive=\"true\"\n        :valid=\"isRequired ? address.stateValid.value : true\"\n        :validate=\"isRequired ? address.addressValidate.value : false\"\n        :validityStyles=\"isRequired ? address.addressValidate.value : false\"\n      />\n      <Error v-if=\"fieldScope && showStateError\"> Required. </Error>\n    </div>\n\n    <div class=\"zip\">\n      <TextBox\n        :id=\"fieldIds.zip\"\n        :placeholder=\"zipPlaceholder\"\n        :wrapperClass=\"address.zipWrapperClass\"\n        :value=\"address.zipDisplay.value\"\n        @input=\"address.onZipInput\"\n        :valid=\"isRequired ? address.zipValid.value : true\"\n        :validate=\"isRequired ? address.addressValidate.value : false\"\n        :validityStyles=\"isRequired ? address.addressValidate.value : false\"\n        :style=\"{ width: '100%' }\"\n      />\n      <Error v-if=\"fieldScope && showZipError\">\n        {{ ZIP_CODE_MESSAGE }}\n      </Error>\n      <Hint v-if=\"fieldScope && !showZipError\">\n        {{ ZIP_CODE_MESSAGE }}\n      </Hint>\n    </div>\n\n    <div v-if=\"fieldsetScope\" class=\"messages\">\n      <Error v-if=\"showErrors && !address.addressValid.value\">\n        {{ nonZipRequiredFieldsValid ? \"\" : \"Required fields are missing.\" }}\n        {{ address.zipValid.value ? \"\" : ZIP_CODE_MESSAGE }}\n      </Error>\n      <Error v-else-if=\"showOptionalFeedback\">\n        {{ OPTIONAL_FIELDS_MESSAGE }}\n        {{ optionalZipInvalid ? ZIP_CODE_MESSAGE : \"\" }}\n      </Error>\n      <Hint v-else>Enter address information.</Hint>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { Error, Hint } from \"@progress/kendo-vue-labels\";\nimport { TextBox } from \"@progress/kendo-vue-inputs\";\nimport { DropDownList } from \"@progress/kendo-vue-dropdowns\";\n\ninterface USAddressViewModel {\n  formData: {\n    address1: string;\n    address2: string;\n    city: string;\n    state: string | null;\n    zip: string;\n  };\n  addressValidate: { value: boolean };\n  address1Valid: { value: boolean };\n  cityValid: { value: boolean };\n  stateValid: { value: boolean };\n  zipValid: { value: boolean };\n  addressValid: { value: boolean };\n  optionalFeedbackActive?: { value: boolean };\n  optionalPartialInvalid?: { value: boolean };\n  optionalMissingRequiredFields?: { value: boolean };\n  optionalZipInvalid?: { value: boolean };\n  stateDefaultItem: { label: string; value: string | null };\n  stateOptions: Array<{ label: string; value: string }>;\n  zipDisplay: { value: string };\n  zipWrapperClass: string;\n  onAddress1Input: (...args: unknown[]) => void;\n  onAddress2Input: (...args: unknown[]) => void;\n  onCityInput: (...args: unknown[]) => void;\n  onStateChange: (event: { value: string | null }) => void;\n  onZipInput: (...args: unknown[]) => void;\n}\n\nconst props = withDefaults(\n  defineProps<{\n    id: string;\n    address: USAddressViewModel;\n    required?: boolean;\n    messageScope?: USAddressMessageScope;\n    showAddress2?: boolean;\n    address1Placeholder?: string;\n    address2Placeholder?: string;\n    cityPlaceholder?: string;\n    zipPlaceholder?: string;\n  }>(),\n  {\n    required: true,\n    messageScope: \"fieldset\",\n    showAddress2: true,\n    address1Placeholder: \"Address Line 1\",\n    address2Placeholder: \"Address Line 2\",\n    cityPlaceholder: \"City\",\n    zipPlaceholder: \"00000-0000\",\n  },\n);\n\nconst ZIP_CODE_MESSAGE = \"Enter a 5 or 9 digit zip code.\";\nconst OPTIONAL_FIELDS_MESSAGE =\n  \"Address is optional. Enter Address 1, City, State, and ZIP (Address Line 2 is optional), or clear the address.\";\n\ntype USAddressMessageScope = \"field\" | \"fieldset\";\n\nconst fieldScope = computed(() => {\n  return props.messageScope === \"field\";\n});\n\nconst fieldsetScope = computed(() => {\n  return props.messageScope === \"fieldset\";\n});\n\nconst isRequired = computed(() => props.required);\n\nconst showErrors = computed(() => isRequired.value);\n\nconst fieldIds = computed(() => ({\n  address1: `${props.id}-address1`,\n  address2: `${props.id}-address2`,\n  city: `${props.id}-city`,\n  state: `${props.id}-state`,\n  zip: `${props.id}-zip`,\n}));\n\nconst address = computed(() => props.address);\n\nconst nonZipRequiredFieldsValid = computed(() => {\n  return (\n    address.value.address1Valid.value &&\n    address.value.cityValid.value &&\n    address.value.stateValid.value\n  );\n});\n\nconst hasAnyOptionalInput = computed(() => {\n  return (\n    address.value.formData.address1.trim() !== \"\" ||\n    address.value.formData.address2.trim() !== \"\" ||\n    address.value.formData.city.trim() !== \"\" ||\n    (address.value.formData.state ?? \"\").trim() !== \"\" ||\n    address.value.formData.zip.replace(/\\D/g, \"\") !== \"\"\n  );\n});\n\nconst optionalZipInvalid = computed(() => {\n  if (address.value.optionalZipInvalid) {\n    return address.value.optionalZipInvalid.value;\n  }\n\n  const zipDigits = address.value.formData.zip.replace(/\\D/g, \"\");\n  return (\n    !isRequired.value &&\n    hasAnyOptionalInput.value &&\n    zipDigits.length !== 5 &&\n    zipDigits.length !== 9\n  );\n});\n\nconst optionalPartialInvalid = computed(() => {\n  if (address.value.optionalPartialInvalid) {\n    return address.value.optionalPartialInvalid.value;\n  }\n\n  return (\n    !isRequired.value &&\n    hasAnyOptionalInput.value &&\n    !address.value.addressValid.value\n  );\n});\n\nconst showOptionalFeedback = computed(() => {\n  if (isRequired.value || !optionalPartialInvalid.value) {\n    return false;\n  }\n\n  if (address.value.optionalFeedbackActive) {\n    return address.value.optionalFeedbackActive.value;\n  }\n\n  return false;\n});\n\nconst showAddress1Error = computed(() => {\n  return (\n    (showErrors.value && !address.value.address1Valid.value) ||\n    (showOptionalFeedback.value &&\n      address.value.formData.address1.trim() === \"\")\n  );\n});\n\nconst showCityError = computed(() => {\n  return (\n    (showErrors.value && !address.value.cityValid.value) ||\n    (showOptionalFeedback.value && address.value.formData.city.trim() === \"\")\n  );\n});\n\nconst showStateError = computed(() => {\n  return (\n    (showErrors.value && !address.value.stateValid.value) ||\n    (showOptionalFeedback.value &&\n      (address.value.formData.state ?? \"\").trim() === \"\")\n  );\n});\n\nconst showZipError = computed(() => {\n  return (\n    (showErrors.value && !address.value.zipValid.value) ||\n    (showOptionalFeedback.value && optionalZipInvalid.value)\n  );\n});\n\nconst address2PlaceholderDisplay = computed(() => {\n  if (fieldsetScope.value && isRequired.value) {\n    return `${props.address2Placeholder} (Optional)`;\n  }\n  return props.address2Placeholder;\n});\n</script>\n\n<style scoped>\n.fkui-us-address {\n  display: grid;\n  grid-template-columns: 2fr 1fr 1fr;\n  grid-template-areas:\n    \"address1 address1 address1\"\n    \"address2 address2 address2\"\n    \"city     state    zip\"\n    \"messages messages messages\";\n  gap: 0.75rem;\n  margin-bottom: 1rem;\n\n  .address1 {\n    grid-area: address1;\n  }\n\n  .address2 {\n    grid-area: address2;\n  }\n\n  .city {\n    grid-area: city;\n  }\n\n  .state {\n    grid-area: state;\n  }\n\n  .zip {\n    grid-area: zip;\n  }\n\n  .messages {\n    grid-area: messages;\n  }\n\n  :deep(.fk-zip-textbox) {\n    min-width: 100%;\n  }\n}\n\n.fkui-us-address--fieldset-scope {\n  row-gap: 0.5rem;\n\n  .messages {\n    margin-top: -0.375rem;\n  }\n}\n</style>\n"],"names":["ZIP_CODE_MESSAGE","OPTIONAL_FIELDS_MESSAGE","props","__props","fieldScope","computed","fieldsetScope","isRequired","showErrors","fieldIds","address","nonZipRequiredFieldsValid","hasAnyOptionalInput","optionalZipInvalid","zipDigits","optionalPartialInvalid","showOptionalFeedback","showAddress1Error","showCityError","showStateError","showZipError","address2PlaceholderDisplay","_createElementBlock","_normalizeClass","_createElementVNode","_hoisted_1","_createVNode","_unref","TextBox","address1Placeholder","_Fragment","_createBlock","Error","_cache","Hint","showAddress2","_openBlock","_hoisted_2","_hoisted_3","cityPlaceholder","_hoisted_4","DropDownList","_hoisted_5","zipPlaceholder","_hoisted_6","_toDisplayString","_createTextVNode"],"mappings":"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"}
+{"version":3,"file":"featherk-ui.umd.js","sources":["../src/address/USAddress.vue"],"sourcesContent":["<template>\n  <div\n    class=\"fkui-us-address\"\n    :class=\"{ 'fkui-us-address--fieldset-scope': fieldsetScope }\"\n  >\n    <div class=\"address1\">\n      <TextBox\n        :id=\"fieldIds.address1\"\n        :placeholder=\"resolvedMessages.placeholder.address1\"\n        :value=\"address.formData.address1\"\n        :valid=\"address1DisplayValid\"\n        :validate=\"validationStylesActive\"\n        :validityStyles=\"validationStylesActive\"\n        @input=\"address.onAddress1Input\"\n      />\n      <template v-if=\"fieldScope\">\n        <Error v-if=\"showAddress1Error\">\n          {{ resolvedMessages.field.error.address1 }}\n        </Error>\n        <Hint v-else>{{ resolvedMessages.field.hint.address1 }}</Hint>\n      </template>\n    </div>\n\n    <div v-if=\"showAddress2\" class=\"address2\">\n      <TextBox\n        :id=\"fieldIds.address2\"\n        :placeholder=\"address2PlaceholderDisplay\"\n        :value=\"address.formData.address2\"\n        @input=\"address.onAddress2Input\"\n      />\n      <Hint v-if=\"fieldScope\">{{ resolvedMessages.field.hint.address2 }}</Hint>\n    </div>\n\n    <div class=\"city\">\n      <TextBox\n        :id=\"fieldIds.city\"\n        :placeholder=\"resolvedMessages.placeholder.city\"\n        :value=\"address.formData.city\"\n        :valid=\"cityDisplayValid\"\n        :validate=\"validationStylesActive\"\n        :validityStyles=\"validationStylesActive\"\n        @input=\"address.onCityInput\"\n      />\n      <Error v-if=\"fieldScope && showCityError\">\n        {{ resolvedMessages.field.error.city }}\n      </Error>\n    </div>\n\n    <div class=\"state\">\n      <DropDownList\n        :id=\"fieldIds.state\"\n        :value=\"address.formData.state\"\n        @change=\"address.onStateChange\"\n        :defaultItem=\"address.stateDefaultItem\"\n        :dataItems=\"address.stateOptions\"\n        textField=\"label\"\n        valueField=\"value\"\n        dataItemKey=\"value\"\n        :valuePrimitive=\"true\"\n        :valid=\"stateDisplayValid\"\n        :validate=\"validationStylesActive\"\n        :validityStyles=\"validationStylesActive\"\n      />\n      <Error v-if=\"fieldScope && showStateError\">\n        {{ resolvedMessages.field.error.state }}\n      </Error>\n    </div>\n\n    <div class=\"zip\">\n      <TextBox\n        :id=\"fieldIds.zip\"\n        :placeholder=\"resolvedMessages.placeholder.zip\"\n        :wrapperClass=\"address.zipWrapperClass\"\n        :value=\"address.zipDisplay.value\"\n        @input=\"address.onZipInput\"\n        :valid=\"zipDisplayValid\"\n        :validate=\"validationStylesActive\"\n        :validityStyles=\"validationStylesActive\"\n        :style=\"{ width: '100%' }\"\n      />\n      <Error v-if=\"fieldScope && showZipError\">\n        {{ resolvedMessages.field.error.zip }}\n      </Error>\n      <Hint v-if=\"fieldScope && !showZipError\">\n        {{ resolvedMessages.field.hint.zip }}\n      </Hint>\n    </div>\n\n    <div v-if=\"fieldsetScope\" class=\"messages\">\n      <Error v-if=\"showErrors && !address.addressValid.value\">\n        {{ fieldsetErrorMessage }}\n      </Error>\n      <Error v-else-if=\"showOptionalFeedback\">\n        {{ optionalFieldsetErrorMessage }}\n      </Error>\n      <Hint v-else>{{ resolvedMessages.fieldset.hint.address }}</Hint>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { Error, Hint } from \"@progress/kendo-vue-labels\";\nimport { TextBox } from \"@progress/kendo-vue-inputs\";\nimport { DropDownList } from \"@progress/kendo-vue-dropdowns\";\nimport type {\n  USAddressMessageScope,\n  USAddressMessages,\n  USAddressViewModel,\n} from \"./types\";\n\nconst props = withDefaults(\n  defineProps<{\n    id: string;\n    address: USAddressViewModel;\n    required?: boolean;\n    messageScope?: USAddressMessageScope;\n    messages?: USAddressMessages;\n    showAddress2?: boolean;\n  }>(),\n  {\n    required: true,\n    messageScope: \"fieldset\",\n    showAddress2: true,\n  },\n);\n\nconst ZIP_CODE_MESSAGE = \"Enter a 5 or 9 digit zip code.\";\nconst OPTIONAL_FIELDS_MESSAGE = \"Incomplete address.\";\n\ntype USAddressResolvedMessages = {\n  placeholder: {\n    address1: string;\n    address2: string;\n    city: string;\n    zip: string;\n  };\n  fieldset: {\n    error: {\n      required: string;\n      zip: string;\n    };\n    hint: {\n      address: string;\n    };\n  };\n  field: {\n    error: {\n      address1: string;\n      address2: string;\n      city: string;\n      state: string;\n      zip: string;\n    };\n    hint: {\n      address1: string;\n      address2: string;\n      city: string;\n      state: string;\n      zip: string;\n    };\n  };\n};\n\nconst DEFAULT_MESSAGES: USAddressResolvedMessages = {\n  placeholder: {\n    address1: \"Address Line 1\",\n    address2: \"Address Line 2\",\n    city: \"City\",\n    zip: \"00000-0000\",\n  },\n  fieldset: {\n    error: {\n      required: \"Required fields are missing.\",\n      zip: ZIP_CODE_MESSAGE,\n    },\n    hint: {\n      address: \"Enter address information.\",\n    },\n  },\n  field: {\n    error: {\n      address1: \"Required\",\n      address2: \"\",\n      city: \"Required\",\n      state: \"Required\",\n      zip: ZIP_CODE_MESSAGE,\n    },\n    hint: {\n      address1: \"Enter address line 1.\",\n      address2: \"Optional\",\n      city: \"\",\n      state: \"\",\n      zip: ZIP_CODE_MESSAGE,\n    },\n  },\n};\n\nconst resolveMessages = (\n  source?: USAddressMessages,\n): USAddressResolvedMessages => {\n  return {\n    placeholder: {\n      address1:\n        source?.placeholder?.address1 ?? DEFAULT_MESSAGES.placeholder.address1,\n      address2:\n        source?.placeholder?.address2 ?? DEFAULT_MESSAGES.placeholder.address2,\n      city: source?.placeholder?.city ?? DEFAULT_MESSAGES.placeholder.city,\n      zip: source?.placeholder?.zip ?? DEFAULT_MESSAGES.placeholder.zip,\n    },\n    fieldset: {\n      error: {\n        required:\n          source?.fieldset?.error?.required ??\n          DEFAULT_MESSAGES.fieldset.error.required,\n        zip:\n          source?.fieldset?.error?.zip ?? DEFAULT_MESSAGES.fieldset.error.zip,\n      },\n      hint: {\n        address:\n          source?.fieldset?.hint?.address ??\n          DEFAULT_MESSAGES.fieldset.hint.address,\n      },\n    },\n    field: {\n      error: {\n        address1:\n          source?.field?.error?.address1 ??\n          DEFAULT_MESSAGES.field.error.address1,\n        address2:\n          source?.field?.error?.address2 ??\n          DEFAULT_MESSAGES.field.error.address2,\n        city: source?.field?.error?.city ?? DEFAULT_MESSAGES.field.error.city,\n        state:\n          source?.field?.error?.state ?? DEFAULT_MESSAGES.field.error.state,\n        zip: source?.field?.error?.zip ?? DEFAULT_MESSAGES.field.error.zip,\n      },\n      hint: {\n        address1:\n          source?.field?.hint?.address1 ?? DEFAULT_MESSAGES.field.hint.address1,\n        address2:\n          source?.field?.hint?.address2 ?? DEFAULT_MESSAGES.field.hint.address2,\n        city: source?.field?.hint?.city ?? DEFAULT_MESSAGES.field.hint.city,\n        state: source?.field?.hint?.state ?? DEFAULT_MESSAGES.field.hint.state,\n        zip: source?.field?.hint?.zip ?? DEFAULT_MESSAGES.field.hint.zip,\n      },\n    },\n  };\n};\n\nconst resolvedMessages = computed(() => resolveMessages(props.messages));\n\nconst fieldScope = computed(() => {\n  return props.messageScope === \"field\";\n});\n\nconst fieldsetScope = computed(() => {\n  return props.messageScope === \"fieldset\";\n});\n\nconst isRequired = computed(() => props.required);\n\nconst showErrors = computed(() => isRequired.value);\n\nconst fieldIds = computed(() => ({\n  address1: `${props.id}-address1`,\n  address2: `${props.id}-address2`,\n  city: `${props.id}-city`,\n  state: `${props.id}-state`,\n  zip: `${props.id}-zip`,\n}));\n\nconst address = computed(() => props.address);\n\nconst nonZipRequiredFieldsValid = computed(() => {\n  return (\n    address.value.address1Valid.value &&\n    address.value.cityValid.value &&\n    address.value.stateValid.value\n  );\n});\n\nconst hasAnyOptionalInput = computed(() => {\n  return (\n    address.value.formData.address1.trim() !== \"\" ||\n    address.value.formData.address2.trim() !== \"\" ||\n    address.value.formData.city.trim() !== \"\" ||\n    (address.value.formData.state ?? \"\").trim() !== \"\" ||\n    address.value.formData.zip.replace(/\\D/g, \"\") !== \"\"\n  );\n});\n\nconst optionalZipInvalid = computed(() => {\n  if (address.value.optionalZipInvalid) {\n    return address.value.optionalZipInvalid.value;\n  }\n\n  const zipDigits = address.value.formData.zip.replace(/\\D/g, \"\");\n  return (\n    !isRequired.value &&\n    hasAnyOptionalInput.value &&\n    zipDigits.length !== 5 &&\n    zipDigits.length !== 9\n  );\n});\n\nconst optionalPartialInvalid = computed(() => {\n  if (address.value.optionalPartialInvalid) {\n    return address.value.optionalPartialInvalid.value;\n  }\n\n  return (\n    !isRequired.value &&\n    hasAnyOptionalInput.value &&\n    !address.value.addressValid.value\n  );\n});\n\nconst showOptionalFeedback = computed(() => {\n  if (isRequired.value || !optionalPartialInvalid.value) {\n    return false;\n  }\n\n  if (address.value.optionalFeedbackActive) {\n    return address.value.optionalFeedbackActive.value;\n  }\n\n  return false;\n});\n\nconst showAddress1Error = computed(() => {\n  return (\n    (showErrors.value && !address.value.address1Valid.value) ||\n    (showOptionalFeedback.value &&\n      address.value.formData.address1.trim() === \"\")\n  );\n});\n\nconst showCityError = computed(() => {\n  return (\n    (showErrors.value && !address.value.cityValid.value) ||\n    (showOptionalFeedback.value && address.value.formData.city.trim() === \"\")\n  );\n});\n\nconst showStateError = computed(() => {\n  return (\n    (showErrors.value && !address.value.stateValid.value) ||\n    (showOptionalFeedback.value &&\n      (address.value.formData.state ?? \"\").trim() === \"\")\n  );\n});\n\nconst showZipError = computed(() => {\n  return (\n    (showErrors.value && !address.value.zipValid.value) ||\n    (showOptionalFeedback.value && optionalZipInvalid.value)\n  );\n});\n\nconst validationStylesActive = computed(() => {\n  return isRequired.value\n    ? address.value.addressValidate.value\n    : showOptionalFeedback.value;\n});\n\nconst address1DisplayValid = computed(() => {\n  return isRequired.value\n    ? address.value.address1Valid.value\n    : !showAddress1Error.value;\n});\n\nconst cityDisplayValid = computed(() => {\n  return isRequired.value\n    ? address.value.cityValid.value\n    : !showCityError.value;\n});\n\nconst stateDisplayValid = computed(() => {\n  return isRequired.value\n    ? address.value.stateValid.value\n    : !showStateError.value;\n});\n\nconst zipDisplayValid = computed(() => {\n  return isRequired.value ? address.value.zipValid.value : !showZipError.value;\n});\n\nconst address2PlaceholderDisplay = computed(() => {\n  const basePlaceholder = resolvedMessages.value.placeholder.address2;\n\n  if (fieldsetScope.value && isRequired.value) {\n    return `${basePlaceholder} (Optional)`;\n  }\n  return basePlaceholder;\n});\n\nconst fieldsetErrorMessage = computed(() => {\n  const messages: string[] = [];\n\n  if (!nonZipRequiredFieldsValid.value) {\n    messages.push(resolvedMessages.value.fieldset.error.required);\n  }\n\n  if (!address.value.zipValid.value) {\n    messages.push(resolvedMessages.value.fieldset.error.zip);\n  }\n\n  return messages.join(\" \");\n});\n\nconst optionalFieldsetErrorMessage = computed(() => {\n  const messages: string[] = [OPTIONAL_FIELDS_MESSAGE];\n\n  if (optionalZipInvalid.value) {\n    messages.push(resolvedMessages.value.fieldset.error.zip);\n  }\n\n  return messages.join(\" \");\n});\n</script>\n\n<style scoped>\n.fkui-us-address {\n  display: grid;\n  grid-template-columns: 2fr 1fr 1fr;\n  grid-template-areas:\n    \"address1 address1 address1\"\n    \"address2 address2 address2\"\n    \"city     state    zip\"\n    \"messages messages messages\";\n  gap: 0.75rem;\n  margin-bottom: 1rem;\n\n  .address1 {\n    grid-area: address1;\n  }\n\n  .address2 {\n    grid-area: address2;\n  }\n\n  .city {\n    grid-area: city;\n  }\n\n  .state {\n    grid-area: state;\n  }\n\n  .zip {\n    grid-area: zip;\n  }\n\n  .messages {\n    grid-area: messages;\n  }\n\n  :deep(.fk-zip-textbox) {\n    min-width: 100%;\n  }\n}\n\n.fkui-us-address--fieldset-scope {\n  row-gap: 0.5rem;\n\n  .messages {\n    margin-top: -0.375rem;\n  }\n}\n</style>\n"],"names":["ZIP_CODE_MESSAGE","OPTIONAL_FIELDS_MESSAGE","props","__props","DEFAULT_MESSAGES","resolveMessages","source","resolvedMessages","computed","fieldScope","fieldsetScope","isRequired","showErrors","fieldIds","address","nonZipRequiredFieldsValid","hasAnyOptionalInput","optionalZipInvalid","zipDigits","optionalPartialInvalid","showOptionalFeedback","showAddress1Error","showCityError","showStateError","showZipError","validationStylesActive","address1DisplayValid","cityDisplayValid","stateDisplayValid","zipDisplayValid","address2PlaceholderDisplay","basePlaceholder","fieldsetErrorMessage","messages","optionalFieldsetErrorMessage","_createElementBlock","_normalizeClass","_createElementVNode","_hoisted_1","_createVNode","_unref","TextBox","_Fragment","_createBlock","Error","_createTextVNode","_toDisplayString","Hint","showAddress2","_openBlock","_hoisted_2","_hoisted_3","_hoisted_4","DropDownList","_hoisted_5","_hoisted_6"],"mappings":"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"}

package/dist/ui.css

@@ -1 +1 @@
-.fkui-us-address[data-v-95d578ff]{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-areas:"address1 address1 address1" "address2 address2 address2" "city     state    zip" "messages messages messages";gap:.75rem;margin-bottom:1rem}.fkui-us-address .address1[data-v-95d578ff]{grid-area:address1}.fkui-us-address .address2[data-v-95d578ff]{grid-area:address2}.fkui-us-address .city[data-v-95d578ff]{grid-area:city}.fkui-us-address .state[data-v-95d578ff]{grid-area:state}.fkui-us-address .zip[data-v-95d578ff]{grid-area:zip}.fkui-us-address .messages[data-v-95d578ff]{grid-area:messages}.fkui-us-address [data-v-95d578ff] .fk-zip-textbox{min-width:100%}.fkui-us-address--fieldset-scope[data-v-95d578ff]{row-gap:.5rem}.fkui-us-address--fieldset-scope .messages[data-v-95d578ff]{margin-top:-.375rem}
+.fkui-us-address[data-v-8aeb035b]{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-areas:"address1 address1 address1" "address2 address2 address2" "city     state    zip" "messages messages messages";gap:.75rem;margin-bottom:1rem}.fkui-us-address .address1[data-v-8aeb035b]{grid-area:address1}.fkui-us-address .address2[data-v-8aeb035b]{grid-area:address2}.fkui-us-address .city[data-v-8aeb035b]{grid-area:city}.fkui-us-address .state[data-v-8aeb035b]{grid-area:state}.fkui-us-address .zip[data-v-8aeb035b]{grid-area:zip}.fkui-us-address .messages[data-v-8aeb035b]{grid-area:messages}.fkui-us-address [data-v-8aeb035b] .fk-zip-textbox{min-width:100%}.fkui-us-address--fieldset-scope[data-v-8aeb035b]{row-gap:.5rem}.fkui-us-address--fieldset-scope .messages[data-v-8aeb035b]{margin-top:-.375rem}

package/docs/address/USAddress.md

@@ -16,8 +16,26 @@ The component includes:
 ```ts
 import { USAddress } from "@featherk/ui";
 import { useUSAddress } from "@featherk/composables/address";
+import type {
+  USAddressMessages,
+  USAddressViewModel,
+  USAddressFormData,
+  USAddressValidityState,
+} from "@featherk/ui";
 ```
 
+Exported UI types include:
+
+- `USAddressMessages`
+- `USAddressViewModel`
+- `USAddressFormData`
+- `USAddressValidityState`
+- `USAddressOptionalFeedbackState`
+- `USAddressStateItem`
+- `USAddressStateOption`
+- `USAddressDerivedState`
+- `USAddressInputHandlers`
+
 ## Quick Start
 
 1. Call `useUSAddress({ fieldsetRef, addressId, required })` to get the composable API.
@@ -25,10 +43,12 @@ import { useUSAddress } from "@featherk/composables/address";
 3. Wire the fieldset's `@focusout` to `onFieldsetFocusout` — this activates
    delayed validation, which stays suspended until the fieldset loses focus
    or the form is submitted.
-4. On submit, call `await address.validateForSubmit()`. This sets internal
+4. (Optional) Define a typed `USAddressMessages` object and pass it to
+  `<USAddress :messages="..." />` to customize placeholders and messaging.
+5. On submit, call `await address.validateForSubmit()`. This sets internal
    `submitted` state (activating error display) and returns
    `{ isValid, payload }`, where `payload` is `null` when `isValid` is `false`.
-5. On reset, call `address.reset()`. **Use `type="button"` on the Reset
+6. On reset, call `address.reset()`. **Use `type="button"` on the Reset
    control** — the HTML default is `type="submit"`, which would immediately
    re-trigger form submission and re-raise the error you just cleared.
 
@@ -38,6 +58,7 @@ import { useUSAddress } from "@featherk/composables/address";
 <script setup lang="ts">
 import { ref } from "vue";
 import { USAddress } from "@featherk/ui";
+import type { USAddressMessages } from "@featherk/ui";
 import { useUSAddress } from "@featherk/composables/address";
 
 const shippingFieldsetRef = ref<HTMLFieldSetElement | null>(null);
@@ -50,17 +71,35 @@ const shippingAddress = useUSAddress({
   required: isShippingAddressRequired,
 });
 
+const addressMessages: USAddressMessages = {
+  placeholder: {
+    address1: "Street address",
+    city: "City / Town",
+  },
+  field: {
+    error: {
+      address1: "Required",
+      city: "Required",
+      state: "Required",
+      zip: "Enter a 5 or 9 digit zip code.",
+    },
+    hint: {
+      address2: "Optional",
+    },
+  },
+};
+
 // Step 3: activates delayed validation on fieldset blur
 const onFieldsetFocusout = (event: FocusEvent) => {
   shippingAddress.onFieldsetFocusout(event);
 };
 
-// Step 5
+// Step 6
 function onReset() {
   shippingAddress.reset();
 }
 
-// Step 4
+// Step 5
 async function onSubmit() {
   const result = await shippingAddress.validateForSubmit();
   if (!result.isValid) return;
@@ -78,6 +117,7 @@ async function onSubmit() {
         id="shipping-address"
         :address="shippingAddress"
         :required="isShippingAddressRequired"
+        :messages="addressMessages"
         messageScope="fieldset"
       />
 
@@ -86,7 +126,7 @@ async function onSubmit() {
     </fieldset>
 
     <button type="submit">Submit</button>
-    <!-- Step 5: type="button" required, see Quick Start -->
+    <!-- Step 6: type="button" required, see Quick Start -->
     <button type="button" @click="onReset">Reset</button>
   </form>
 </template>
@@ -99,10 +139,14 @@ async function onSubmit() {
 - `required?: boolean` (default: `true`)
 - `messageScope?: "field" | "fieldset"` (default: `"fieldset"`)
 - `showAddress2?: boolean` (default: `true`)
-- `address1Placeholder?: string` (default: `"Enter street address"`)
-- `address2Placeholder?: string` (default: `"Enter address line 2 (Optional)"`)
-- `cityPlaceholder?: string` (default: `"Enter city"`)
-- `zipPlaceholder?: string` (default: `"00000-0000"`)
+- `messages?: USAddressMessages` (optional)
+
+`messages.placeholder` can customize field placeholders:
+
+- `messages.placeholder.address1?: string` (default: `"Address Line 1"`)
+- `messages.placeholder.address2?: string` (default: `"Address Line 2"`)
+- `messages.placeholder.city?: string` (default: `"City"`)
+- `messages.placeholder.zip?: string` (default: `"00000-0000"`)
 
 When `showAddress2` is enabled, the component appends `" (Optional)"` to the
 Address Line 2 placeholder only in `fieldset` scope while `required` is `true`.
@@ -124,9 +168,99 @@ When `required` is `false`, the address follows a complete-or-empty rule:
 - fully complete address is valid
 - partial address is invalid (including missing ZIP when Address 1/City/State
   are entered, or ZIP length that is not 5 or 9)
+- Address 2 counts as address input for detecting a partial address, but is not
+  required for the address to be complete
+
+Optional partial-address feedback is delayed until the user leaves the fieldset
+after the latest address edit, or until a failed submit attempt. Once active,
+the component shows the partial-address message and applies validation styling
+to the incomplete/invalid fields. The delayed feedback still respects
+`messageScope` placement.
+
+## Message Customization (`USAddressMessages`)
+
+`USAddressMessages` lets you override placeholders and user-facing messages.
+Any key you omit falls back to component defaults.
 
-Optional partial-address feedback is shown after fieldset blur or failed submit
-attempt, and still respects `messageScope` placement.
+```ts
+type USAddressMessages = {
+  placeholder?: {
+    address1?: string;
+    address2?: string;
+    city?: string;
+    zip?: string;
+  };
+  fieldset?: {
+    error?: {
+      required?: string;
+      zip?: string;
+    };
+    hint?: {
+      address?: string;
+    };
+  };
+  field?: {
+    error?: {
+      address1?: string;
+      address2?: string;
+      city?: string;
+      state?: string;
+      zip?: string;
+    };
+    hint?: {
+      address1?: string;
+      address2?: string;
+      city?: string;
+      state?: string;
+      zip?: string;
+    };
+  };
+};
+```
+
+Example - override placeholders, field messages, and fieldset summary content:
+
+```ts
+const addressMessages: USAddressMessages = {
+  placeholder: {
+    address1: "Street address",
+    address2: "Apartment, suite, etc.",
+    city: "City / Town",
+    zip: "ZIP",
+  },
+  field: {
+    error: {
+      address1: "Address line 1 is required.",
+      city: "City is required.",
+      state: "State is required.",
+      zip: "ZIP must contain 5 or 9 digits.",
+    },
+    hint: {
+      address1: "Include street number and street name.",
+      address2: "Optional apartment, unit, or suite.",
+      zip: "Use 5 digits or ZIP+4.",
+    },
+  },
+  fieldset: {
+    error: {
+      required: "Complete required address fields.",
+      zip: "Provide a valid ZIP code.",
+    },
+    hint: {
+      address: "Enter your full mailing address.",
+    },
+  },
+};
+```
+
+```vue
+<USAddress
+  id="shipping-address"
+  :address="shippingAddress"
+  :required="isShippingAddressRequired"
+  :messages="addressMessages"
+/>
+```
 
 When using `required`, pass the same required source to both `USAddress` and
 `useUSAddress` so submit behavior and rendering stay aligned.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@featherk/ui",
-  "version": "0.9.6",
+  "version": "0.9.8",
   "main": "dist/featherk-ui.umd.js",
   "module": "dist/featherk-ui.es.js",
   "types": "dist/index.d.ts",