vue-uswds
Version:
Vue 3 implementation of the USWDS (U.S. Web Design System) component library
1,730 lines (1,729 loc) • 339 kB
JavaScript
import { getCurrentInstance as vn, createBlock as K, openBlock as d, resolveDynamicComponent as Ee, withCtx as H, renderSlot as $, createElementBlock as b, mergeProps as pe, withKeys as ce, withModifiers as ue, ref as Y, reactive as zt, toRef as de, watch as re, provide as le, computed as g, normalizeClass as _, inject as z, onBeforeUnmount as je, Fragment as W, createVNode as ge, createElementVNode as w, unref as u, createTextVNode as E, toDisplayString as B, createCommentVNode as R, readonly as xe, useSlots as Ie, renderList as fe, getCurrentScope as Ns, onScopeDispose as mn, watchEffect as Us, onMounted as Ye, withDirectives as De, vModelCheckbox as Bs, nextTick as Ce, isRef as Es, vModelText as Wt, vShow as At, useAttrs as pn, vModelDynamic as za, vModelSelect as Rs, defineComponent as Ps, h as Aa, shallowRef as Be, toRaw as Fs, normalizeStyle as La, Teleport as gn, createSlots as Oa, vModelRadio as Vs, resolveComponent as qs, createStaticVNode as js } from "vue";
const Ys = "1.14.0";
var Hs = Gs, zs = /[\s\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,\-.\/:;<=>?@\[\]^_`{|}~]+/, Ws = /[A-ZÀ-Ý\u00C0-\u00D6\u00D9-\u00DD][a-zà-ÿ]/g, Ks = /[A-ZÀ-Ý\u00C0-\u00D6\u00D9-\u00DD]+/g;
function Gs(e) {
return e = e.replace(Ws, function(t) {
return " " + (t[0].toLowerCase() || t[0]) + t[1];
}), e = e.replace(Ks, function(t) {
return " " + t.toLowerCase();
}), e.trim().split(zs).join("-").replace(/^-/, "").replace(/-\s*$/, "");
}
var Xs = Zs;
function Zs(e, t) {
if (!Array.isArray(e))
throw new Error("expected an array for the first argument");
if (t != null && typeof t != "number")
throw new Error("expected a number or null/undefined for the second argument");
t = t ?? e.length;
for (var a = e.length, n = [], s = 0; s < a; s += t)
n.push(e.slice(s, s + t));
return n;
}
const Rt = (e, t) => Object.prototype.hasOwnProperty.call(e, t), mt = (e) => Hs(e), ga = (e) => e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), Ma = (e, t) => Xs(e, t), Qe = ":", Te = "grid-", Js = "u-", It = "/assets/img", Kt = "/assets/img/sprite.svg", Ia = null, Ta = "64em", hn = "30em", Qs = "0000-01-01", er = "9999-12-31", tr = /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/, ar = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/, nr = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
], sr = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
], rr = [
"S",
"M",
"T",
"W",
"Th",
"Fr",
"S"
], ft = 12, bn = "vuswds-id-", oa = {};
function we(e = "") {
var s, r, l;
const t = vn(), a = (l = (r = (s = t == null ? void 0 : t.appContext) == null ? void 0 : s.config) == null ? void 0 : r.globalProperties) == null ? void 0 : l.$route, n = a != null && a.path && mt(a.path) ? mt(a.path) : "global";
return oa[n] || (oa[n] = 0), `${bn}${n}-${mt(e)}-${++oa[n]}`;
}
const lr = {
install: (e, t) => {
const n = {
prefixSeparator: Qe,
gridNamespace: Te,
utilityNamespace: Js,
imagePath: It,
svgSpritePath: Kt,
routerComponentName: Ia,
mobileMenuBreakpoint: Ta,
footerNavBigBreakpoint: hn,
...t ?? {},
version: Ys
};
e.config.globalProperties.$vueUswds || (e.config.globalProperties.$vueUswds = n), e.provide("vueUswds.prefixSeparator", n.prefixSeparator), e.provide("vueUswds.gridNamespace", n.gridNamespace), e.provide("vueUswds.utilityNamespace", n.utilityNamespace), e.provide("vueUswds.imagePath", n.imagePath), e.provide("vueUswds.svgSpritePath", n.svgSpritePath), e.provide(
"vueUswds.routerComponentName",
n.routerComponentName
), e.provide(
"vueUswds.mobileMenuBreakpoint",
n.mobileMenuBreakpoint
), e.provide(
"vueUswds.footerNavBigBreakpoint",
n.footerNavBigBreakpoint
), e.provide("vueUswds.version", n.version), e.provide("nextId", we);
}
}, Ae = {
__name: "BaseHeading",
props: {
tag: {
type: String,
default: "h2",
validator(e) {
const t = ["h1", "h2", "h3", "h4", "h5", "h6"].includes(e);
return t || console.warn(`'${e}' is not a valid HTML heading element`), t;
}
}
},
setup(e) {
return (t, a) => (d(), K(Ee(e.tag), null, {
default: H(() => [
$(t.$slots, "default")
]),
_: 3
}));
}
}, $t = (e, t) => {
const a = e.__vccOpts || e;
for (const [n, s] of t)
a[n] = s;
return a;
}, or = {
name: "BaseLink",
inject: {
globalRouterComponentName: {
from: "vueUswds.routerComponentName",
default: Ia
}
},
inheritAttrs: !1,
props: {
href: {
type: String,
default: ""
},
to: {
type: [String, Object],
default: ""
},
routerComponentName: {
type: [String, Object],
default: ""
}
},
data() {
return {
// Router link checks here instead of computed to avoid Vue warning
// about $nuxt and $router not being defined on the instance when they
// are not installed.
isNuxt: this == null ? void 0 : this.$nuxt,
isVueRouter: this == null ? void 0 : this.$router
};
},
computed: {
isHrefLink() {
return !!this.href || typeof this.to == "string" && this.to.startsWith("http");
},
linkComponent() {
return this.routerComponentName ? this.routerComponentName : this.globalRouterComponentName ? this.globalRouterComponentName : this.isNuxt ? "nuxt-link" : this.isVueRouter ? "router-link" : "a";
}
},
methods: {
handleSpaceKeydown(e) {
var t, a;
(a = (t = this.$attrs) == null ? void 0 : t.class) != null && a.includes("usa-button") && e.target.click();
}
}
}, ir = ["href"];
function ur(e, t, a, n, s, r) {
return r.isHrefLink ? (d(), b("a", pe({ key: 0 }, e.$attrs, {
href: a.href || a.to,
onKeydown: t[0] || (t[0] = ce(ue((...l) => r.handleSpaceKeydown && r.handleSpaceKeydown(...l), ["prevent"]), ["space"]))
}), [
$(e.$slots, "default")
], 16, ir)) : (d(), K(Ee(r.linkComponent), pe({ key: 1 }, e.$attrs, {
to: a.to,
onKeydown: ce(ue(r.handleSpaceKeydown, ["prevent"]), ["space"])
}), {
default: H(() => [
$(e.$slots, "default")
]),
_: 3
}, 16, ["to", "onKeydown"]));
}
const ke = /* @__PURE__ */ $t(or, [["render", ur]]);
function Na(e, t = !1) {
const a = Y(t), n = zt(e), s = (f, p) => {
if (n[f] === void 0 && (n[f] = p), !a.value)
for (const v in n)
v !== f && p && (n[v] = !1);
}, r = (f) => {
delete n[f];
}, l = (f) => {
n[f] = !1;
}, o = (f) => {
if (n[f] = !0, !a.value)
for (const p in n)
p !== f && l(p);
};
return {
registerAccordionItem: s,
unregisterAccordionItem: r,
openItem: o,
closeItem: l,
toggleItem: (f) => {
n[f] ? l(f) : o(f);
},
closeAllItems: () => {
for (const f in n)
l(f);
}
};
}
const cr = ["aria-multiselectable"], dr = {
__name: "UsaAccordion",
props: {
bordered: {
type: Boolean,
default: !1
},
multiselectable: {
type: Boolean,
default: !1
},
headingTag: {
type: String,
default: "h2"
}
},
emits: ["update:accordionItems"],
setup(e, { expose: t, emit: a }) {
const n = a, s = e, r = zt({}), l = de(s, "multiselectable"), {
registerAccordionItem: o,
unregisterAccordionItem: c,
openItem: i,
closeItem: f,
toggleItem: p
} = Na(r, l);
re(r, () => {
n("update:accordionItems", r);
}), le(
"accordionHeadingTag",
g(() => s.headingTag)
), le("registerAccordionItem", o), le("unregisterAccordionItem", c), le("toggleItem", p), le("accordionItems", r);
const v = g(() => [{ "usa-accordion--bordered": s.bordered }]);
return t({
openItem: i,
closeItem: f,
toggleItem: p
}), (m, h) => (d(), b("div", {
class: _(["usa-accordion", v.value]),
"aria-multiselectable": l.value || null
}, [
$(m.$slots, "default")
], 10, cr));
}
}, fr = ["aria-expanded", "aria-controls"], vr = ["id", "hidden"], mr = {
__name: "UsaAccordionItem",
props: {
id: {
type: String,
default: ""
},
label: {
type: String,
default: ""
},
open: {
type: Boolean,
default: !1
},
customClasses: {
type: Object,
default: () => ({
heading: [],
button: [],
content: []
})
}
},
setup(e) {
const t = z("accordionHeadingTag"), a = z("registerAccordionItem"), n = z("unregisterAccordionItem"), s = z("toggleItem"), r = z("accordionItems"), l = e, o = g(() => l.id || we("usa-accordion-item")), c = de(r, o.value);
return a(o.value, l.open), je(() => {
n(o.value);
}), (i, f) => {
var p, v;
return d(), b(W, null, [
ge(u(Ae), pe(i.$attrs, {
class: ["usa-accordion__heading", (p = e.customClasses) == null ? void 0 : p.heading],
tag: u(t)
}), {
default: H(() => {
var m;
return [
w("button", {
type: "button",
class: _(["usa-accordion__button", (m = e.customClasses) == null ? void 0 : m.button]),
"aria-expanded": c.value,
"aria-controls": o.value,
onClick: f[0] || (f[0] = (h) => u(s)(o.value))
}, [
$(i.$slots, "label", {}, () => [
E(B(e.label), 1)
])
], 10, fr)
];
}),
_: 3
}, 16, ["class", "tag"]),
w("div", {
id: o.value,
class: _(["usa-accordion__content", (v = e.customClasses) == null ? void 0 : v.content]),
hidden: !c.value
}, [
$(i.$slots, "default")
], 10, vr)
], 64);
};
}
}, pr = ["role"], gr = { class: "usa-alert__text" }, Ua = {
__name: "UsaAlert",
props: {
variant: {
type: String,
default: "",
validator(e) {
const t = [
"",
"info",
"warning",
"error",
"success",
"emergency",
"validation"
].includes(e);
return t || console.warn(`'${e}' is not a valid alert variant`), t;
}
},
slim: {
type: Boolean,
default: !1
},
noIcon: {
type: Boolean,
default: !1
},
role: {
type: String,
default: ""
},
heading: {
type: String,
default: ""
},
headingTag: {
type: String,
default: "h2"
},
customClasses: {
type: Object,
default: () => ({
body: [],
heading: []
})
}
},
setup(e) {
const t = e, a = g(() => ({
"usa-alert--no-icon": t.noIcon,
"usa-alert--slim": t.slim,
"usa-alert--info": t.variant === "info" || t.variant === "validation",
"usa-alert--warning": t.variant === "warning",
"usa-alert--error": t.variant === "error",
"usa-alert--success": t.variant === "success",
"usa-alert--emergency": t.variant === "emergency",
"usa-alert--validation": t.variant === "validation"
})), n = g(() => t.role ? t.role : !t.role && t.variant === "error" ? "alert" : null);
return (s, r) => {
var l, o;
return d(), b("div", {
class: _(["usa-alert", a.value]),
role: n.value
}, [
w("div", {
class: _(["usa-alert__body", (l = e.customClasses) == null ? void 0 : l.body])
}, [
e.heading || s.$slots.heading ? (d(), K(u(Ae), {
key: 0,
tag: e.headingTag,
class: _(["usa-alert__heading", [{ "usa-sr-only": e.slim }, (o = e.customClasses) == null ? void 0 : o.heading]])
}, {
default: H(() => [
$(s.$slots, "heading", {}, () => [
E(B(e.heading), 1)
])
]),
_: 3
}, 8, ["tag", "class"])) : R("", !0),
$(s.$slots, "message", {}, () => [
w("p", gr, [
$(s.$slots, "default")
])
])
], 2)
], 10, pr);
};
}
};
function yn(e, t = "", a = !1, n) {
const s = Y(a), r = g(() => e || we(t)), l = () => {
s.value = !1, n && n("update:open", s.value);
}, o = () => {
s.value = !0, n && n("update:open", s.value);
}, c = () => {
s.value ? l() : o();
};
return re(s, (i) => {
s.value !== i && c();
}), {
isOpen: xe(s),
toggleId: xe(r),
closeContent: l,
openContent: o,
toggleContent: c
};
}
const hr = ["src"], br = { class: "usa-media-block__body" }, yr = { key: 2 }, $r = ["src"], Sr = { class: "usa-media-block__body" }, wr = { key: 2 }, $n = {
__name: "UsaBannerContent",
setup(e) {
const t = Ie();
t != null && t.tldIcon && console.warn("The 'tldIcon' slot is deprecated, use 'tld-icon' instead."), t != null && t.tldDescription && console.warn(
"The 'tldDescription' slot is deprecated, use 'tld-description' instead."
), t != null && t.httpsIcon && console.warn("The 'httpsIcon' slot is deprecated, use 'https-icon' instead."), t != null && t.httpsDescription && console.warn(
"The 'httpsDescription' slot is deprecated, use 'https-description' instead."
);
const a = z("vueUswds.prefixSeparator", Qe), n = z("vueUswds.gridNamespace", Te), s = z("vueUswds.imagePath", It);
return (r, l) => (d(), b("div", {
class: _(`${u(n)}row ${u(n)}gap-lg`)
}, [
w("div", {
class: _(`usa-banner__guidance tablet${u(a)}${u(n)}col-6`)
}, [
r.$slots["tld-icon"] ? $(r.$slots, "tld-icon", { key: 0 }) : r.$slots.tldIcon ? $(r.$slots, "tldIcon", { key: 1 }) : (d(), b("img", {
key: 2,
class: "usa-banner__icon usa-media-block__img",
src: `${u(s)}/icon-dot-gov.svg`,
role: "img",
alt: "",
"aria-hidden": "true"
}, null, 8, hr)),
w("div", br, [
r.$slots["tld-description"] ? $(r.$slots, "tld-description", { key: 0 }) : r.$slots.tldDescription ? $(r.$slots, "tldDescription", { key: 1 }) : (d(), b("p", yr, l[0] || (l[0] = [
w("strong", null, "Official websites use .gov", -1),
w("br", null, null, -1),
E(" A "),
w("strong", null, ".gov", -1),
E(" website belongs to an official government organization in the United States. ")
])))
])
], 2),
w("div", {
class: _(`usa-banner__guidance tablet${u(a)}${u(n)}col-6`)
}, [
r.$slots["https-icon"] ? $(r.$slots, "https-icon", { key: 0 }) : r.$slots.httpsIcon ? $(r.$slots, "httpsIcon", { key: 1 }) : (d(), b("img", {
key: 2,
class: "usa-banner__icon usa-media-block__img",
src: `${u(s)}/icon-https.svg`,
role: "img",
alt: "",
"aria-hidden": "true"
}, null, 8, $r)),
w("div", Sr, [
r.$slots["https-description"] ? $(r.$slots, "https-description", { key: 0 }) : r.$slots.httpsDescription ? $(r.$slots, "httpsDescription", { key: 1 }) : (d(), b("p", wr, l[1] || (l[1] = [
w("strong", null, "Secure .gov websites use HTTPS", -1),
w("br", null, null, -1),
E(" A "),
w("strong", null, "lock", -1),
E(" ( "),
w("span", { class: "icon-lock" }, [
w("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "52",
height: "64",
viewBox: "0 0 52 64",
class: "usa-banner__lock-image",
role: "img",
"aria-labelledby": "banner-lock-description",
focusable: "false"
}, [
w("title", { id: "banner-lock-title" }, "Lock"),
w("desc", { id: "banner-lock-description" }, "Locked padlock icon"),
w("path", {
fill: "#000000",
"fill-rule": "evenodd",
d: "M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
})
])
], -1),
E(" ) or "),
w("strong", null, "https://", -1),
E(" means you've safely connected to the .gov website. Share sensitive information only on official, secure websites. ")
])))
])
], 2)
], 2));
}
}, kr = ["aria-label"], Cr = ["src"], _r = { class: "usa-banner__header-text" }, xr = { class: "usa-banner__header-action" }, Dr = ["aria-expanded", "aria-controls"], Ar = { class: "usa-banner__button-text" }, Lr = ["id", "hidden"], Or = {
__name: "UsaBanner",
props: {
open: {
type: Boolean,
default: !1
},
id: {
type: String,
default: ""
},
ariaLabel: {
type: String,
default: "Official website of the United States government"
},
headerText: {
type: String,
default: "An official website of the United States government"
},
actionText: {
type: String,
default: "Here's how you know"
},
customClasses: {
type: Object,
default: () => ({
accordion: [],
bannerHeader: [],
bannerInner: [],
button: [],
bannerContent: []
})
}
},
emits: ["update:open"],
setup(e, { expose: t, emit: a }) {
const n = z("vueUswds.prefixSeparator", Qe), s = z("vueUswds.gridNamespace", Te), r = z("vueUswds.imagePath", It), l = a, o = e, { isOpen: c, toggleId: i, openContent: f, closeContent: p, toggleContent: v } = yn(o.id, "usa-banner", o.open, l), m = g(() => {
var h;
return [
{ "usa-banner__header--expanded": c.value },
...((h = o.customClasses) == null ? void 0 : h.bannerHeader) || []
];
});
return t({
openContent: f,
closeContent: p,
toggleContent: v
}), (h, k) => {
var y, S, C, M;
return d(), b("section", {
class: "usa-banner",
"aria-label": e.ariaLabel
}, [
w("div", {
class: _(["usa-accordion", (y = e.customClasses) == null ? void 0 : y.accordion])
}, [
w("header", {
class: _(["usa-banner__header", m.value])
}, [
w("div", {
class: _(["usa-banner__inner", (S = e.customClasses) == null ? void 0 : S.bannerInner])
}, [
w("div", {
class: _(`${u(s)}col-auto`)
}, [
$(h.$slots, "flag", {}, () => [
w("img", {
"aria-hidden": "true",
class: "usa-banner__header-flag",
src: `${u(r)}/us_flag_small.png`,
alt: ""
}, null, 8, Cr)
])
], 2),
w("div", {
"aria-hidden": "true",
class: _(`${u(s)}col-fill tablet${u(n)}${u(s)}col-auto`)
}, [
w("p", _r, B(e.headerText), 1),
w("p", xr, B(e.actionText), 1)
], 2),
w("button", {
type: "button",
class: _(["usa-accordion__button usa-banner__button", (C = e.customClasses) == null ? void 0 : C.button]),
"aria-expanded": u(c),
"aria-controls": u(i),
onClick: k[0] || (k[0] = (U) => u(v)())
}, [
$(h.$slots, "button", {
isOpen: u(c),
actionText: e.actionText
}, () => [
w("span", Ar, B(e.actionText), 1)
])
], 10, Dr)
], 2)
], 2),
w("div", {
id: u(i),
hidden: !u(c),
class: _(["usa-banner__content usa-accordion__content", (M = e.customClasses) == null ? void 0 : M.bannerContent])
}, [
$(h.$slots, "default", {}, () => [
ge(u($n))
])
], 10, Lr)
], 2)
], 8, kr);
};
}
}, Mr = ["aria-current"], Sn = {
__name: "UsaBreadcrumbItem",
props: {
href: {
type: String,
default: ""
},
to: {
type: [String, Object],
default: ""
},
routerComponentName: {
type: [String, Object],
default: ""
},
current: {
type: Boolean,
default: !1
},
customClasses: {
type: Object,
default: () => ({
link: [],
span: []
})
}
},
setup(e) {
const t = e, a = g(() => t.current ? "page" : null);
return (n, s) => {
var r, l;
return d(), b("li", {
class: "usa-breadcrumb__list-item",
"aria-current": a.value
}, [
e.current ? (d(), b("span", {
key: 0,
class: _((r = e.customClasses) == null ? void 0 : r.span)
}, [
$(n.$slots, "default")
], 2)) : (d(), K(u(ke), {
key: 1,
href: e.href,
to: e.to,
"router-component-name": e.routerComponentName,
class: _(["usa-breadcrumb__link", (l = e.customClasses) == null ? void 0 : l.link])
}, {
default: H(() => {
var o;
return [
w("span", {
class: _((o = e.customClasses) == null ? void 0 : o.span)
}, [
$(n.$slots, "default")
], 2)
];
}),
_: 3
}, 8, ["href", "to", "router-component-name", "class"]))
], 8, Mr);
};
}
}, Ir = ["aria-label"], Tr = {
__name: "UsaBreadcrumb",
props: {
items: {
type: Array,
default: () => []
},
wrap: {
type: Boolean,
default: !1
},
ariaLabel: {
type: String,
default: "Breadcrumbs"
},
customClasses: {
type: Object,
default: () => ({
list: [],
item: [],
link: [],
span: []
})
}
},
setup(e) {
const t = e, a = g(() => [
{
"usa-breadcrumb--wrap": t.wrap
}
]), n = g(() => t.items.some((r) => r == null ? void 0 : r.current)), s = g(() => {
if (!t.items.length)
return [];
if (n.value)
return t.items;
const r = [...t.items];
return r[r.length - 1].current = !0, r;
});
return (r, l) => {
var o;
return d(), b("nav", {
class: _(["usa-breadcrumb", a.value]),
"aria-label": e.ariaLabel
}, [
w("ol", {
class: _(["usa-breadcrumb__list", (o = e.customClasses) == null ? void 0 : o.list])
}, [
$(r.$slots, "default", { items: s.value }, () => [
(d(!0), b(W, null, fe(s.value, (c) => {
var i, f, p;
return d(), K(u(Sn), {
key: (c == null ? void 0 : c.id) || c.text,
class: _((i = e.customClasses) == null ? void 0 : i.item),
to: c.to,
href: c.href,
"router-component-name": c.routerComponentName,
current: c.current,
"custom-classes": {
link: (f = e.customClasses) == null ? void 0 : f.link,
span: (p = e.customClasses) == null ? void 0 : p.span
}
}, {
default: H(() => [
E(B(c.text), 1)
]),
_: 2
}, 1032, ["class", "to", "href", "router-component-name", "current", "custom-classes"]);
}), 128))
])
], 2)
], 10, Ir);
};
}
}, Nr = ["type", "disabled"], Ct = {
__name: "UsaButton",
props: {
variant: {
type: String,
default: "",
validator(e) {
return [
"",
"secondary",
"accent-cool",
"accent-warm",
"base",
"outline",
"inverse",
"unstyled"
].includes(e);
}
},
size: {
type: String,
default: "",
validator(e) {
return ["", "big"].includes(e);
}
},
type: {
type: String,
default: "button",
validator(e) {
return ["button", "submit", "reset"].includes(e);
}
},
disabled: {
type: Boolean,
default: !1
}
},
setup(e) {
const t = e, a = g(() => [
{
"usa-button--secondary": t.variant === "secondary",
"usa-button--accent-cool": t.variant === "accent-cool",
"usa-button--accent-warm": t.variant === "accent-warm",
"usa-button--base": t.variant === "base",
"usa-button--outline": t.variant === "outline" || t.variant === "inverse",
"usa-button--inverse": t.variant === "inverse",
"usa-button--unstyled": t.variant === "unstyled",
"usa-button--big": t.size === "big"
}
]);
return (n, s) => (d(), b("button", pe(n.$attrs, {
class: ["usa-button", a.value],
type: e.type,
disabled: e.disabled
}), [
$(n.$slots, "before"),
$(n.$slots, "default"),
$(n.$slots, "after")
], 16, Nr));
}
}, Ur = {
__name: "UsaButtonGroup",
props: {
segmented: {
type: Boolean,
default: !1
}
},
setup(e) {
const t = e, a = g(() => [
{ "usa-button-group--segmented": t.segmented }
]);
return (n, s) => (d(), b("ul", {
class: _(["usa-button-group", a.value])
}, [
$(n.$slots, "default")
], 2));
}
}, Br = {}, Er = { class: "usa-button-group__item" };
function Rr(e, t) {
return d(), b("li", Er, [
$(e.$slots, "default")
]);
}
const Pr = /* @__PURE__ */ $t(Br, [["render", Rr]]), Fr = {
__name: "UsaCard",
props: {
cardTag: {
type: String,
default: "div"
},
heading: {
type: String,
default: ""
},
headingTag: {
type: String,
default: "h2"
},
flag: {
type: Boolean,
default: !1
},
headerFirst: {
type: Boolean,
default: !1
},
insetMedia: {
type: Boolean,
default: !1
},
mediaPosition: {
type: String,
default: "left",
validator(e) {
return ["left", "right"].includes(e);
}
},
headerExdent: {
type: Boolean,
default: !1
},
mediaExdent: {
type: Boolean,
default: !1
},
bodyExdent: {
type: Boolean,
default: !1
},
footerExdent: {
type: Boolean,
default: !1
},
customClasses: {
type: Object,
default: () => ({
container: [],
header: [],
heading: [],
media: [],
img: [],
body: [],
footer: []
})
}
},
setup(e) {
const t = e, a = g(() => [
{
"usa-card--header-first": t.headerFirst,
"usa-card--flag": t.flag,
"usa-card--media-right": t.mediaPosition === "right"
}
]), n = g(() => {
var o;
return [
{ "usa-card__header--exdent": t.headerExdent },
...((o = t.customClasses) == null ? void 0 : o.header) || []
];
}), s = g(() => {
var o;
return [
{
"usa-card__media--inset": t.insetMedia,
"usa-card__media--exdent": t.mediaExdent
},
...((o = t.customClasses) == null ? void 0 : o.media) || []
];
}), r = g(() => {
var o;
return [
{ "usa-card__body--exdent": t.bodyExdent },
...((o = t.customClasses) == null ? void 0 : o.body) || []
];
}), l = g(() => {
var o;
return [
{ "usa-card__footer--exdent": t.footerExdent },
...((o = t.customClasses) == null ? void 0 : o.footer) || []
];
});
return (o, c) => (d(), K(Ee(e.cardTag), {
class: _(["usa-card", a.value])
}, {
default: H(() => {
var i, f, p;
return [
w("div", {
class: _(["usa-card__container", (i = e.customClasses) == null ? void 0 : i.container])
}, [
e.heading || o.$slots.heading ? (d(), b("header", {
key: 0,
class: _(["usa-card__header", n.value])
}, [
ge(u(Ae), {
tag: e.headingTag,
class: _(["usa-card__heading", (f = e.customClasses) == null ? void 0 : f.heading])
}, {
default: H(() => [
$(o.$slots, "heading", {}, () => [
E(B(e.heading), 1)
])
]),
_: 3
}, 8, ["tag", "class"])
], 2)) : R("", !0),
o.$slots.media ? (d(), b("div", {
key: 1,
class: _(["usa-card__media", s.value])
}, [
w("div", {
class: _(["usa-card__img", (p = e.customClasses) == null ? void 0 : p.img])
}, [
$(o.$slots, "media")
], 2)
], 2)) : R("", !0),
o.$slots.default ? (d(), b("div", {
key: 2,
class: _(["usa-card__body", r.value])
}, [
$(o.$slots, "default")
], 2)) : R("", !0),
o.$slots.footer ? (d(), b("div", {
key: 3,
class: _(["usa-card__footer", l.value])
}, [
$(o.$slots, "footer")
], 2)) : R("", !0)
], 2)
];
}),
_: 3
}, 8, ["class"]));
}
};
function Tt(e) {
return Ns() ? (mn(e), !0) : !1;
}
function Xe(e) {
return typeof e == "function" ? e() : u(e);
}
const wn = typeof window < "u" && typeof document < "u";
typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
const kn = (e) => e != null, Vr = Object.prototype.toString, qr = (e) => Vr.call(e) === "[object Object]", ze = () => {
}, jr = /* @__PURE__ */ Yr();
function Yr() {
var e, t;
return wn && ((e = window == null ? void 0 : window.navigator) == null ? void 0 : e.userAgent) && (/iP(?:ad|hone|od)/.test(window.navigator.userAgent) || ((t = window == null ? void 0 : window.navigator) == null ? void 0 : t.maxTouchPoints) > 2 && /iPad|Macintosh/.test(window == null ? void 0 : window.navigator.userAgent));
}
function Cn(e, t) {
function a(...n) {
return new Promise((s, r) => {
Promise.resolve(e(() => t.apply(this, n), { fn: t, thisArg: this, args: n })).then(s).catch(r);
});
}
return a;
}
const Hr = (e) => e();
function _n(e, t = {}) {
let a, n, s = ze;
const r = (o) => {
clearTimeout(o), s(), s = ze;
};
return (o) => {
const c = Xe(e), i = Xe(t.maxWait);
return a && r(a), c <= 0 || i !== void 0 && i <= 0 ? (n && (r(n), n = null), Promise.resolve(o())) : new Promise((f, p) => {
s = t.rejectOnCancel ? p : f, i && !n && (n = setTimeout(() => {
a && r(a), n = null, f(o());
}, i)), a = setTimeout(() => {
n && r(n), n = null, f(o());
}, c);
});
};
}
function zr(e, t = 200, a = {}) {
return Cn(
_n(t, a),
e
);
}
function Wr(e, t = 200, a = {}) {
const n = Y(e.value), s = zr(() => {
n.value = e.value;
}, t, a);
return re(e, () => s()), n;
}
function Kr(e, t, a = {}) {
const {
eventFilter: n = Hr,
...s
} = a;
return re(
e,
Cn(
n,
t
),
s
);
}
function Gr(e, t, a = {}) {
const {
debounce: n = 0,
maxWait: s = void 0,
...r
} = a;
return Kr(
e,
t,
{
...r,
eventFilter: _n(n, { maxWait: s })
}
);
}
function Ne(e) {
var t;
const a = Xe(e);
return (t = a == null ? void 0 : a.$el) != null ? t : a;
}
const lt = wn ? window : void 0;
function Ge(...e) {
let t, a, n, s;
if (typeof e[0] == "string" || Array.isArray(e[0]) ? ([a, n, s] = e, t = lt) : [t, a, n, s] = e, !t)
return ze;
Array.isArray(a) || (a = [a]), Array.isArray(n) || (n = [n]);
const r = [], l = () => {
r.forEach((f) => f()), r.length = 0;
}, o = (f, p, v, m) => (f.addEventListener(p, v, m), () => f.removeEventListener(p, v, m)), c = re(
() => [Ne(t), Xe(s)],
([f, p]) => {
if (l(), !f)
return;
const v = qr(p) ? { ...p } : p;
r.push(
...a.flatMap((m) => n.map((h) => o(f, m, h, v)))
);
},
{ immediate: !0, flush: "post" }
), i = () => {
c(), l();
};
return Tt(i), i;
}
let Wa = !1;
function St(e, t, a = {}) {
const { window: n = lt, ignore: s = [], capture: r = !0, detectIframe: l = !1 } = a;
if (!n)
return ze;
jr && !Wa && (Wa = !0, Array.from(n.document.body.children).forEach((v) => v.addEventListener("click", ze)), n.document.documentElement.addEventListener("click", ze));
let o = !0;
const c = (v) => s.some((m) => {
if (typeof m == "string")
return Array.from(n.document.querySelectorAll(m)).some((h) => h === v.target || v.composedPath().includes(h));
{
const h = Ne(m);
return h && (v.target === h || v.composedPath().includes(h));
}
}), f = [
Ge(n, "click", (v) => {
const m = Ne(e);
if (!(!m || m === v.target || v.composedPath().includes(m))) {
if (v.detail === 0 && (o = !c(v)), !o) {
o = !0;
return;
}
t(v);
}
}, { passive: !0, capture: r }),
Ge(n, "pointerdown", (v) => {
const m = Ne(e);
o = !c(v) && !!(m && !v.composedPath().includes(m));
}, { passive: !0 }),
l && Ge(n, "blur", (v) => {
setTimeout(() => {
var m;
const h = Ne(e);
((m = n.document.activeElement) == null ? void 0 : m.tagName) === "IFRAME" && !(h != null && h.contains(n.document.activeElement)) && t(v);
}, 0);
})
].filter(Boolean);
return () => f.forEach((v) => v());
}
function Xr(e) {
return typeof e == "function" ? e : typeof e == "string" ? (t) => t.key === e : Array.isArray(e) ? (t) => e.includes(t.key) : () => !0;
}
function ot(...e) {
let t, a, n = {};
e.length === 3 ? (t = e[0], a = e[1], n = e[2]) : e.length === 2 ? typeof e[1] == "object" ? (t = !0, a = e[0], n = e[1]) : (t = e[0], a = e[1]) : (t = !0, a = e[0]);
const {
target: s = lt,
eventName: r = "keydown",
passive: l = !1,
dedupe: o = !1
} = n, c = Xr(t);
return Ge(s, r, (f) => {
f.repeat && Xe(o) || c(f) && a(f);
}, l);
}
function Zr() {
const e = Y(!1), t = vn();
return t && Ye(() => {
e.value = !0;
}, t), e;
}
function Ba(e) {
const t = Zr();
return g(() => (t.value, !!e()));
}
function xn(e, t, a = {}) {
const { window: n = lt, ...s } = a;
let r;
const l = Ba(() => n && "MutationObserver" in n), o = () => {
r && (r.disconnect(), r = void 0);
}, c = g(() => {
const v = Xe(e), m = (Array.isArray(v) ? v : [v]).map(Ne).filter(kn);
return new Set(m);
}), i = re(
() => c.value,
(v) => {
o(), l.value && v.size && (r = new MutationObserver(t), v.forEach((m) => r.observe(m, s)));
},
{ immediate: !0, flush: "post" }
), f = () => r == null ? void 0 : r.takeRecords(), p = () => {
o(), i();
};
return Tt(p), {
isSupported: l,
stop: p,
takeRecords: f
};
}
function Jr(e = {}) {
var t;
const {
window: a = lt,
deep: n = !0,
triggerOnRemoval: s = !1
} = e, r = (t = e.document) != null ? t : a == null ? void 0 : a.document, l = () => {
var i;
let f = r == null ? void 0 : r.activeElement;
if (n)
for (; f != null && f.shadowRoot; )
f = (i = f == null ? void 0 : f.shadowRoot) == null ? void 0 : i.activeElement;
return f;
}, o = Y(), c = () => {
o.value = l();
};
return a && (Ge(a, "blur", (i) => {
i.relatedTarget === null && c();
}, !0), Ge(a, "focus", c, !0)), s && xn(r, (i) => {
i.filter((f) => f.removedNodes.length).map((f) => Array.from(f.removedNodes)).flat().forEach((f) => {
f === o.value && c();
});
}, {
childList: !0,
subtree: !0
}), c(), o;
}
function Ea(e, t = {}) {
const { window: a = lt } = t, n = Ba(() => a && "matchMedia" in a && typeof a.matchMedia == "function");
let s;
const r = Y(!1), l = (i) => {
r.value = i.matches;
}, o = () => {
s && ("removeEventListener" in s ? s.removeEventListener("change", l) : s.removeListener(l));
}, c = Us(() => {
n.value && (o(), s = a.matchMedia(Xe(e)), "addEventListener" in s ? s.addEventListener("change", l) : s.addListener(l), r.value = s.matches);
});
return Tt(() => {
c(), o(), s = void 0;
}), r;
}
function Qr(e, t, a = {}) {
const {
root: n,
rootMargin: s = "0px",
threshold: r = 0.1,
window: l = lt,
immediate: o = !0
} = a, c = Ba(() => l && "IntersectionObserver" in l), i = g(() => {
const h = Xe(e);
return (Array.isArray(h) ? h : [h]).map(Ne).filter(kn);
});
let f = ze;
const p = Y(o), v = c.value ? re(
() => [i.value, Ne(n), p.value],
([h, k]) => {
if (f(), !p.value || !h.length)
return;
const y = new IntersectionObserver(
t,
{
root: Ne(k),
rootMargin: s,
threshold: r
}
);
h.forEach((S) => S && y.observe(S)), f = () => {
y.disconnect(), f = ze;
};
},
{ immediate: o, flush: "post" }
) : ze, m = () => {
f(), v(), p.value = !1;
};
return Tt(m), {
isSupported: c,
isActive: p,
pause() {
f(), p.value = !1;
},
resume() {
p.value = !0;
},
stop: m
};
}
function el(e, t = {}) {
const { initialValue: a = !1, focusVisible: n = !1, preventScroll: s = !1 } = t, r = Y(!1), l = g(() => Ne(e));
Ge(l, "focus", (c) => {
var i, f;
(!n || (f = (i = c.target).matches) != null && f.call(i, ":focus-visible")) && (r.value = !0);
}), Ge(l, "blur", () => r.value = !1);
const o = g({
get: () => r.value,
set(c) {
var i, f;
!c && r.value ? (i = l.value) == null || i.blur() : c && !r.value && ((f = l.value) == null || f.focus({ preventScroll: s }));
}
});
return re(
l,
() => {
o.value = a;
},
{ immediate: !0, flush: "post" }
), { focused: o };
}
const tl = { class: "usa-character-count" }, al = ["id"], nl = {
class: "usa-character-count__sr-status usa-sr-only",
"aria-live": "polite"
}, sl = {
__name: "UsaCharacterCount",
props: {
maxlength: {
type: Number,
required: !0,
validator(e) {
const t = e > 0;
return t || console.warn(`${e} is not a valid maxlength`), t;
}
},
id: {
type: String,
default: ""
}
},
setup(e) {
const t = e, a = Y(""), n = Y(""), s = Y(t.maxlength), r = g(
() => s.value < 0 ? s.value * -1 : 0
), l = g(() => s.value === t.maxlength ? "equal" : r.value > 0 ? "over" : "under"), o = g(() => t.id || we("usa-character-count")), c = g(() => [
{ "usa-character-count__message--invalid": l.value === "over" }
]), i = (f) => s.value = t.maxlength - `${f}`.length;
return Gr(
s,
() => {
var f;
n.value = (f = a.value) == null ? void 0 : f.textContent;
},
{ debounce: 1e3, immediate: !0 }
), le("updateCharacterCount", i), le(
"characterCountMaxlength",
g(() => t.maxlength)
), le(
"characterCountMessageId",
g(() => o.value)
), (f, p) => (d(), b("div", tl, [
$(f.$slots, "default"),
w("span", {
id: o.value,
class: "usa-character-count__message usa-sr-only"
}, [
$(f.$slots, "default-message", {}, () => [
E("You can enter up to " + B(e.maxlength) + " characters", 1)
])
], 8, al),
w("div", {
ref_key: "statusMessageRef",
ref: a,
class: _(["usa-character-count__status usa-hint", c.value]),
"aria-hidden": "true"
}, [
l.value === "equal" ? $(f.$slots, "equal-message", {
key: 0,
maxlength: e.maxlength
}, () => [
E(B(e.maxlength) + " character", 1),
e.maxlength !== 1 ? (d(), b(W, { key: 0 }, [
E("s")
], 64)) : R("", !0),
p[0] || (p[0] = E(" allowed"))
]) : l.value === "under" ? $(f.$slots, "remaining-message", {
key: 1,
charactersRemaining: s.value,
maxlength: e.maxlength
}, () => [
E(B(s.value) + " character", 1),
s.value !== 1 ? (d(), b(W, { key: 0 }, [
E("s")
], 64)) : R("", !0),
p[1] || (p[1] = E(" left"))
]) : l.value === "over" ? $(f.$slots, "over-message", {
key: 2,
charactersOver: r.value,
maxlength: e.maxlength
}, () => [
E(B(r.value) + " character", 1),
r.value !== 1 ? (d(), b(W, { key: 0 }, [
E("s")
], 64)) : R("", !0),
p[2] || (p[2] = E(" over limit"))
]) : R("", !0)
], 2),
w("div", nl, B(n.value), 1)
]));
}
}, rl = ["id"], ll = ["htmlFor"], ol = {
inheritAttrs: !1
}, il = /* @__PURE__ */ Object.assign(ol, {
__name: "UsaCheckbox",
props: {
tile: {
type: Boolean,
default: !1
},
modelValue: {
type: Boolean,
default: !1
},
label: {
type: String,
default: ""
},
description: {
type: String,
default: ""
},
id: {
type: String,
default: ""
},
customClasses: {
type: Object,
default: () => ({
component: [],
label: [],
description: []
})
}
},
emits: ["update:modelValue"],
setup(e, { emit: t }) {
const a = t, n = e, s = g(() => n.id || we("usa-checkbox")), r = g({
get() {
return n.modelValue;
},
set(o) {
a("update:modelValue", o);
}
}), l = g(() => [
{
"usa-checkbox__input--tile": n.tile
}
]);
return (o, c) => {
var i, f, p;
return d(), b("div", {
class: _(["usa-checkbox", (i = e.customClasses) == null ? void 0 : i.component])
}, [
De(w("input", pe(o.$attrs, {
id: s.value,
"onUpdate:modelValue": c[0] || (c[0] = (v) => r.value = v),
class: ["usa-checkbox__input", l.value],
type: "checkbox"
}), null, 16, rl), [
[Bs, r.value]
]),
w("label", {
class: _(["usa-checkbox__label", (f = e.customClasses) == null ? void 0 : f.label]),
htmlFor: s.value
}, [
$(o.$slots, "default", {}, () => [
E(B(e.label), 1)
]),
e.description || o.$slots.description ? (d(), b("span", {
key: 0,
class: _(["usa-checkbox__label-description", (p = e.customClasses) == null ? void 0 : p.description])
}, [
$(o.$slots, "description", {}, () => [
E(B(e.description), 1)
])
], 2)) : R("", !0)
], 10, ll)
], 2);
};
}
}), ul = ["aria-label"], Dn = {
__name: "UsaChecklistItem",
props: {
checked: {
type: Boolean,
default: !1
},
ariaLabel: {
type: String,
default: ""
}
},
setup(e) {
const t = e, a = g(() => [
{ "usa-checklist__item--checked": t.checked }
]);
return (n, s) => (d(), b("li", {
class: _(["usa-checklist__item", a.value]),
"aria-label": e.ariaLabel
}, [
$(n.$slots, "default")
], 10, ul));
}
}, cl = { class: "usa-checklist" }, An = {
__name: "UsaChecklist",
props: {
items: {
type: Array,
default: () => []
}
},
setup(e) {
return (t, a) => (d(), b("ul", cl, [
$(t.$slots, "default", {}, () => [
(d(!0), b(W, null, fe(e.items, (n) => (d(), K(u(Dn), {
key: (n == null ? void 0 : n.id) || n.text,
checked: n.checked,
"aria-label": n.ariaLabel
}, {
default: H(() => [
E(B(n.text), 1)
]),
_: 2
}, 1032, ["checked", "aria-label"]))), 128))
])
]));
}
}, dl = {
__name: "UsaCollection",
props: {
condensed: {
type: Boolean,
default: !1
}
},
setup(e) {
const t = e, a = g(() => [
{ "usa-collection--condensed": t.condensed }
]);
return (n, s) => (d(), b("ul", {
class: _(["usa-collection", a.value])
}, [
$(n.$slots, "default")
], 2));
}
}, fl = { class: "usa-collection__calendar-date" }, vl = {
__name: "UsaCollectionCalendar",
props: {
month: {
type: String,
required: !0
},
day: {
type: [String, Number],
required: !0
},
datetime: {
type: String,
default: ""
},
customClasses: {
type: Object,
default: () => ({
datetime: [],
month: [],
day: []
})
}
},
setup(e) {
const t = e, a = g(() => t.datetime ? "time" : "div");
return (n, s) => {
var r;
return d(), b("div", fl, [
(d(), K(Ee(a.value), {
datetime: e.datetime || null,
class: _((r = e.customClasses) == null ? void 0 : r.datetime)
}, {
default: H(() => {
var l, o;
return [
w("span", {
class: _(["usa-collection__calendar-date-month", (l = e.customClasses) == null ? void 0 : l.month])
}, B(e.month), 3),
w("span", {
class: _(["usa-collection__calendar-date-day", (o = e.customClasses) == null ? void 0 : o.day])
}, B(e.day), 3)
];
}),
_: 1
}, 8, ["datetime", "class"]))
]);
};
}
}, Ln = {
__name: "UsaCollectionHeading",
props: {
href: {
type: String,
default: ""
},
to: {
type: [String, Object],
default: ""
},
routerComponentName: {
type: [String, Object],
default: ""
},
headingTag: {
type: String,
default: "h2"
},
heading: {
type: String,
default: ""
},
customClasses: {
type: Object,
default: () => ({
link: []
})
}
},
setup(e) {
return (t, a) => (d(), K(u(Ae), {
tag: e.headingTag,
class: "usa-collection__heading"
}, {
default: H(() => {
var n;
return [
ge(u(ke), {
href: e.href,
to: e.to,
"router-component-name": e.routerComponentName,
class: _(["usa-link", (n = e.customClasses) == null ? void 0 : n.link])
}, {
default: H(() => [
$(t.$slots, "default", {}, () => [
E(B(e.heading), 1)
])
]),
_: 3
}, 8, ["href", "to", "router-component-name", "class"])
];
}),
_: 3
}, 8, ["tag"]));
}
}, ml = { class: "usa-collection__item" }, pl = { class: "usa-collection__body" }, gl = {
__name: "UsaCollectionItem",
props: {
heading: {
type: String,
default: ""
},
headingTag: {
type: String,
default: "h2"
},
href: {
type: String,
default: ""
},
to: {
type: [String, Object],
default: ""
},
routerComponentName: {
type: [String, Object],
default: ""
},
customClasses: {
type: Object,
default: () => ({
media: [],
heading: [],
link: [],
description: []
})
}
},
setup(e) {
return (t, a) => {
var n;
return d(), b("li", ml, [
t.$slots.media ? (d(), b("div", {
key: 0,
class: _(["usa-collection__img", (n = e.customClasses) == null ? void 0 : n.media])
}, [
$(t.$slots, "media")
], 2)) : $(t.$slots, "calendar", { key: 1 }),
w("div", pl, [
$(t.$slots, "heading", {}, () => {
var s, r;
return [
ge(u(Ln), {
heading: e.heading,
"heading-tag": e.headingTag,
href: e.href,
to: e.to,
class: _((s = e.customClasses) == null ? void 0 : s.heading),
"router-component-name": e.routerComponentName,
"custom-classes": { link: ((r = e.customClasses) == null ? void 0 : r.link) || [] }
}, {
default: H(() => [
E(B(e.heading), 1)
]),
_: 1
}, 8, ["heading", "heading-tag", "href", "to", "class", "router-component-name", "custom-classes"])
];
}),
$(t.$slots, "description", {}, () => {
var s;
return [
t.$slots.default ? (d(), b("p", {
key: 0,
class: _(["usa-collection__description", (s = e.customClasses) == null ? void 0 : s.description])
}, [
$(t.$slots, "default")
], 2)) : R("", !0)
];
}),
$(t.$slots, "meta")
])
]);
};
}
}, hl = ["aria-label"], bl = {
__name: "UsaCollectionMeta",
props: {
ariaLabel: {
type: String,
required: !0
}
},
setup(e) {
return (t, a) => (d(), b("ul", {
class: "usa-collection__meta",
"aria-label": e.ariaLabel
}, [
$(t.$slots, "default")
], 8, hl));
}
}, yl = {}, $l = { class: "usa-collection__meta-item" };
function Sl(e, t) {
return d(), b("li", $l, [
$(e.$slots, "default")
]);
}
const wl = /* @__PURE__ */ $t(yl, [["render", Sl]]);
function kl(e, t, a, n, s, r) {
const l = Y(e), o = Y(a), c = Y(n), i = Y(s), f = g({
get() {
return t.value;
},
set(Q) {
r("update:modelValue", Q);
}
}), p = Jr(), v = Y(!1), m = Y(""), h = Y(""), k = Y(!1), y = g(() => {
if (f.value === "")
return "";
const Q = o.value.find(