@eos-ui/vue 0.0.0-stage → 0.1.1

package/dist/components/Pagination/EPagination.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,66 @@
+/* empty css                */
+import { useMessages as e } from "../../config.js";
+import t from "../Icon/EIcon.js";
+import n from "../Button/EButton.js";
+import { Fragment as r, computed as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, mergeModels as u, openBlock as d, renderList as f, toDisplayString as p, unref as m, useModel as h, withCtx as g } from "vue";
+//#region src/components/Pagination/EPagination.vue?vue&type=script&setup=true&lang.ts
+var _ = ["aria-label"], v = { class: "e-pages" }, y = {
+	key: 0,
+	class: "e-page-gap",
+	"aria-hidden": "true"
+}, b = [
+	"aria-current",
+	"aria-label",
+	"onClick"
+], x = /*@__PURE__*/ l({
+	__name: "EPagination",
+	props: /*@__PURE__*/ u({ pageCount: {} }, {
+		modelValue: { default: 1 },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(l) {
+		let u = l, x = h(l, "modelValue"), S = e(), C = i(() => {
+			let e = [];
+			for (let t = 1; t <= u.pageCount; t++) t === 1 || t === u.pageCount || Math.abs(t - x.value) <= 1 ? e.push(t) : e[e.length - 1] !== "gap" && e.push("gap");
+			return e.map((t, n) => {
+				let r = e[n - 1], i = e[n + 1];
+				return t === "gap" && typeof r == "number" && typeof i == "number" && i - r === 2 ? r + 1 : t;
+			});
+		});
+		return (e, i) => (d(), a("nav", {
+			class: "e-pager",
+			"aria-label": m(S)("pagination")
+		}, [
+			c(n, {
+				variant: "outline",
+				icon: "chevron-left",
+				disabled: x.value <= 1,
+				onClick: i[0] ||= (e) => --x.value
+			}, {
+				default: g(() => [s(p(m(S)("previous")), 1)]),
+				_: 1
+			}, 8, ["disabled"]),
+			o("ul", v, [(d(!0), a(r, null, f(C.value, (e, t) => (d(), a("li", { key: t }, [e === "gap" ? (d(), a("span", y, "…")) : (d(), a("button", {
+				key: 1,
+				type: "button",
+				class: "e-page",
+				"aria-current": e === x.value ? "page" : void 0,
+				"aria-label": m(S)("pageN", { n: e }),
+				onClick: (t) => x.value = e
+			}, p(e), 9, b))]))), 128))]),
+			c(n, {
+				variant: "outline",
+				disabled: x.value >= l.pageCount,
+				onClick: i[1] ||= (e) => x.value += 1
+			}, {
+				default: g(() => [s(p(m(S)("next")) + " ", 1), c(t, { name: "chevron-right" })]),
+				_: 1
+			}, 8, ["disabled"])
+		], 8, _));
+	}
+});
+//#endregion
+export { x as default };
+
+//# sourceMappingURL=EPagination.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/Pagination/EPagination.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EPagination.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_unref","_createVNode","EButton","_withCtx","_createTextVNode","_toDisplayString","_createElementVNode","_Fragment","_renderList","EIcon","EIcon_default","EButton_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","EPagination_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","props","__props","page","useModel","t","useMessages","items","computed","list","i","before","k","after","n","openBlock","createElementBlock","unref","createVNode","_cache","withCtx","createTextVNode","toDisplayString","createElementVNode","Fragment","renderList"],"sources":["../../../src/components/Pagination/EPagination.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EButton from \"../Button/EButton.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** How many pages there are. */\n  pageCount: number;\n}>();\n\nconst page = defineModel<number>({ default: 1 });\n\nconst t = useMessages();\n\nconst items = computed<(number | \"gap\")[]>(() => {\n  const list: (number | \"gap\")[] = [];\n  for (let i = 1; i <= props.pageCount; i++) {\n    if (i === 1 || i === props.pageCount || Math.abs(i - page.value) <= 1) list.push(i);\n    else if (list[list.length - 1] !== \"gap\") list.push(\"gap\");\n  }\n  return list.map((n, k) => {\n    const before = list[k - 1];\n    const after = list[k + 1];\n    return n === \"gap\" && typeof before === \"number\" && typeof after === \"number\" && after - before === 2\n      ? before + 1\n      : n;\n  });\n});\n</script>\n\n<template>\n  <nav class=\"e-pager\" :aria-label=\"t('pagination')\">\n    <EButton variant=\"outline\" icon=\"chevron-left\" :disabled=\"page <= 1\" @click=\"page = page - 1\">\n      {{ t(\"previous\") }}\n    </EButton>\n    <ul class=\"e-pages\">\n      <li v-for=\"(n, i) in items\" :key=\"i\">\n        <span v-if=\"n === 'gap'\" class=\"e-page-gap\" aria-hidden=\"true\">&hellip;</span>\n        <button\n          v-else\n          type=\"button\"\n          class=\"e-page\"\n          :aria-current=\"n === page ? 'page' : undefined\"\n          :aria-label=\"t('pageN', { n })\"\n          @click=\"page = n\"\n        >\n          {{ n }}\n        </button>\n      </li>\n    </ul>\n    <EButton variant=\"outline\" :disabled=\"page >= pageCount\" @click=\"page = page + 1\">\n      {{ t(\"next\") }}\n      <EIcon name=\"chevron-right\" />\n    </EButton>\n  </nav>\n</template>\n\n<style>\n@layer e.composites {\n  .e-pager {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n    gap: var(--e-space-3);\n  }\n\n  .e-pages {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-1);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .e-page {\n    display: inline-grid;\n    place-items: center;\n    min-width: var(--e-control-height);\n    height: var(--e-control-height);\n    padding: 0 var(--e-space-2);\n    border: var(--e-stroke-edge) solid transparent;\n    border-radius: var(--e-radius-md);\n    background: transparent;\n    color: var(--e-ink);\n    font: 500 var(--e-text-sm)/1 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    cursor: pointer;\n    transition:\n      background-color var(--e-duration-tap) var(--e-easing-out),\n      border-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-page:hover {\n    background: var(--e-surface-tint);\n    border-color: var(--e-border-strong);\n  }\n\n  .e-page:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-page[aria-current=\"page\"] {\n    background: var(--e-primary);\n    border-color: var(--e-primary);\n    color: var(--e-on-primary);\n    font-weight: 600;\n    cursor: default;\n  }\n\n  .e-page-gap {\n    display: inline-grid;\n    place-items: center;\n    min-width: 28px;\n    color: var(--e-muted);\n  }\n\n  @media (max-width: 32rem) {\n    .e-pages {\n      display: none;\n    }\n\n    .e-pager {\n      justify-content: space-between;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-page {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-page[aria-current=\"page\"] {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n\n  @media print {\n    .e-pager {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAOA,IAAMsB,IAAQC,GAKRC,IAAOxB,EAAmBuB,GAAA,YAAe,GAEzCG,IAAIC,EAAY,GAEhBC,IAAQC,QAAmC;GAC/C,IAAMC,IAA2B,CAAC;GAClC,KAAK,IAAIC,IAAI,GAAGA,KAAKT,EAAM,WAAW,KACpC,AAAIS,MAAM,KAAKA,MAAMT,EAAM,aAAa,KAAK,IAAIS,IAAIP,EAAK,KAAK,KAAK,IAAGM,EAAK,KAAKC,CAAC,IACzED,EAAKA,EAAK,SAAS,OAAO,SAAOA,EAAK,KAAK,KAAK;GAE3D,OAAOA,EAAK,KAAK,GAAG,MAAM;IACxB,IAAME,IAASF,EAAKG,IAAI,IAClBC,IAAQJ,EAAKG,IAAI;IACvB,OAAOE,MAAM,SAAS,OAAOH,KAAW,YAAY,OAAOE,KAAU,YAAYA,IAAQF,MAAW,IAChGA,IAAS,IACTG;GACN,CAAC;EACH,CAAC;E,kBAIClC,EAAA,GAAAC,EAuBM,OAAA;GAvBD,OAAM;GAAW,cAAYC,EAAAuB,CAAA,CAAC,CAAA,YAAA;;GACjCtB,EAEUC,GAAA;IAFD,SAAQ;IAAU,MAAK;IAAgB,UAAUmB,EAAA,SAAI;IAAQ,SAAK,AAAAgB,EAAA,QAAA,MAAE,IAAA;;IAC3E,SAAAlC,QAAmB,CAAhBC,EAAAC,EAAAL,EAAAuB,CAAA,CAAC,CAAA,UAAA,CAAA,GAAA,CAAA,C;;;GAENjB,EAcK,MAdLO,GAcK,EAbHf,EAAA,EAAA,GAAAC,EAYKQ,GAAA,MAAAC,EAZgBiB,EAAA,QAAT,GAAG,OAAf3B,EAAA,GAAAC,EAYK,MAAA,EAZwB,KAAK6B,EAAC,GAAA,CACrBI,MAAC,SAAblC,EAAA,GAAAC,EAA8E,QAA9Ee,GAA+D,GAAQ,MACvEhB,EAAA,GAAAC,EASS,UAAA;;IAPP,MAAK;IACL,OAAM;IACL,gBAAciC,MAAMX,EAAA,QAAI,SAAY,KAAA;IACpC,cAAYrB,EAAAuB,CAAA,CAAC,CAAA,SAAA,EAAY,KAAC,CAAA;IAC1B,UAAK,MAAE,EAAA,QAAOS;GAEZ,GAAA3B,EAAA2B,CAAC,GAAA,GAAAjB,CAAA,E;GAIVd,EAGUC,GAAA;IAHD,SAAQ;IAAW,UAAUmB,EAAA,SAAQD,EAAA;IAAY,SAAK,AAAAiB,EAAA,QAAA,MAAE,EAAA,SAAW;;IAC1E,SAAAlC,QAAe,CAAZC,EAAAC,EAAAL,EAAAuB,CAAA,CAAC,CAAA,MAAA,CAAA,IAAW,KACf,CAAA,GAAAtB,EAA8BQ,GAAA,EAAvB,MAAK,gBAAe,CAAA,C"}

package/dist/components/Pagination/index.d.ts

@@ -0,0 +1 @@
+export { default as EPagination } from './EPagination.vue.js';

package/dist/components/Panel/EPanel.js

@@ -0,0 +1,8 @@
+import e from "./EPanel.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                       */
+//#region src/components/Panel/EPanel.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=EPanel.js.map

package/dist/components/Panel/EPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EPanel.js","names":["_sfc_main","EPanel_vue_vue_type_script_setup_true_lang_default","EPanel_default"],"sources":["../../../src/components/Panel/EPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ESurface from \"../Surface/ESurface.vue\";\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** A small mono label above the title. */\n    kicker?: string;\n    /** The panel's heading. With a title or an `action` the panel gets a header row. */\n    title?: string;\n    /** The level of the title's heading element, 1 to 6. Pick the one that fits the page outline. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  }>(),\n  { headingLevel: 3 },\n);\n\ndefineSlots<{\n  /** The body: statements, detail rows, a form. */\n  default?(): unknown;\n  /** The header's action, usually a Button. */\n  action?(): unknown;\n}>();\n</script>\n\n<template>\n  <ESurface as=\"section\" class=\"e-panel\">\n    <header v-if=\"title || $slots.action\" class=\"e-panel-head\">\n      <div>\n        <p v-if=\"kicker\" class=\"e-kicker\" style=\"margin: 0\">{{ kicker }}</p>\n        <component :is=\"`h${headingLevel}`\" v-if=\"title\" class=\"e-panel-title\">{{ title }}</component>\n      </div>\n      <slot name=\"action\" />\n    </header>\n    <div class=\"e-panel-body\"><slot /></div>\n  </ESurface>\n</template>\n\n<style>\n@layer e.containers {\n  .e-panel-head {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--e-space-3);\n    padding: var(--e-space-3) var(--e-space-4);\n    border-bottom: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-panel-title {\n    margin: 0;\n    font: 500 var(--e-text-xl) / 1.25 var(--e-font-sans);\n  }\n\n  .e-panel-body {\n    padding: var(--e-space-4);\n  }\n\n  @media print {\n    .e-panel {\n      box-shadow: none;\n      border: 1px solid #000;\n      break-inside: avoid;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Panel/EPanel.vue.d.ts

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    /** A small mono label above the title. */
+    kicker?: string;
+    /** The panel's heading. With a title or an `action` the panel gets a header row. */
+    title?: string;
+    /** The level of the title's heading element, 1 to 6. Pick the one that fits the page outline. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+};
+type __VLS_Slots = {
+    /** The body: statements, detail rows, a form. */
+    default?(): unknown;
+    /** The header's action, usually a Button. */
+    action?(): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    headingLevel: 1 | 2 | 3 | 4 | 5 | 6;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Panel/EPanel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,38 @@
+/* empty css                */
+import e from "../Surface/ESurface.js";
+import { createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, openBlock as s, renderSlot as c, resolveDynamicComponent as l, toDisplayString as u, withCtx as d } from "vue";
+//#region src/components/Panel/EPanel.vue?vue&type=script&setup=true&lang.ts
+var f = {
+	key: 0,
+	class: "e-panel-head"
+}, p = {
+	key: 0,
+	class: "e-kicker",
+	style: { margin: "0" }
+}, m = { class: "e-panel-body" }, h = /*@__PURE__*/ o({
+	__name: "EPanel",
+	props: {
+		kicker: {},
+		title: {},
+		headingLevel: { default: 3 }
+	},
+	setup(o) {
+		return (h, g) => (s(), t(e, {
+			as: "section",
+			class: "e-panel"
+		}, {
+			default: d(() => [o.title || h.$slots.action ? (s(), r("header", f, [i("div", null, [o.kicker ? (s(), r("p", p, u(o.kicker), 1)) : n("", !0), o.title ? (s(), t(l(`h${o.headingLevel}`), {
+				key: 1,
+				class: "e-panel-title"
+			}, {
+				default: d(() => [a(u(o.title), 1)]),
+				_: 1
+			})) : n("", !0)]), c(h.$slots, "action")])) : n("", !0), i("div", m, [c(h.$slots, "default")])]),
+			_: 3
+		}));
+	}
+});
+//#endregion
+export { h as default };
+
+//# sourceMappingURL=EPanel.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/Panel/EPanel.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EPanel.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createBlock","ESurface","_withCtx","_createElementBlock","_createElementVNode","_toDisplayString","_createCommentVNode","_resolveDynamicComponent","_createTextVNode","_renderSlot","ESurface_default","_hoisted_1","_hoisted_2","\"margin\"","_hoisted_3","EPanel_vue_vue_type_script_setup_true_lang_default","openBlock","createBlock","withCtx","__props","_ctx","createElementBlock","createElementVNode","toDisplayString","createCommentVNode","resolveDynamicComponent","createTextVNode","renderSlot"],"sources":["../../../src/components/Panel/EPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ESurface from \"../Surface/ESurface.vue\";\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** A small mono label above the title. */\n    kicker?: string;\n    /** The panel's heading. With a title or an `action` the panel gets a header row. */\n    title?: string;\n    /** The level of the title's heading element, 1 to 6. Pick the one that fits the page outline. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  }>(),\n  { headingLevel: 3 },\n);\n\ndefineSlots<{\n  /** The body: statements, detail rows, a form. */\n  default?(): unknown;\n  /** The header's action, usually a Button. */\n  action?(): unknown;\n}>();\n</script>\n\n<template>\n  <ESurface as=\"section\" class=\"e-panel\">\n    <header v-if=\"title || $slots.action\" class=\"e-panel-head\">\n      <div>\n        <p v-if=\"kicker\" class=\"e-kicker\" style=\"margin: 0\">{{ kicker }}</p>\n        <component :is=\"`h${headingLevel}`\" v-if=\"title\" class=\"e-panel-title\">{{ title }}</component>\n      </div>\n      <slot name=\"action\" />\n    </header>\n    <div class=\"e-panel-body\"><slot /></div>\n  </ESurface>\n</template>\n\n<style>\n@layer e.containers {\n  .e-panel-head {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--e-space-3);\n    padding: var(--e-space-3) var(--e-space-4);\n    border-bottom: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-panel-title {\n    margin: 0;\n    font: 500 var(--e-text-xl) / 1.25 var(--e-font-sans);\n  }\n\n  .e-panel-body {\n    padding: var(--e-space-4);\n  }\n\n  @media print {\n    .e-panel {\n      box-shadow: none;\n      border: 1px solid #000;\n      break-inside: avoid;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;E,kBAyBEC,EAAA,GAAAC,EASWC,GAAA;GATD,IAAG;GAAU,OAAM;;GAC3B,SAAAC,QAMS,CANKiB,EAAA,SAASrB,EAAAA,OAAO,UAA9BC,EAAA,GAAAI,EAMS,UANTQ,GAMS,CALPP,EAGM,OAAA,MAAA,CAFKe,EAAA,UAATpB,EAAA,GAAAI,EAAoE,KAApES,GAAoEP,EAAbc,EAAA,MAAM,GAAA,CAAA,K,WACnBA,EAAA,SAA1CpB,EAAA,GAAAC,EAA8FO,EAAA,IAA1EY,EAAA,cAAY,GAAA;;IAAiB,OAAM;;IAAgB,SAAAjB,QAAW,CAARM,EAAAH,EAAAc,EAAA,KAAK,GAAA,CAAA,C;;G,mBAEjFV,EAAsBW,EAAA,QAAA,QAAA,C,iBAExBhB,EAAwC,OAAxCU,GAAwC,CAAdL,EAAQW,EAAA,QAAA,SAAA,C"}

package/dist/components/Panel/index.d.ts

@@ -0,0 +1 @@
+export { default as EPanel } from './EPanel.vue.js';

package/dist/components/PasswordField/EPasswordField.js

@@ -0,0 +1,8 @@
+import e from "./EPasswordField.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                               */
+//#region src/components/PasswordField/EPasswordField.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=EPasswordField.js.map

package/dist/components/PasswordField/EPasswordField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EPasswordField.js","names":["_sfc_main","EPasswordField_vue_vue_type_script_setup_true_lang_default","EPasswordField_default"],"sources":["../../../src/components/PasswordField/EPasswordField.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface PasswordRule {\n  /** What the password needs, such as \"At least 10 characters\". */\n  label: string;\n  /** Whether the password meets the rule. */\n  test: (value: string) => boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EField from \"../Field/EField.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { focusInside } from \"../../composables/focusInside.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\nimport \"../Combobox/combo.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the field. Default \"Password\". */\n  label?: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** `current` for signing in, `new` for choosing one. Sets the autocomplete token so a password manager can fill or suggest. */\n  mode?: \"current\" | \"new\";\n  /** A checklist that updates as the person types. Each rule shows a tick or an empty circle and says \"met\" or \"not met yet\". */\n  rules?: PasswordRule[];\n  /** Help that stays under the field. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the input invalid and is announced. */\n  error?: string;\n  /** A word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  disabled?: boolean;\n  /** The id of the input; the label points at it. Generated when left out. */\n  id?: string;\n}>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst input = ref<HTMLInputElement | null>(null);\nconst shown = ref(false);\n\nconst list = computed(() => props.rules ?? []);\n\nfunction inputBind(field: { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined }) {\n  const describedby = [field.ariaDescribedby, list.value.length ? `${field.id}-rules` : \"\"].filter(Boolean).join(\" \");\n  return {\n    id: field.id,\n    class: \"e-input\",\n    type: shown.value ? \"text\" : \"password\",\n    value: model.value,\n    disabled: props.disabled,\n    required: props.required,\n    autocomplete: props.mode === \"new\" ? \"new-password\" : \"current-password\",\n    autocapitalize: \"none\",\n    spellcheck: false,\n    \"aria-invalid\": field.ariaInvalid,\n    ...attrs.input(describedby || undefined),\n  };\n}\n\ndefineExpose({\n  input,\n  focus: () => input.value?.focus(),\n});\n</script>\n\n<template>\n  <EField\n    v-bind=\"attrs.wrapper()\"\n    :id=\"id\"\n    :label=\"label || t('password')\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->\n      <div\n        class=\"e-input-wrap\"\n        :data-invalid=\"error ? '' : undefined\"\n        :data-disabled=\"disabled ? '' : undefined\"\n        @click=\"focusInside\"\n      >\n        <input ref=\"input\" v-bind=\"inputBind(field)\" @input=\"model = ($event.target as HTMLInputElement).value\" />\n        <button\n          type=\"button\"\n          class=\"e-combo-btn\"\n          :aria-pressed=\"shown ? 'true' : 'false'\"\n          :aria-label=\"shown ? t('hidePassword') : t('showPassword')\"\n          :disabled=\"disabled\"\n          @click=\"shown = !shown\"\n        >\n          <EIcon :name=\"shown ? 'eye-slash' : 'eye'\" />\n        </button>\n      </div>\n      <ul v-if=\"list.length\" :id=\"`${field.id}-rules`\" class=\"e-rules\" :aria-label=\"t('passwordRules')\">\n        <li v-for=\"r in list\" :key=\"r.label\" class=\"e-rule\" :data-met=\"r.test(model) ? '' : undefined\">\n          <EIcon v-if=\"r.test(model)\" name=\"check\" small />\n          <span v-else class=\"e-rule-dot\" aria-hidden=\"true\" />\n          {{ r.label }}\n          <span class=\"e-sr\"> ({{ t(r.test(model) ? \"ruleMet\" : \"ruleNotMet\") }})</span>\n        </li>\n      </ul>\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.composites {\n  .e-rules {\n    display: grid;\n    gap: var(--e-space-1);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    font: 400 var(--e-text-sm)/1.4 var(--e-font-sans);\n  }\n\n  .e-rule {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    color: var(--e-muted);\n  }\n\n  .e-rule[data-met] {\n    color: var(--e-secondary);\n  }\n\n  .e-rule .e-icon {\n    flex: none;\n  }\n\n  .e-rule-dot {\n    flex: none;\n    width: 14px;\n    height: 14px;\n    border: var(--e-stroke-edge) solid var(--e-border-strong);\n    border-radius: 50%;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/PasswordField/EPasswordField.vue.d.ts

@@ -0,0 +1,60 @@
+export interface PasswordRule {
+    /** What the password needs, such as "At least 10 characters". */
+    label: string;
+    /** Whether the password meets the rule. */
+    test: (value: string) => boolean;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<{
+    /** The visible label, a mono kicker above the field. Default "Password". */
+    label?: string;
+    /** Keep the label for screen readers and remove it from the page. */
+    hideLabel?: boolean;
+    /** `current` for signing in, `new` for choosing one. Sets the autocomplete token so a password manager can fill or suggest. */
+    mode?: "current" | "new";
+    /** A checklist that updates as the person types. Each rule shows a tick or an empty circle and says "met" or "not met yet". */
+    rules?: PasswordRule[];
+    /** Help that stays under the field. */
+    hint?: string;
+    /** What to fix. Replaces the hint, marks the input invalid and is announced. */
+    error?: string;
+    /** A word beside the label. */
+    required?: boolean;
+    /** A word beside the label. Flag whichever is rarer. */
+    optional?: boolean;
+    disabled?: boolean;
+    /** The id of the input; the label points at it. Generated when left out. */
+    id?: string;
+} & {
+    modelValue?: string;
+}, {
+    input: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
+    focus: () => void | undefined;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    /** The visible label, a mono kicker above the field. Default "Password". */
+    label?: string;
+    /** Keep the label for screen readers and remove it from the page. */
+    hideLabel?: boolean;
+    /** `current` for signing in, `new` for choosing one. Sets the autocomplete token so a password manager can fill or suggest. */
+    mode?: "current" | "new";
+    /** A checklist that updates as the person types. Each rule shows a tick or an empty circle and says "met" or "not met yet". */
+    rules?: PasswordRule[];
+    /** Help that stays under the field. */
+    hint?: string;
+    /** What to fix. Replaces the hint, marks the input invalid and is announced. */
+    error?: string;
+    /** A word beside the label. */
+    required?: boolean;
+    /** A word beside the label. Flag whichever is rarer. */
+    optional?: boolean;
+    disabled?: boolean;
+    /** The id of the input; the label points at it. Generated when left out. */
+    id?: string;
+} & {
+    modelValue?: string;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/PasswordField/EPasswordField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,116 @@
+/* empty css                */
+import { useMessages as e } from "../../config.js";
+import { focusInside as t } from "../../composables/focusInside.js";
+import { useFieldAttrs as n } from "../../composables/useFieldAttrs.js";
+import r from "../Icon/EIcon.js";
+import i from "../Field/EField.js";
+/* empty css                 */
+/* empty css                */
+import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, mergeModels as m, mergeProps as h, openBlock as g, ref as _, renderList as v, toDisplayString as y, unref as b, useModel as x, withCtx as S } from "vue";
+//#region src/components/PasswordField/EPasswordField.vue?vue&type=script&setup=true&lang.ts
+var C = ["data-invalid", "data-disabled"], w = [
+	"aria-pressed",
+	"aria-label",
+	"disabled"
+], T = ["id", "aria-label"], E = ["data-met"], D = {
+	key: 1,
+	class: "e-rule-dot",
+	"aria-hidden": "true"
+}, O = { class: "e-sr" }, k = /*@__PURE__*/ p({
+	inheritAttrs: !1,
+	__name: "EPasswordField",
+	props: /*@__PURE__*/ m({
+		label: {},
+		hideLabel: { type: Boolean },
+		mode: {},
+		rules: {},
+		hint: {},
+		error: {},
+		required: { type: Boolean },
+		optional: { type: Boolean },
+		disabled: { type: Boolean },
+		id: {}
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(p, { expose: m }) {
+		let k = p, A = x(p, "modelValue"), j = e(), M = n(), N = _(null), P = _(!1), F = o(() => k.rules ?? []);
+		function I(e) {
+			let t = [e.ariaDescribedby, F.value.length ? `${e.id}-rules` : ""].filter(Boolean).join(" ");
+			return {
+				id: e.id,
+				class: "e-input",
+				type: P.value ? "text" : "password",
+				value: A.value,
+				disabled: k.disabled,
+				required: k.required,
+				autocomplete: k.mode === "new" ? "new-password" : "current-password",
+				autocapitalize: "none",
+				spellcheck: !1,
+				"aria-invalid": e.ariaInvalid,
+				...M.input(t || void 0)
+			};
+		}
+		return m({
+			input: N,
+			focus: () => N.value?.focus()
+		}), (e, n) => (g(), s(i, h(b(M).wrapper(), {
+			id: p.id,
+			label: p.label || b(j)("password"),
+			"hide-label": p.hideLabel,
+			hint: p.hint,
+			error: p.error,
+			required: p.required,
+			optional: p.optional
+		}), {
+			default: S((e) => [u("div", {
+				class: "e-input-wrap",
+				"data-invalid": p.error ? "" : void 0,
+				"data-disabled": p.disabled ? "" : void 0,
+				onClick: n[2] ||= (...e) => b(t) && b(t)(...e)
+			}, [u("input", h({
+				ref_key: "input",
+				ref: N
+			}, I(e), { onInput: n[0] ||= (e) => A.value = e.target.value }), null, 16), u("button", {
+				type: "button",
+				class: "e-combo-btn",
+				"aria-pressed": P.value ? "true" : "false",
+				"aria-label": P.value ? b(j)("hidePassword") : b(j)("showPassword"),
+				disabled: p.disabled,
+				onClick: n[1] ||= (e) => P.value = !P.value
+			}, [f(r, { name: P.value ? "eye-slash" : "eye" }, null, 8, ["name"])], 8, w)], 8, C), F.value.length ? (g(), l("ul", {
+				key: 0,
+				id: `${e.id}-rules`,
+				class: "e-rules",
+				"aria-label": b(j)("passwordRules")
+			}, [(g(!0), l(a, null, v(F.value, (e) => (g(), l("li", {
+				key: e.label,
+				class: "e-rule",
+				"data-met": e.test(A.value) ? "" : void 0
+			}, [
+				e.test(A.value) ? (g(), s(r, {
+					key: 0,
+					name: "check",
+					small: ""
+				})) : (g(), l("span", D)),
+				d(" " + y(e.label) + " ", 1),
+				u("span", O, " (" + y(b(j)(e.test(A.value) ? "ruleMet" : "ruleNotMet")) + ")", 1)
+			], 8, E))), 128))], 8, T)) : c("", !0)]),
+			_: 1
+		}, 16, [
+			"id",
+			"label",
+			"hide-label",
+			"hint",
+			"error",
+			"required",
+			"optional"
+		]));
+	}
+});
+//#endregion
+export { k as default };
+
+//# sourceMappingURL=EPasswordField.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/PasswordField/EPasswordField.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EPasswordField.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","EField","_mergeProps","_unref","_withCtx","_createElementVNode","_createVNode","EIcon","_createElementBlock","_Fragment","_renderList","_createTextVNode","_toDisplayString","_createCommentVNode","EIcon_default","EField_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","EPasswordField_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","props","__props","model","useModel","t","useMessages","attrs","useFieldAttrs","input","ref","shown","list","computed","inputBind","describedby","field","openBlock","createBlock","mergeProps","unref","withCtx","createElementVNode","_cache","args","focusInside","$event","createVNode","createElementBlock","Fragment","renderList","r","createTextVNode","toDisplayString","createCommentVNode"],"sources":["../../../src/components/PasswordField/EPasswordField.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface PasswordRule {\n  /** What the password needs, such as \"At least 10 characters\". */\n  label: string;\n  /** Whether the password meets the rule. */\n  test: (value: string) => boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EField from \"../Field/EField.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { focusInside } from \"../../composables/focusInside.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\nimport \"../Combobox/combo.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the field. Default \"Password\". */\n  label?: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** `current` for signing in, `new` for choosing one. Sets the autocomplete token so a password manager can fill or suggest. */\n  mode?: \"current\" | \"new\";\n  /** A checklist that updates as the person types. Each rule shows a tick or an empty circle and says \"met\" or \"not met yet\". */\n  rules?: PasswordRule[];\n  /** Help that stays under the field. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the input invalid and is announced. */\n  error?: string;\n  /** A word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  disabled?: boolean;\n  /** The id of the input; the label points at it. Generated when left out. */\n  id?: string;\n}>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst input = ref<HTMLInputElement | null>(null);\nconst shown = ref(false);\n\nconst list = computed(() => props.rules ?? []);\n\nfunction inputBind(field: { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined }) {\n  const describedby = [field.ariaDescribedby, list.value.length ? `${field.id}-rules` : \"\"].filter(Boolean).join(\" \");\n  return {\n    id: field.id,\n    class: \"e-input\",\n    type: shown.value ? \"text\" : \"password\",\n    value: model.value,\n    disabled: props.disabled,\n    required: props.required,\n    autocomplete: props.mode === \"new\" ? \"new-password\" : \"current-password\",\n    autocapitalize: \"none\",\n    spellcheck: false,\n    \"aria-invalid\": field.ariaInvalid,\n    ...attrs.input(describedby || undefined),\n  };\n}\n\ndefineExpose({\n  input,\n  focus: () => input.value?.focus(),\n});\n</script>\n\n<template>\n  <EField\n    v-bind=\"attrs.wrapper()\"\n    :id=\"id\"\n    :label=\"label || t('password')\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->\n      <div\n        class=\"e-input-wrap\"\n        :data-invalid=\"error ? '' : undefined\"\n        :data-disabled=\"disabled ? '' : undefined\"\n        @click=\"focusInside\"\n      >\n        <input ref=\"input\" v-bind=\"inputBind(field)\" @input=\"model = ($event.target as HTMLInputElement).value\" />\n        <button\n          type=\"button\"\n          class=\"e-combo-btn\"\n          :aria-pressed=\"shown ? 'true' : 'false'\"\n          :aria-label=\"shown ? t('hidePassword') : t('showPassword')\"\n          :disabled=\"disabled\"\n          @click=\"shown = !shown\"\n        >\n          <EIcon :name=\"shown ? 'eye-slash' : 'eye'\" />\n        </button>\n      </div>\n      <ul v-if=\"list.length\" :id=\"`${field.id}-rules`\" class=\"e-rules\" :aria-label=\"t('passwordRules')\">\n        <li v-for=\"r in list\" :key=\"r.label\" class=\"e-rule\" :data-met=\"r.test(model) ? '' : undefined\">\n          <EIcon v-if=\"r.test(model)\" name=\"check\" small />\n          <span v-else class=\"e-rule-dot\" aria-hidden=\"true\" />\n          {{ r.label }}\n          <span class=\"e-sr\"> ({{ t(r.test(model) ? \"ruleMet\" : \"ruleNotMet\") }})</span>\n        </li>\n      </ul>\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.composites {\n  .e-rules {\n    display: grid;\n    gap: var(--e-space-1);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    font: 400 var(--e-text-sm)/1.4 var(--e-font-sans);\n  }\n\n  .e-rule {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    color: var(--e-muted);\n  }\n\n  .e-rule[data-met] {\n    color: var(--e-secondary);\n  }\n\n  .e-rule .e-icon {\n    flex: none;\n  }\n\n  .e-rule-dot {\n    flex: none;\n    width: 14px;\n    height: 14px;\n    border: var(--e-stroke-edge) solid var(--e-border-strong);\n    border-radius: 50%;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsBA,IAAM4B,IAAQC,GAsBRC,IAAQ9B,EAAmB6B,GAAA,YAAgB,GAE3CG,IAAIC,EAAY,GAChBC,IAAQC,EAAc,GACtBC,IAAQC,EAA6B,IAAI,GACzCC,IAAQD,EAAI,EAAK,GAEjBE,IAAOC,QAAeZ,EAAM,SAAS,CAAC,CAAC;EAE7C,SAASa,EAAU,GAA6F;GAC9G,IAAMC,IAAc,CAACC,EAAM,iBAAiBJ,EAAK,MAAM,SAAS,GAAGI,EAAM,GAAG,UAAU,EAAE,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;GAClH,OAAO;IACL,IAAIA,EAAM;IACV,OAAO;IACP,MAAML,EAAM,QAAQ,SAAS;IAC7B,OAAOR,EAAM;IACb,UAAUF,EAAM;IAChB,UAAUA,EAAM;IAChB,cAAcA,EAAM,SAAS,QAAQ,iBAAiB;IACtD,gBAAgB;IAChB,YAAY;IACZ,gBAAgBe,EAAM;IACtB,GAAGT,EAAM,MAAMQ,KAAe,KAAA,CAAS;GACzC;EACF;E,OAEAf,EAAa;GACX;GACA,aAAaS,EAAM,OAAO,MAAM;EAClC,CAAC,I,UAICnC,EAAA,GAAAC,EAuCSC,GAvCTC,EACUC,EAsCD6B,CAAA,CAtCM,CAAC,QAAO,GAAA;GACpB,IAAIL,EAAA;GACJ,OAAOA,EAAA,SAASxB,EAAA2B,CAAA,CAAC,CAAA,UAAA;GACjB,cAAYH,EAAA;GACZ,MAAMA,EAAA;GACN,OAAOA,EAAA;GACP,UAAUA,EAAA;GACV,UAAUA,EAAA;;GAEA,SAAOvB,GAAE,MAAK,CAEvBC,EAiBM,OAAA;IAhBJ,OAAM;IACL,gBAAcsB,EAAA,QAAK,KAAQ,KAAA;IAC3B,iBAAeA,EAAA,WAAQ,KAAQ,KAAA;IAC/B,SAAK,AAAAqB,EAAA,QAAE,GAAAC,MAAA9C,EAAA+C,CAAA,KAAA/C,EAAA+C,CAAA,CAAA,CAAA,GAAAD,CAAA;G,IAER5C,EAA0G,SAA1GH,EAA0G;IAA/F,SAAA;IAAJ,KAAIgC;GAAgB,GAAAK,EAAUE,CAAK,GAAA,EAAI,SAAK,AAAAO,EAAA,QAAA,MAAE,EAAA,QAASG,EAAO,OAA4B,M,eACjG9C,EASS,UAAA;IARP,MAAK;IACL,OAAM;IACL,gBAAc+B,EAAA,QAAK,SAAA;IACnB,cAAYA,EAAA,QAAQjC,EAAA2B,CAAA,CAAC,CAAA,cAAA,IAAmB3B,EAAA2B,CAAA,CAAC,CAAA,cAAA;IACzC,UAAUH,EAAA;IACV,SAAK,AAAAqB,EAAA,QAAA,MAAE,EAAA,QAAK,CAAIZ,EAAA;G,IAEjB9B,EAA6CC,GAAA,EAArC,MAAM6B,EAAA,QAAK,cAAA,M,uCAGbC,EAAA,MAAK,UAAftC,EAAA,GAAAS,EAOK,MAAA;;IAPmB,IAAE,GAAKiC,EAAM,GAAE;IAAU,OAAM;IAAW,cAAYtC,EAAA2B,CAAA,CAAC,CAAA,eAAA;G,KAC7E/B,EAAA,EAAA,GAAAS,EAKKC,GAAA,MAAAC,EALW2B,EAAA,QAAL,OAAXtC,EAAA,GAAAS,EAKK,MAAA;IALkB,KAAKgD,EAAE;IAAO,OAAM;IAAU,YAAUA,EAAE,KAAK5B,EAAA,KAAK,IAAA,KAAS,KAAA;;IACrE4B,EAAE,KAAK5B,EAAA,KAAK,KAAzB7B,EAAA,GAAAC,EAAiDO,GAAA;;KAArB,MAAK;KAAQ,OAAA;I,OACzCR,EAAA,GAAAS,EAAqD,QAArDY,CAAqD;IAAAT,EAAA,MACrDC,EAAG4C,EAAE,KAAK,IAAG,KACb,CAAA;IAAAnD,EAA8E,QAA9EgB,GAAmB,OAAET,EAAGT,EAAA2B,CAAA,CAAC,CAAC0B,EAAE,KAAK5B,EAAA,KAAK,IAAA,YAAA,YAAA,CAAA,IAAgC,KAAC,CAAA"}

package/dist/components/PasswordField/index.d.ts

@@ -0,0 +1,2 @@
+export { default as EPasswordField } from './EPasswordField.vue.js';
+export type { PasswordRule } from './EPasswordField.vue.js';

package/dist/components/PhoneField/EPhoneField.js

@@ -0,0 +1,8 @@
+import e from "./EPhoneField.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                            */
+//#region src/components/PhoneField/EPhoneField.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=EPhoneField.js.map

package/dist/components/PhoneField/EPhoneField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EPhoneField.js","names":["_sfc_main","EPhoneField_vue_vue_type_script_setup_true_lang_default","EPhoneField_default"],"sources":["../../../src/components/PhoneField/EPhoneField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, ref } from \"vue\";\nimport ETextField from \"../TextField/ETextField.vue\";\nimport { useConfig, useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the input. Default \"Phone number\". */\n  label?: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** `us` groups the digits as you type, (555) 123-4567; `none` leaves them alone. Default `us` for the en-US locale, `none` otherwise. */\n  format?: \"us\" | \"none\";\n  /** Help that stays under the input. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the input invalid and is announced. */\n  error?: string;\n  /** An example, never the label. */\n  placeholder?: string;\n  /** A word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  disabled?: boolean;\n  /** The name submitted with a form. */\n  name?: string;\n  /** The id of the input; the label points at it. Generated when left out. */\n  id?: string;\n}>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst config = useConfig();\nconst field = ref<InstanceType<typeof ETextField> | null>(null);\n\nconst style = computed(() => props.format || (/^en-US/i.test(config.locale) ? \"us\" : \"none\"));\n\nfunction formatPhone(raw: string | null | undefined): string {\n  let digits = String(raw || \"\").replace(/\\D/g, \"\");\n  if (style.value !== \"us\") return String(raw || \"\");\n  if (digits.length > 10 && digits.charAt(0) === \"1\") digits = digits.slice(1);\n  digits = digits.slice(0, 10);\n  if (digits.length < 4) return digits;\n  if (digits.length < 7) return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;\n  return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;\n}\n\nconst shown = computed(() => formatPhone(model.value));\n\nasync function onInput(value: string) {\n  model.value = formatPhone(value);\n  await nextTick();\n  const el = field.value?.input;\n  if (el && el.value !== shown.value) el.value = shown.value;\n}\n\ndefineExpose({\n  input: computed(() => field.value?.input ?? null),\n  focus: () => field.value?.focus(),\n});\n</script>\n\n<template>\n  <ETextField\n    :id=\"id\"\n    ref=\"field\"\n    class=\"e-phone\"\n    type=\"tel\"\n    inputmode=\"tel\"\n    autocomplete=\"tel\"\n    :label=\"label || t('phone')\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :placeholder=\"placeholder\"\n    :required=\"required\"\n    :optional=\"optional\"\n    :disabled=\"disabled\"\n    :name=\"name\"\n    :model-value=\"shown\"\n    @update:model-value=\"onInput\"\n  />\n</template>\n\n<style>\n@layer e.composites {\n  .e-phone .e-input {\n    font-variant-numeric: tabular-nums;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/PhoneField/EPhoneField.vue.d.ts

@@ -0,0 +1,37 @@
+type __VLS_Props = {
+    /** The visible label, a mono kicker above the input. Default "Phone number". */
+    label?: string;
+    /** Keep the label for screen readers and remove it from the page. */
+    hideLabel?: boolean;
+    /** `us` groups the digits as you type, (555) 123-4567; `none` leaves them alone. Default `us` for the en-US locale, `none` otherwise. */
+    format?: "us" | "none";
+    /** Help that stays under the input. */
+    hint?: string;
+    /** What to fix. Replaces the hint, marks the input invalid and is announced. */
+    error?: string;
+    /** An example, never the label. */
+    placeholder?: string;
+    /** A word beside the label. */
+    required?: boolean;
+    /** A word beside the label. Flag whichever is rarer. */
+    optional?: boolean;
+    disabled?: boolean;
+    /** The name submitted with a form. */
+    name?: string;
+    /** The id of the input; the label points at it. Generated when left out. */
+    id?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {
+    input: import('vue').ComputedRef<HTMLInputElement | null>;
+    focus: () => void | undefined;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/PhoneField/EPhoneField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,77 @@
+/* empty css                */
+import { useConfig as e, useMessages as t } from "../../config.js";
+import n from "../TextField/ETextField.js";
+import { computed as r, createBlock as i, defineComponent as a, mergeModels as o, nextTick as s, openBlock as c, ref as l, unref as u, useModel as d } from "vue";
+//#region src/components/PhoneField/EPhoneField.vue?vue&type=script&setup=true&lang.ts
+var f = /*@__PURE__*/ a({
+	__name: "EPhoneField",
+	props: /*@__PURE__*/ o({
+		label: {},
+		hideLabel: { type: Boolean },
+		format: {},
+		hint: {},
+		error: {},
+		placeholder: {},
+		required: { type: Boolean },
+		optional: { type: Boolean },
+		disabled: { type: Boolean },
+		name: {},
+		id: {}
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(a, { expose: o }) {
+		let f = a, p = d(a, "modelValue"), m = t(), h = e(), g = l(null), _ = r(() => f.format || (/^en-US/i.test(h.locale) ? "us" : "none"));
+		function v(e) {
+			let t = String(e || "").replace(/\D/g, "");
+			return _.value === "us" ? (t.length > 10 && t.charAt(0) === "1" && (t = t.slice(1)), t = t.slice(0, 10), t.length < 4 ? t : t.length < 7 ? `(${t.slice(0, 3)}) ${t.slice(3)}` : `(${t.slice(0, 3)}) ${t.slice(3, 6)}-${t.slice(6)}`) : String(e || "");
+		}
+		let y = r(() => v(p.value));
+		async function b(e) {
+			p.value = v(e), await s();
+			let t = g.value?.input;
+			t && t.value !== y.value && (t.value = y.value);
+		}
+		return o({
+			input: r(() => g.value?.input ?? null),
+			focus: () => g.value?.focus()
+		}), (e, t) => (c(), i(n, {
+			id: a.id,
+			ref_key: "field",
+			ref: g,
+			class: "e-phone",
+			type: "tel",
+			inputmode: "tel",
+			autocomplete: "tel",
+			label: a.label || u(m)("phone"),
+			"hide-label": a.hideLabel,
+			hint: a.hint,
+			error: a.error,
+			placeholder: a.placeholder,
+			required: a.required,
+			optional: a.optional,
+			disabled: a.disabled,
+			name: a.name,
+			"model-value": y.value,
+			"onUpdate:modelValue": b
+		}, null, 8, [
+			"id",
+			"label",
+			"hide-label",
+			"hint",
+			"error",
+			"placeholder",
+			"required",
+			"optional",
+			"disabled",
+			"name",
+			"model-value"
+		]));
+	}
+});
+//#endregion
+export { f as default };
+
+//# sourceMappingURL=EPhoneField.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/PhoneField/EPhoneField.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EPhoneField.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","ETextField","_unref","ETextField_default","EPhoneField_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","props","__props","model","useModel","t","useMessages","config","useConfig","field","ref","style","computed","formatPhone","digits","raw","shown","onInput","value","nextTick","el","openBlock","createBlock","unref"],"sources":["../../../src/components/PhoneField/EPhoneField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, ref } from \"vue\";\nimport ETextField from \"../TextField/ETextField.vue\";\nimport { useConfig, useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the input. Default \"Phone number\". */\n  label?: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** `us` groups the digits as you type, (555) 123-4567; `none` leaves them alone. Default `us` for the en-US locale, `none` otherwise. */\n  format?: \"us\" | \"none\";\n  /** Help that stays under the input. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the input invalid and is announced. */\n  error?: string;\n  /** An example, never the label. */\n  placeholder?: string;\n  /** A word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  disabled?: boolean;\n  /** The name submitted with a form. */\n  name?: string;\n  /** The id of the input; the label points at it. Generated when left out. */\n  id?: string;\n}>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst config = useConfig();\nconst field = ref<InstanceType<typeof ETextField> | null>(null);\n\nconst style = computed(() => props.format || (/^en-US/i.test(config.locale) ? \"us\" : \"none\"));\n\nfunction formatPhone(raw: string | null | undefined): string {\n  let digits = String(raw || \"\").replace(/\\D/g, \"\");\n  if (style.value !== \"us\") return String(raw || \"\");\n  if (digits.length > 10 && digits.charAt(0) === \"1\") digits = digits.slice(1);\n  digits = digits.slice(0, 10);\n  if (digits.length < 4) return digits;\n  if (digits.length < 7) return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;\n  return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;\n}\n\nconst shown = computed(() => formatPhone(model.value));\n\nasync function onInput(value: string) {\n  model.value = formatPhone(value);\n  await nextTick();\n  const el = field.value?.input;\n  if (el && el.value !== shown.value) el.value = shown.value;\n}\n\ndefineExpose({\n  input: computed(() => field.value?.input ?? null),\n  focus: () => field.value?.focus(),\n});\n</script>\n\n<template>\n  <ETextField\n    :id=\"id\"\n    ref=\"field\"\n    class=\"e-phone\"\n    type=\"tel\"\n    inputmode=\"tel\"\n    autocomplete=\"tel\"\n    :label=\"label || t('phone')\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :placeholder=\"placeholder\"\n    :required=\"required\"\n    :optional=\"optional\"\n    :disabled=\"disabled\"\n    :name=\"name\"\n    :model-value=\"shown\"\n    @update:model-value=\"onInput\"\n  />\n</template>\n\n<style>\n@layer e.composites {\n  .e-phone .e-input {\n    font-variant-numeric: tabular-nums;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAMA,IAAMU,IAAQC,GAwBRC,IAAQZ,EAAmBW,GAAA,YAAgB,GAE3CG,IAAIC,EAAY,GAChBC,IAASC,EAAU,GACnBC,IAAQC,EAA4C,IAAI,GAExDC,IAAQC,QAAeX,EAAM,WAAW,UAAU,KAAKM,EAAO,MAAM,IAAI,OAAO,OAAO;EAE5F,SAASM,EAAY,GAAwC;GAC3D,IAAIC,IAAS,OAAOC,KAAO,EAAE,CAAC,CAAC,QAAQ,OAAO,EAAE;GAMhD,OALIJ,EAAM,UAAU,QAChBG,EAAO,SAAS,MAAMA,EAAO,OAAO,CAAC,MAAM,QAAK,IAASA,EAAO,MAAM,CAAC,IAC3E,IAASA,EAAO,MAAM,GAAG,EAAE,GACvBA,EAAO,SAAS,IAAUA,IAC1BA,EAAO,SAAS,IAAU,IAAIA,EAAO,MAAM,GAAG,CAAC,EAAE,IAAIA,EAAO,MAAM,CAAC,MAChE,IAAIA,EAAO,MAAM,GAAG,CAAC,EAAE,IAAIA,EAAO,MAAM,GAAG,CAAC,EAAE,GAAGA,EAAO,MAAM,CAAC,OALrC,OAAOC,KAAO,EAAE;EAMnD;EAEA,IAAMC,IAAQJ,QAAeC,EAAYV,EAAM,KAAK,CAAC;EAErD,eAAec,EAAQ,GAAe;GAEpC,AADA,EAAM,QAAQJ,EAAYK,CAAK,GAC/B,MAAMC,EAAS;GACf,IAAMC,IAAKX,EAAM,OAAO;GACxB,AAAIW,KAAMA,EAAG,UAAUJ,EAAM,UAAO,EAAG,QAAQA,EAAM;EACvD;E,OAEAhB,EAAa;GACX,OAAOY,QAAeH,EAAM,OAAO,SAAS,IAAI;GAChD,aAAaA,EAAM,OAAO,MAAM;EAClC,CAAC,I,UAICjB,EAAA,GAAAC,EAkBEC,GAAA;GAjBC,IAAIQ,EAAA;GACD,SAAA;GAAJ,KAAIO;GACJ,OAAM;GACN,MAAK;GACL,WAAU;GACV,cAAa;GACZ,OAAOP,EAAA,SAASP,EAAAU,CAAA,CAAC,CAAA,OAAA;GACjB,cAAYH,EAAA;GACZ,MAAMA,EAAA;GACN,OAAOA,EAAA;GACP,aAAaA,EAAA;GACb,UAAUA,EAAA;GACV,UAAUA,EAAA;GACV,UAAUA,EAAA;GACV,MAAMA,EAAA;GACN,eAAac,EAAA;GACb,uBAAoBC"}

package/dist/components/PhoneField/index.d.ts

@@ -0,0 +1 @@
+export { default as EPhoneField } from './EPhoneField.vue.js';

package/dist/components/Popover/EPopover.js

@@ -0,0 +1,8 @@
+import e from "./EPopover.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                         */
+//#region src/components/Popover/EPopover.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=EPopover.js.map

package/dist/components/Popover/EPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EPopover.js","names":["_sfc_main","EPopover_vue_vue_type_script_setup_true_lang_default","EPopover_default"],"sources":["../../../src/components/Popover/EPopover.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { nextTick, ref, watch } from \"vue\";\nimport { PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from \"reka-ui\";\nimport EActions from \"../Actions/EActions.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EIconButton from \"../IconButton/EIconButton.vue\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\nimport \"../Select/panel.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nwithDefaults(\n  defineProps<{\n    /** Names the panel for screen readers (when there is no `title`) and is read after the term. */\n    label: string;\n    /** Adds a title row with this title and a Close button. */\n    title?: string;\n    /** The level of the title's heading, so it fits the page outline. Default 3. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  }>(),\n  { headingLevel: 3 },\n);\n\ndefineSlots<{\n  /** The term, shown with a dotted underline and an info glyph. */\n  trigger(): unknown;\n  /** The explanation. Keep it short; use a Dialog when the reader must decide something. */\n  default(): unknown;\n  /** Buttons in a tinted footer, left-aligned, the main action first. They stack full width on a phone. */\n  actions?(): unknown;\n}>();\n\nconst open = defineModel<boolean>({ default: false });\n\nconst t = useMessages();\nconst portal = usePortalTarget();\nconst id = useUid();\n\nconst trigger = ref<HTMLElement | null>(null);\nwatch(\n  open,\n  async (isOpen) => {\n    if (!isOpen) return;\n    await nextTick();\n    document\n      .getElementById(trigger.value?.getAttribute(\"aria-controls\") ?? \"\")\n      ?.setAttribute(\"aria-labelledby\", `${id.value}-title`);\n  },\n  { flush: \"post\" },\n);\n</script>\n\n<template>\n  <PopoverRoot v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <button ref=\"trigger\" type=\"button\" class=\"e-linkbtn\" v-bind=\"$attrs\">\n        <EIcon name=\"info\" small />\n        <slot name=\"trigger\" />\n        <span class=\"e-sr\">, {{ label }}</span>\n      </button>\n    </PopoverTrigger>\n    <PopoverPortal :to=\"portal\">\n      <PopoverContent class=\"e-popover e-root\" side=\"bottom\" align=\"start\" :side-offset=\"8\" :collision-padding=\"16\">\n        <div v-if=\"title\" class=\"e-pop-head\">\n          <component :is=\"`h${headingLevel}`\" :id=\"`${id}-title`\" class=\"e-pop-title\">{{ title }}</component>\n          <PopoverClose as-child>\n            <EIconButton icon=\"x\" :label=\"t('close')\" />\n          </PopoverClose>\n        </div>\n        <span v-else :id=\"`${id}-title`\" class=\"e-sr\">{{ label }}</span>\n        <div class=\"e-pop-body\"><slot /></div>\n        <EActions v-if=\"$slots['actions']\" bar><slot name=\"actions\" /></EActions>\n      </PopoverContent>\n    </PopoverPortal>\n  </PopoverRoot>\n</template>\n\n<style>\n@layer e.containers {\n  .e-linkbtn {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-1);\n    position: relative;\n    min-height: 28px;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    color: var(--e-primary);\n    font: 500 var(--e-text-sm) / 1.3 var(--e-font-sans);\n    text-decoration: underline dotted;\n    text-decoration-color: currentcolor;\n    text-underline-offset: 4px;\n    text-decoration-thickness: 2px;\n    cursor: help;\n  }\n\n  .e-linkbtn::after {\n    content: \"\";\n    position: absolute;\n    inset: -8px -4px;\n  }\n\n  .e-linkbtn:hover,\n  .e-linkbtn:active {\n    color: var(--e-ink);\n  }\n\n  .e-pop-head {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--e-space-2);\n    padding: var(--e-space-1) var(--e-space-1) 0 var(--e-space-4);\n  }\n\n  .e-pop-title {\n    margin: 0;\n    font: 600 var(--e-text-xs) / 1.2 var(--e-font-mono);\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: var(--e-muted);\n  }\n\n  .e-pop-body {\n    padding: var(--e-space-3) var(--e-space-4) var(--e-space-4);\n    font: 400 var(--e-text-md) / 1.5 var(--e-font-sans);\n  }\n\n  .e-pop-head + .e-pop-body {\n    padding-top: var(--e-space-1);\n  }\n\n  @media print {\n    .e-linkbtn {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Popover/EPopover.vue.d.ts

@@ -0,0 +1,35 @@
+type __VLS_Props = {
+    /** Names the panel for screen readers (when there is no `title`) and is read after the term. */
+    label: string;
+    /** Adds a title row with this title and a Close button. */
+    title?: string;
+    /** The level of the title's heading, so it fits the page outline. Default 3. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+};
+type __VLS_Slots = {
+    /** The term, shown with a dotted underline and an info glyph. */
+    trigger(): unknown;
+    /** The explanation. Keep it short; use a Dialog when the reader must decide something. */
+    default(): unknown;
+    /** Buttons in a tinted footer, left-aligned, the main action first. They stack full width on a phone. */
+    actions?(): unknown;
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    headingLevel: 1 | 2 | 3 | 4 | 5 | 6;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};