@eos-ui/vue 0.0.0-stage → 0.1.0

package/dist/components/SignaturePad/ESignaturePad.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,133 @@
+/* empty css                */
+import { useMessages as e } from "../../config.js";
+import { useUid as t } from "../../composables/useUid.js";
+import n from "../Icon/EIcon.js";
+import r from "../Button/EButton.js";
+import { createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, mergeModels as u, normalizeStyle as d, onMounted as f, openBlock as p, ref as m, toDisplayString as h, unref as g, useModel as _, watch as v, withCtx as y } from "vue";
+import { useResizeObserver as b } from "@vueuse/core";
+//#region src/components/SignaturePad/ESignaturePad.vue?vue&type=script&setup=true&lang.ts
+var x = { class: "e-pad" }, S = ["data-empty"], C = [
+	"id",
+	"aria-label",
+	"aria-describedby"
+], w = {
+	key: 0,
+	class: "e-pad-placeholder",
+	"aria-hidden": "true"
+}, T = { class: "e-pad-foot" }, E = ["id"], D = /*@__PURE__*/ l({
+	__name: "ESignaturePad",
+	props: /*@__PURE__*/ u({
+		height: { default: 160 },
+		disabled: { type: Boolean },
+		id: {}
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(l, { expose: u }) {
+		let D = l, O = _(l, "modelValue"), k = e(), A = t(() => D.id), j = m(null), M = m(!O.value), N = [], P = null;
+		function F(e, t) {
+			e.lineWidth = 2.5, e.lineCap = "round", e.lineJoin = "round", e.strokeStyle = t, e.fillStyle = t;
+			for (let t of N) {
+				let [n, ...r] = t;
+				if (n) {
+					e.beginPath(), e.arc(n.x, n.y, 1.2, 0, 6.3), e.fill(), e.beginPath(), e.moveTo(n.x, n.y);
+					for (let t of r) e.lineTo(t.x, t.y);
+					e.stroke();
+				}
+			}
+		}
+		function I() {
+			let e = j.value;
+			if (!e) return;
+			let t = window.devicePixelRatio || 1;
+			e.width = Math.round((e.clientWidth || 320) * t), e.height = Math.round(D.height * t);
+			let n = e.getContext("2d");
+			n && (n.scale(t, t), F(n, getComputedStyle(e).color));
+		}
+		f(I), b(j, I);
+		function L(e) {
+			let t = j.value.getBoundingClientRect();
+			return {
+				x: e.clientX - t.left,
+				y: e.clientY - t.top
+			};
+		}
+		function R(e) {
+			if (D.disabled) return;
+			e.preventDefault();
+			try {
+				j.value.setPointerCapture(e.pointerId);
+			} catch {}
+			let t = L(e);
+			P = [t], N.push(P);
+			let n = j.value.getContext("2d");
+			n.fillStyle = getComputedStyle(j.value).color, n.beginPath(), n.arc(t.x, t.y, 1.2, 0, 6.3), n.fill();
+		}
+		function z(e) {
+			if (!P) return;
+			let t = P[P.length - 1], n = L(e);
+			P.push(n);
+			let r = j.value.getContext("2d");
+			r.strokeStyle = getComputedStyle(j.value).color, r.beginPath(), r.moveTo(t.x, t.y), r.lineTo(n.x, n.y), r.stroke();
+		}
+		function B() {
+			let e = j.value, t = document.createElement("canvas");
+			t.width = e.width, t.height = e.height;
+			let n = t.getContext("2d");
+			return n.scale(e.width / (e.clientWidth || 320), e.height / D.height), F(n, "black"), t.toDataURL("image/png");
+		}
+		function V() {
+			P && (P = null, M.value = !1, O.value = B());
+		}
+		function H() {
+			N.length = 0, P = null, M.value = !0;
+			let e = j.value, t = e?.getContext("2d");
+			e && t && (t.save(), t.setTransform(1, 0, 0, 1, 0, 0), t.clearRect(0, 0, e.width, e.height), t.restore());
+		}
+		function U() {
+			H(), O.value = "";
+		}
+		return v(O, (e) => {
+			!e && !M.value && H();
+		}), u({
+			clear: U,
+			canvas: j
+		}), (e, t) => (p(), a("div", x, [o("div", {
+			class: "e-pad-surface",
+			"data-empty": M.value ? "" : void 0
+		}, [o("canvas", {
+			id: g(A),
+			ref_key: "canvas",
+			ref: j,
+			class: "e-pad-canvas",
+			role: "img",
+			style: d({
+				height: `${l.height}px`,
+				color: "var(--e-ink)"
+			}),
+			"aria-label": g(k)("drawSignature"),
+			"aria-describedby": `${g(A)}-hint`,
+			onPointerdown: R,
+			onPointermove: z,
+			onPointerup: V,
+			onPointercancel: V
+		}, null, 44, C), M.value ? (p(), a("span", w, [c(n, { name: "signature" }), s(" " + h(g(k)("signEmpty")), 1)])) : i("", !0)], 8, S), o("div", T, [o("p", {
+			id: `${g(A)}-hint`,
+			class: "e-field-hint"
+		}, h(g(k)("signDrawHint")), 9, E), c(r, {
+			variant: "quiet",
+			icon: "eraser",
+			disabled: M.value || l.disabled,
+			onClick: U
+		}, {
+			default: y(() => [s(h(g(k)("signClear")), 1)]),
+			_: 1
+		}, 8, ["disabled"])])]));
+	}
+});
+//#endregion
+export { D as default };
+
+//# sourceMappingURL=ESignaturePad.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/SignaturePad/ESignaturePad.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ESignaturePad.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_createElementVNode","_unref","_normalizeStyle","_createVNode","EIcon","_createTextVNode","_toDisplayString","_createCommentVNode","EButton","_withCtx","EIcon_default","EButton_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","ESignaturePad_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","props","__props","model","useModel","t","useMessages","id","useUid","canvas","ref","empty","strokes","current","paint","color","stroke","first","rest","ctx","p","setup","cv","dpr","onMounted","useResizeObserver","point","r","down","move","from","exportImage","out","up","wipe","clear","watch","v","openBlock","createElementBlock","createElementVNode","unref","normalizeStyle","createVNode","createTextVNode","toDisplayString","createCommentVNode","withCtx"],"sources":["../../../src/components/SignaturePad/ESignaturePad.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, ref, watch } from \"vue\";\nimport { useResizeObserver } from \"@vueuse/core\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EButton from \"../Button/EButton.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The height of the drawing area in pixels. */\n    height?: number;\n    disabled?: boolean;\n    /** The id of the canvas. Generated when left out. */\n    id?: string;\n  }>(),\n  { height: 160 },\n);\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst id = useUid(() => props.id);\nconst canvas = ref<HTMLCanvasElement | null>(null);\nconst empty = ref(!model.value);\n\ninterface Point {\n  x: number;\n  y: number;\n}\nconst strokes: Point[][] = [];\nlet current: Point[] | null = null;\n\nfunction paint(ctx: CanvasRenderingContext2D, color: string) {\n  ctx.lineWidth = 2.5;\n  ctx.lineCap = \"round\";\n  ctx.lineJoin = \"round\";\n  ctx.strokeStyle = color;\n  ctx.fillStyle = color;\n  for (const stroke of strokes) {\n    const [first, ...rest] = stroke;\n    if (!first) continue;\n    ctx.beginPath();\n    ctx.arc(first.x, first.y, 1.2, 0, 6.3);\n    ctx.fill();\n    ctx.beginPath();\n    ctx.moveTo(first.x, first.y);\n    for (const p of rest) ctx.lineTo(p.x, p.y);\n    ctx.stroke();\n  }\n}\n\nfunction setup() {\n  const cv = canvas.value;\n  if (!cv) return;\n  const dpr = window.devicePixelRatio || 1;\n  cv.width = Math.round((cv.clientWidth || 320) * dpr);\n  cv.height = Math.round(props.height * dpr);\n  const ctx = cv.getContext(\"2d\");\n  if (!ctx) return;\n  ctx.scale(dpr, dpr);\n  paint(ctx, getComputedStyle(cv).color);\n}\nonMounted(setup);\nuseResizeObserver(canvas, setup);\n\nfunction point(e: PointerEvent): Point {\n  const r = canvas.value!.getBoundingClientRect();\n  return { x: e.clientX - r.left, y: e.clientY - r.top };\n}\n\nfunction down(e: PointerEvent) {\n  if (props.disabled) return;\n  e.preventDefault();\n  try {\n    canvas.value!.setPointerCapture(e.pointerId);\n  } catch {}\n  const p = point(e);\n  current = [p];\n  strokes.push(current);\n  const ctx = canvas.value!.getContext(\"2d\")!;\n  ctx.fillStyle = getComputedStyle(canvas.value!).color;\n  ctx.beginPath();\n  ctx.arc(p.x, p.y, 1.2, 0, 6.3);\n  ctx.fill();\n}\n\nfunction move(e: PointerEvent) {\n  if (!current) return;\n  const from = current[current.length - 1]!;\n  const p = point(e);\n  current.push(p);\n  const ctx = canvas.value!.getContext(\"2d\")!;\n  ctx.strokeStyle = getComputedStyle(canvas.value!).color;\n  ctx.beginPath();\n  ctx.moveTo(from.x, from.y);\n  ctx.lineTo(p.x, p.y);\n  ctx.stroke();\n}\n\nfunction exportImage(): string {\n  const cv = canvas.value!;\n  const out = document.createElement(\"canvas\");\n  out.width = cv.width;\n  out.height = cv.height;\n  const ctx = out.getContext(\"2d\")!;\n  ctx.scale(cv.width / (cv.clientWidth || 320), cv.height / props.height);\n  paint(ctx, \"black\");\n  return out.toDataURL(\"image/png\");\n}\n\nfunction up() {\n  if (!current) return;\n  current = null;\n  empty.value = false;\n  model.value = exportImage();\n}\n\nfunction wipe() {\n  strokes.length = 0;\n  current = null;\n  empty.value = true;\n  const cv = canvas.value;\n  const ctx = cv?.getContext(\"2d\");\n  if (cv && ctx) {\n    ctx.save();\n    ctx.setTransform(1, 0, 0, 1, 0, 0);\n    ctx.clearRect(0, 0, cv.width, cv.height);\n    ctx.restore();\n  }\n}\n\nfunction clear() {\n  wipe();\n  model.value = \"\";\n}\n\nwatch(model, (v) => {\n  if (!v && !empty.value) wipe();\n});\n\ndefineExpose({\n  clear,\n  canvas,\n});\n</script>\n\n<template>\n  <div class=\"e-pad\">\n    <div class=\"e-pad-surface\" :data-empty=\"empty ? '' : undefined\">\n      <canvas\n        :id=\"id\"\n        ref=\"canvas\"\n        class=\"e-pad-canvas\"\n        role=\"img\"\n        :style=\"{ height: `${height}px`, color: 'var(--e-ink)' }\"\n        :aria-label=\"t('drawSignature')\"\n        :aria-describedby=\"`${id}-hint`\"\n        @pointerdown=\"down\"\n        @pointermove=\"move\"\n        @pointerup=\"up\"\n        @pointercancel=\"up\"\n      />\n      <span v-if=\"empty\" class=\"e-pad-placeholder\" aria-hidden=\"true\">\n        <EIcon name=\"signature\" />\n        {{ t(\"signEmpty\") }}\n      </span>\n    </div>\n    <div class=\"e-pad-foot\">\n      <p :id=\"`${id}-hint`\" class=\"e-field-hint\">{{ t(\"signDrawHint\") }}</p>\n      <EButton variant=\"quiet\" icon=\"eraser\" :disabled=\"empty || disabled\" @click=\"clear\">\n        {{ t(\"signClear\") }}\n      </EButton>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer e.composites {\n  .e-pad {\n    display: grid;\n    gap: var(--e-space-2);\n  }\n\n  .e-pad-surface {\n    position: relative;\n    overflow: hidden;\n    border: var(--e-stroke-edge) solid var(--e-border-strong);\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    box-shadow: var(--e-well);\n  }\n\n  .e-pad-surface::after {\n    content: \"\";\n    position: absolute;\n    inset-inline: var(--e-space-4);\n    bottom: 36px;\n    border-bottom: 2px solid var(--e-ink);\n    pointer-events: none;\n  }\n\n  .e-pad-canvas {\n    display: block;\n    width: 100%;\n    touch-action: none;\n    cursor: crosshair;\n  }\n\n  .e-pad-placeholder {\n    position: absolute;\n    inset: 0;\n    display: grid;\n    place-content: center;\n    justify-items: center;\n    gap: var(--e-space-2);\n    color: var(--e-muted);\n    font: 400 var(--e-text-sm)/1.4 var(--e-font-sans);\n    pointer-events: none;\n  }\n\n  .e-pad-foot {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--e-space-2) var(--e-space-4);\n  }\n\n  .e-pad-foot .e-field-hint {\n    margin: 0;\n    flex: 1 1 14rem;\n  }\n}\n</style>\n"],"mappings":"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"}

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

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

package/dist/components/Skeleton/ESkeleton.js

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

package/dist/components/Skeleton/ESkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ESkeleton.js","names":["_sfc_main","ESkeleton_vue_vue_type_script_setup_true_lang_default","ESkeleton_default"],"sources":["../../../src/components/Skeleton/ESkeleton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** Height in px, or any CSS length. Defaults to 96. Make it the size of what is coming. */\n  height?: number | string;\n  /** Width in px, or any CSS length. Defaults to the full width. */\n  width?: number | string;\n  /** A round block, for a photo. */\n  circle?: boolean;\n}>();\n\nconst t = useMessages();\nconst px = (v: number | string) => (typeof v === \"number\" ? `${v}px` : v);\nconst size = computed(() => ({\n  height: px(props.height ?? 96),\n  ...(props.width != null ? { width: px(props.width) } : {}),\n}));\n</script>\n\n<template>\n  <div class=\"e-skeleton\" :class=\"{ 'e-skeleton--circle': circle }\" :style=\"size\" role=\"status\" aria-busy=\"true\">\n    <span class=\"e-sr\">{{ t(\"loading\") }}</span>\n  </div>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-skeleton {\n    display: block;\n    width: 100%;\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 0 0 1px var(--e-border);\n    animation: e-pulse 1.4s ease-in-out infinite;\n  }\n\n  .e-skel {\n    display: block;\n    height: 14px;\n    border-radius: var(--e-radius-sm);\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 0 0 1px var(--e-border);\n    animation: e-pulse 1.4s ease-in-out infinite;\n  }\n\n  .e-skeleton--circle {\n    width: auto;\n    aspect-ratio: 1;\n    border-radius: 50%;\n  }\n\n  @keyframes e-pulse {\n    50% {\n      opacity: 0.5;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-skel,\n    .e-skeleton {\n      animation: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Skeleton/ESkeleton.vue.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    /** Height in px, or any CSS length. Defaults to 96. Make it the size of what is coming. */
+    height?: number | string;
+    /** Width in px, or any CSS length. Defaults to the full width. */
+    width?: number | string;
+    /** A round block, for a photo. */
+    circle?: boolean;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/Skeleton/ESkeleton.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,28 @@
+/* empty css                */
+import { useMessages as e } from "../../config.js";
+import { computed as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, normalizeStyle as o, openBlock as s, toDisplayString as c, unref as l } from "vue";
+//#region src/components/Skeleton/ESkeleton.vue?vue&type=script&setup=true&lang.ts
+var u = { class: "e-sr" }, d = /*@__PURE__*/ i({
+	__name: "ESkeleton",
+	props: {
+		height: {},
+		width: {},
+		circle: { type: Boolean }
+	},
+	setup(i) {
+		let d = i, f = e(), p = (e) => typeof e == "number" ? `${e}px` : e, m = t(() => ({
+			height: p(d.height ?? 96),
+			...d.width == null ? {} : { width: p(d.width) }
+		}));
+		return (e, t) => (s(), n("div", {
+			class: a(["e-skeleton", { "e-skeleton--circle": i.circle }]),
+			style: o(m.value),
+			role: "status",
+			"aria-busy": "true"
+		}, [r("span", u, c(l(f)("loading")), 1)], 6));
+	}
+});
+//#endregion
+export { d as default };
+
+//# sourceMappingURL=ESkeleton.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/Skeleton/ESkeleton.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ESkeleton.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle","_createElementVNode","_toDisplayString","_unref","_hoisted_1","ESkeleton_vue_vue_type_script_setup_true_lang_default","props","__props","t","useMessages","px","v","size","computed","openBlock","createElementBlock","normalizeClass","normalizeStyle","createElementVNode","toDisplayString","unref"],"sources":["../../../src/components/Skeleton/ESkeleton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** Height in px, or any CSS length. Defaults to 96. Make it the size of what is coming. */\n  height?: number | string;\n  /** Width in px, or any CSS length. Defaults to the full width. */\n  width?: number | string;\n  /** A round block, for a photo. */\n  circle?: boolean;\n}>();\n\nconst t = useMessages();\nconst px = (v: number | string) => (typeof v === \"number\" ? `${v}px` : v);\nconst size = computed(() => ({\n  height: px(props.height ?? 96),\n  ...(props.width != null ? { width: px(props.width) } : {}),\n}));\n</script>\n\n<template>\n  <div class=\"e-skeleton\" :class=\"{ 'e-skeleton--circle': circle }\" :style=\"size\" role=\"status\" aria-busy=\"true\">\n    <span class=\"e-sr\">{{ t(\"loading\") }}</span>\n  </div>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-skeleton {\n    display: block;\n    width: 100%;\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 0 0 1px var(--e-border);\n    animation: e-pulse 1.4s ease-in-out infinite;\n  }\n\n  .e-skel {\n    display: block;\n    height: 14px;\n    border-radius: var(--e-radius-sm);\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 0 0 1px var(--e-border);\n    animation: e-pulse 1.4s ease-in-out infinite;\n  }\n\n  .e-skeleton--circle {\n    width: auto;\n    aspect-ratio: 1;\n    border-radius: 50%;\n  }\n\n  @keyframes e-pulse {\n    50% {\n      opacity: 0.5;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-skel,\n    .e-skeleton {\n      animation: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;EAKA,IAAMS,IAAQC,GASRC,IAAIC,EAAY,GAChBC,KAAM,MAAwB,OAAOC,KAAM,WAAW,GAAGA,EAAE,MAAMA,GACjEC,IAAOC,SAAgB;GAC3B,QAAQH,EAAGJ,EAAM,UAAU,EAAE;GAC7B,GAAIA,EAAM,SAAS,OAAoC,CAAC,IAA9B,EAAE,OAAOI,EAAGJ,EAAM,KAAK,EAAE;EACrD,EAAE;E,kBAIAT,EAAA,GAAAC,EAEM,OAAA;GAFD,OAAKC,EAAA,CAAC,cAAY,EAAA,sBAAiCQ,EAAA,OAAM,CAAA,CAAA;GAAK,OAAKP,EAAEY,EAAA,KAAI;GAAE,MAAK;GAAS,aAAU;E,IACtGX,EAA4C,QAA5CG,GAA4CF,EAAtBC,EAAAK,CAAA,CAAC,CAAA,SAAA,CAAA,GAAA,CAAA,C"}

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

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

package/dist/components/SkipLink/ESkipLink.js

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

package/dist/components/SkipLink/ESkipLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ESkipLink.js","names":["_sfc_main","ESkipLink_vue_vue_type_script_setup_true_lang_default","ESkipLink_default"],"sources":["../../../src/components/SkipLink/ESkipLink.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { nextTick } from \"vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The in-page target, `#main` by default. It must match the `id` of the main content. */\n    href?: string;\n  }>(),\n  { href: \"#main\" },\n);\n\ndefineSlots<{\n  /** The text. Defaults to \"Skip to main content\". */\n  default?(): unknown;\n}>();\n\nconst t = useMessages();\n\nasync function go(event: MouseEvent) {\n  if (event.defaultPrevented || !props.href.startsWith(\"#\") || props.href.length < 2) return;\n  await nextTick();\n  const target = document.getElementById(decodeURIComponent(props.href.slice(1)));\n  if (target && document.activeElement !== target) target.focus();\n}\n</script>\n\n<template>\n  <a class=\"e-skip\" :href=\"href\" @click=\"go\">\n    <slot>{{ t(\"skipToMain\") }}</slot>\n  </a>\n</template>\n\n<style>\n@layer e.page {\n  .e-skip {\n    position: absolute;\n    inset-inline-start: var(--e-space-4);\n    top: -100px;\n    z-index: var(--e-z-toast);\n    display: inline-flex;\n    align-items: center;\n    height: var(--e-control-height);\n    padding: 0 var(--e-space-4);\n    border-radius: var(--e-radius-md);\n    background: var(--e-primary);\n    color: var(--e-on-primary);\n    font: 600 var(--e-text-md) / 1 var(--e-font-sans);\n    text-decoration: none;\n  }\n\n  .e-skip:focus {\n    top: var(--e-space-2);\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  @media print {\n    .e-skip {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/SkipLink/ESkipLink.vue.d.ts

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    /** The in-page target, `#main` by default. It must match the `id` of the main content. */
+    href?: string;
+};
+type __VLS_Slots = {
+    /** The text. Defaults to "Skip to main content". */
+    default?(): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    href: string;
+}, {}, {}, {}, 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/SkipLink/ESkipLink.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,26 @@
+/* empty css                */
+import { useMessages as e } from "../../config.js";
+import { createElementBlock as t, createTextVNode as n, defineComponent as r, nextTick as i, openBlock as a, renderSlot as o, toDisplayString as s, unref as c } from "vue";
+//#region src/components/SkipLink/ESkipLink.vue?vue&type=script&setup=true&lang.ts
+var l = ["href"], u = /*@__PURE__*/ r({
+	__name: "ESkipLink",
+	props: { href: { default: "#main" } },
+	setup(r) {
+		let u = r, d = e();
+		async function f(e) {
+			if (e.defaultPrevented || !u.href.startsWith("#") || u.href.length < 2) return;
+			await i();
+			let t = document.getElementById(decodeURIComponent(u.href.slice(1)));
+			t && document.activeElement !== t && t.focus();
+		}
+		return (e, i) => (a(), t("a", {
+			class: "e-skip",
+			href: r.href,
+			onClick: f
+		}, [o(e.$slots, "default", {}, () => [n(s(c(d)("skipToMain")), 1)])], 8, l));
+	}
+});
+//#endregion
+export { u as default };
+
+//# sourceMappingURL=ESkipLink.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/SkipLink/ESkipLink.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ESkipLink.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_renderSlot","_createTextVNode","_toDisplayString","_unref","_hoisted_1","ESkipLink_vue_vue_type_script_setup_true_lang_default","props","__props","t","useMessages","go","event","nextTick","target","openBlock","createElementBlock","renderSlot","_ctx","createTextVNode","toDisplayString","unref"],"sources":["../../../src/components/SkipLink/ESkipLink.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { nextTick } from \"vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The in-page target, `#main` by default. It must match the `id` of the main content. */\n    href?: string;\n  }>(),\n  { href: \"#main\" },\n);\n\ndefineSlots<{\n  /** The text. Defaults to \"Skip to main content\". */\n  default?(): unknown;\n}>();\n\nconst t = useMessages();\n\nasync function go(event: MouseEvent) {\n  if (event.defaultPrevented || !props.href.startsWith(\"#\") || props.href.length < 2) return;\n  await nextTick();\n  const target = document.getElementById(decodeURIComponent(props.href.slice(1)));\n  if (target && document.activeElement !== target) target.focus();\n}\n</script>\n\n<template>\n  <a class=\"e-skip\" :href=\"href\" @click=\"go\">\n    <slot>{{ t(\"skipToMain\") }}</slot>\n  </a>\n</template>\n\n<style>\n@layer e.page {\n  .e-skip {\n    position: absolute;\n    inset-inline-start: var(--e-space-4);\n    top: -100px;\n    z-index: var(--e-z-toast);\n    display: inline-flex;\n    align-items: center;\n    height: var(--e-control-height);\n    padding: 0 var(--e-space-4);\n    border-radius: var(--e-radius-md);\n    background: var(--e-primary);\n    color: var(--e-on-primary);\n    font: 600 var(--e-text-md) / 1 var(--e-font-sans);\n    text-decoration: none;\n  }\n\n  .e-skip:focus {\n    top: var(--e-space-2);\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  @media print {\n    .e-skip {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;EAKA,IAAMQ,IAAQC,GAaRC,IAAIC,EAAY;EAEtB,eAAeC,EAAG,GAAmB;GACnC,IAAIC,EAAM,oBAAoB,CAACL,EAAM,KAAK,WAAW,GAAG,KAAKA,EAAM,KAAK,SAAS,GAAG;GACpF,MAAMM,EAAS;GACf,IAAMC,IAAS,SAAS,eAAe,mBAAmBP,EAAM,KAAK,MAAM,CAAC,CAAC,CAAC;GAC9E,AAAIO,KAAU,SAAS,kBAAkBA,KAAQA,EAAO,MAAM;EAChE;E,kBAIEf,EAAA,GAAAC,EAEI,KAAA;GAFD,OAAM;GAAU,MAAMQ,EAAA;GAAO,SAAOG;E,IACrCV,EAAkCiB,EAAA,QAAA,WAAA,CAAA,SAAA,CAAzBhB,EAAAC,EAAAC,EAAAK,CAAA,CAAC,CAAA,YAAA,CAAA,GAAA,CAAA,C"}

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

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

package/dist/components/SlotPicker/ESlotPicker.js

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

package/dist/components/SlotPicker/ESlotPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ESlotPicker.js","names":["_sfc_main","ESlotPicker_vue_vue_type_script_setup_true_lang_default","ESlotPicker_default"],"sources":["../../../src/components/SlotPicker/ESlotPicker.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface SlotOption {\n  value: string;\n  label: string;\n  /** A taken time: dashed and struck through, and not selectable. */\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EFieldset from \"../Fieldset/EFieldset.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** The question the times answer, usually the day. Names the group for screen readers. */\n  label: string;\n  /** The times. A string is both value and label. */\n  options: (string | SlotOption)[];\n  /** Shown when the day has no times. Default \"No times are open on this day.\" */\n  emptyText?: string;\n  /** Help that is announced with the group. */\n  hint?: string;\n  /** What to fix. Replaces the hint and is announced with the group. */\n  error?: string;\n  /** The `required` attribute and the word \"Required\". */\n  required?: boolean;\n  /** A word beside the legend. Flag whichever is rarer. */\n  optional?: boolean;\n  /** Disables every time. */\n  disabled?: boolean;\n  /** The name the radios share, submitted with a form. Generated when left out. */\n  name?: string;\n}>();\n\nconst model = defineModel<string | null>({ default: null });\n\nconst t = useMessages();\nconst name = useUid(() => props.name);\nconst times = computed<SlotOption[]>(() =>\n  props.options.map((s) => (typeof s === \"string\" ? { value: s, label: s } : s)),\n);\n</script>\n\n<template>\n  <EFieldset\n    :id=\"`${name}-fs`\"\n    bare\n    class=\"e-slots\"\n    legend-class=\"e-slots-legend\"\n    :legend=\"label\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n    :disabled=\"disabled\"\n  >\n    <div v-if=\"times.length\" class=\"e-slots-grid\">\n      <label v-for=\"o in times\" :key=\"o.value\" class=\"e-slot\" :class=\"{ 'e-slot--off': o.disabled }\">\n        <input\n          type=\"radio\"\n          class=\"e-slot-input\"\n          :name=\"name\"\n          :value=\"o.value\"\n          :checked=\"model === o.value\"\n          :disabled=\"o.disabled\"\n          :required=\"required\"\n          @change=\"model = o.value\"\n        />\n        <span class=\"e-slot-text\">{{ o.label }}</span>\n      </label>\n    </div>\n    <p v-else class=\"e-field-hint\">{{ emptyText || t(\"noTimes\") }}</p>\n  </EFieldset>\n</template>\n\n<style>\n@layer e.controls {\n  .e-slots {\n    display: grid;\n    gap: var(--e-space-2);\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n\n  .e-slots-legend {\n    padding: 0;\n  }\n\n  .e-slots-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));\n    gap: var(--e-space-2);\n  }\n\n  .e-slot {\n    position: relative;\n    display: block;\n  }\n\n  .e-slot-input {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    margin: 0;\n    cursor: pointer;\n  }\n\n  .e-slot-text {\n    display: grid;\n    place-items: center;\n    height: var(--e-control-height);\n    border: var(--e-stroke-edge) solid var(--e-border-strong);\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    font: 500 var(--e-text-sm)/1 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\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-slot:hover .e-slot-text {\n    background: var(--e-surface-tint);\n    border-color: var(--e-ink);\n  }\n\n  .e-slot-input:checked + .e-slot-text {\n    background: var(--e-primary);\n    border-color: var(--e-primary);\n    border-bottom-color: color-mix(in srgb, var(--e-primary) 70%, #000);\n    border-bottom-width: calc(var(--e-stroke-edge) + var(--e-depth));\n    padding-top: var(--e-depth);\n    color: var(--e-on-primary);\n    font-weight: 600;\n  }\n\n  .e-slot-input:focus-visible + .e-slot-text {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-slot--off .e-slot-text {\n    border-style: dashed;\n    color: var(--e-muted);\n    text-decoration: line-through;\n    background: var(--e-surface-tint);\n    cursor: not-allowed;\n  }\n\n  .e-slot--off:hover .e-slot-text {\n    border-color: var(--e-border-strong);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/SlotPicker/ESlotPicker.vue.d.ts

@@ -0,0 +1,55 @@
+export interface SlotOption {
+    value: string;
+    label: string;
+    /** A taken time: dashed and struck through, and not selectable. */
+    disabled?: boolean;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<{
+    /** The question the times answer, usually the day. Names the group for screen readers. */
+    label: string;
+    /** The times. A string is both value and label. */
+    options: (string | SlotOption)[];
+    /** Shown when the day has no times. Default "No times are open on this day." */
+    emptyText?: string;
+    /** Help that is announced with the group. */
+    hint?: string;
+    /** What to fix. Replaces the hint and is announced with the group. */
+    error?: string;
+    /** The `required` attribute and the word "Required". */
+    required?: boolean;
+    /** A word beside the legend. Flag whichever is rarer. */
+    optional?: boolean;
+    /** Disables every time. */
+    disabled?: boolean;
+    /** The name the radios share, submitted with a form. Generated when left out. */
+    name?: string;
+} & {
+    modelValue?: string | null;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    /** The question the times answer, usually the day. Names the group for screen readers. */
+    label: string;
+    /** The times. A string is both value and label. */
+    options: (string | SlotOption)[];
+    /** Shown when the day has no times. Default "No times are open on this day." */
+    emptyText?: string;
+    /** Help that is announced with the group. */
+    hint?: string;
+    /** What to fix. Replaces the hint and is announced with the group. */
+    error?: string;
+    /** The `required` attribute and the word "Required". */
+    required?: boolean;
+    /** A word beside the legend. Flag whichever is rarer. */
+    optional?: boolean;
+    /** Disables every time. */
+    disabled?: boolean;
+    /** The name the radios share, submitted with a form. Generated when left out. */
+    name?: string;
+} & {
+    modelValue?: string | null;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/SlotPicker/ESlotPicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,82 @@
+/* empty css                */
+import { useMessages as e } from "../../config.js";
+import { useUid as t } from "../../composables/useUid.js";
+import n from "../Fieldset/EFieldset.js";
+import { Fragment as r, computed as i, createBlock as a, createElementBlock as o, createElementVNode as s, defineComponent as c, mergeModels as l, normalizeClass 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/SlotPicker/ESlotPicker.vue?vue&type=script&setup=true&lang.ts
+var _ = {
+	key: 0,
+	class: "e-slots-grid"
+}, v = [
+	"name",
+	"value",
+	"checked",
+	"disabled",
+	"required",
+	"onChange"
+], y = { class: "e-slot-text" }, b = {
+	key: 1,
+	class: "e-field-hint"
+}, x = /*@__PURE__*/ c({
+	__name: "ESlotPicker",
+	props: /*@__PURE__*/ l({
+		label: {},
+		options: {},
+		emptyText: {},
+		hint: {},
+		error: {},
+		required: { type: Boolean },
+		optional: { type: Boolean },
+		disabled: { type: Boolean },
+		name: {}
+	}, {
+		modelValue: { default: null },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(c) {
+		let l = c, x = h(c, "modelValue"), S = e(), C = t(() => l.name), w = i(() => l.options.map((e) => typeof e == "string" ? {
+			value: e,
+			label: e
+		} : e));
+		return (e, t) => (d(), a(n, {
+			id: `${m(C)}-fs`,
+			bare: "",
+			class: "e-slots",
+			"legend-class": "e-slots-legend",
+			legend: c.label,
+			hint: c.hint,
+			error: c.error,
+			required: c.required,
+			optional: c.optional,
+			disabled: c.disabled
+		}, {
+			default: g(() => [w.value.length ? (d(), o("div", _, [(d(!0), o(r, null, f(w.value, (e) => (d(), o("label", {
+				key: e.value,
+				class: u(["e-slot", { "e-slot--off": e.disabled }])
+			}, [s("input", {
+				type: "radio",
+				class: "e-slot-input",
+				name: m(C),
+				value: e.value,
+				checked: x.value === e.value,
+				disabled: e.disabled,
+				required: c.required,
+				onChange: (t) => x.value = e.value
+			}, null, 40, v), s("span", y, p(e.label), 1)], 2))), 128))])) : (d(), o("p", b, p(c.emptyText || m(S)("noTimes")), 1))]),
+			_: 1
+		}, 8, [
+			"id",
+			"legend",
+			"hint",
+			"error",
+			"required",
+			"optional",
+			"disabled"
+		]));
+	}
+});
+//#endregion
+export { x as default };
+
+//# sourceMappingURL=ESlotPicker.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/SlotPicker/ESlotPicker.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ESlotPicker.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","EFieldset","_unref","_withCtx","_createElementBlock","_Fragment","_renderList","_normalizeClass","_createElementVNode","_toDisplayString","EFieldset_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","ESlotPicker_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","props","__props","model","useModel","t","useMessages","name","useUid","times","computed","s","openBlock","createBlock","unref","withCtx","createElementBlock","Fragment","renderList","o","normalizeClass","createElementVNode","toDisplayString"],"sources":["../../../src/components/SlotPicker/ESlotPicker.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface SlotOption {\n  value: string;\n  label: string;\n  /** A taken time: dashed and struck through, and not selectable. */\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EFieldset from \"../Fieldset/EFieldset.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** The question the times answer, usually the day. Names the group for screen readers. */\n  label: string;\n  /** The times. A string is both value and label. */\n  options: (string | SlotOption)[];\n  /** Shown when the day has no times. Default \"No times are open on this day.\" */\n  emptyText?: string;\n  /** Help that is announced with the group. */\n  hint?: string;\n  /** What to fix. Replaces the hint and is announced with the group. */\n  error?: string;\n  /** The `required` attribute and the word \"Required\". */\n  required?: boolean;\n  /** A word beside the legend. Flag whichever is rarer. */\n  optional?: boolean;\n  /** Disables every time. */\n  disabled?: boolean;\n  /** The name the radios share, submitted with a form. Generated when left out. */\n  name?: string;\n}>();\n\nconst model = defineModel<string | null>({ default: null });\n\nconst t = useMessages();\nconst name = useUid(() => props.name);\nconst times = computed<SlotOption[]>(() =>\n  props.options.map((s) => (typeof s === \"string\" ? { value: s, label: s } : s)),\n);\n</script>\n\n<template>\n  <EFieldset\n    :id=\"`${name}-fs`\"\n    bare\n    class=\"e-slots\"\n    legend-class=\"e-slots-legend\"\n    :legend=\"label\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n    :disabled=\"disabled\"\n  >\n    <div v-if=\"times.length\" class=\"e-slots-grid\">\n      <label v-for=\"o in times\" :key=\"o.value\" class=\"e-slot\" :class=\"{ 'e-slot--off': o.disabled }\">\n        <input\n          type=\"radio\"\n          class=\"e-slot-input\"\n          :name=\"name\"\n          :value=\"o.value\"\n          :checked=\"model === o.value\"\n          :disabled=\"o.disabled\"\n          :required=\"required\"\n          @change=\"model = o.value\"\n        />\n        <span class=\"e-slot-text\">{{ o.label }}</span>\n      </label>\n    </div>\n    <p v-else class=\"e-field-hint\">{{ emptyText || t(\"noTimes\") }}</p>\n  </EFieldset>\n</template>\n\n<style>\n@layer e.controls {\n  .e-slots {\n    display: grid;\n    gap: var(--e-space-2);\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n\n  .e-slots-legend {\n    padding: 0;\n  }\n\n  .e-slots-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));\n    gap: var(--e-space-2);\n  }\n\n  .e-slot {\n    position: relative;\n    display: block;\n  }\n\n  .e-slot-input {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    margin: 0;\n    cursor: pointer;\n  }\n\n  .e-slot-text {\n    display: grid;\n    place-items: center;\n    height: var(--e-control-height);\n    border: var(--e-stroke-edge) solid var(--e-border-strong);\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    font: 500 var(--e-text-sm)/1 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\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-slot:hover .e-slot-text {\n    background: var(--e-surface-tint);\n    border-color: var(--e-ink);\n  }\n\n  .e-slot-input:checked + .e-slot-text {\n    background: var(--e-primary);\n    border-color: var(--e-primary);\n    border-bottom-color: color-mix(in srgb, var(--e-primary) 70%, #000);\n    border-bottom-width: calc(var(--e-stroke-edge) + var(--e-depth));\n    padding-top: var(--e-depth);\n    color: var(--e-on-primary);\n    font-weight: 600;\n  }\n\n  .e-slot-input:focus-visible + .e-slot-text {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-slot--off .e-slot-text {\n    border-style: dashed;\n    color: var(--e-muted);\n    text-decoration: line-through;\n    background: var(--e-surface-tint);\n    cursor: not-allowed;\n  }\n\n  .e-slot--off:hover .e-slot-text {\n    border-color: var(--e-border-strong);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgBA,IAAMoB,IAAQC,GAqBRC,IAAQtB,EAA0BqB,GAAA,YAAkB,GAEpDG,IAAIC,EAAY,GAChBC,IAAOC,QAAaP,EAAM,IAAI,GAC9BQ,IAAQC,QACZT,EAAM,QAAQ,KAAK,MAAO,OAAOU,KAAM,WAAW;GAAE,OAAOA;GAAG,OAAOA;EAAE,IAAIA,CAAE,CAC/E;E,kBAIE7B,EAAA,GAAAC,EA4BYC,GAAA;GA3BT,IAAE,GAAKC,EAAAsB,CAAA,EAAI;GACZ,MAAA;GACA,OAAM;GACN,gBAAa;GACZ,QAAQL,EAAA;GACR,MAAMA,EAAA;GACN,OAAOA,EAAA;GACP,UAAUA,EAAA;GACV,UAAUA,EAAA;GACV,UAAUA,EAAA;;GAEX,SAAAhB,QAcM,CAdKuB,EAAA,MAAM,UAAjB3B,EAAA,GAAAK,EAcM,OAdNO,GAcM,EAbJZ,EAAA,EAAA,GAAAK,EAYQC,GAAA,MAAAC,EAZWoB,EAAA,QAAL,OAAd3B,EAAA,GAAAK,EAYQ,SAAA;IAZmB,KAAKgC,EAAE;IAAO,OAAK7B,EAAA,CAAC,UAAQ,EAAA,eAA0B6B,EAAE,SAAQ,CAAA,CAAA;G,IACzF5B,EASE,SAAA;IARA,MAAK;IACL,OAAM;IACL,MAAMN,EAAAsB,CAAA;IACN,OAAOY,EAAE;IACT,SAAShB,EAAA,UAAUgB,EAAE;IACrB,UAAUA,EAAE;IACZ,UAAUjB,EAAA;IACV,WAAM,MAAE,EAAA,QAAQiB,EAAE;G,iBAErB5B,EAA8C,QAA9CK,GAA8CJ,EAAjB2B,EAAE,KAAK,GAAA,CAAA,C,qBAGxCrC,EAAA,GAAAK,EAAkE,KAAlEU,GAAkEL,EAAhCU,EAAA,aAAajB,EAAAoB,CAAA,CAAC,CAAA,SAAA,CAAA,GAAA,CAAA,E"}

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

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

package/dist/components/Spinner/ESpinner.js

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

package/dist/components/Spinner/ESpinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ESpinner.js","names":["_sfc_main","ESpinner_vue_vue_type_script_setup_true_lang_default","ESpinner_default"],"sources":["../../../src/components/Spinner/ESpinner.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\ndefineProps<{\n  /** Shown beside the ring. Without it the ring is announced as \"Loading\". */\n  label?: string;\n  /** Centre it in a panel. */\n  block?: boolean;\n}>();\n\nconst t = useMessages();\n</script>\n\n<template>\n  <span class=\"e-spinner\" :class=\"{ 'e-spinner--block': block }\" role=\"status\">\n    <svg class=\"e-spinner-ring\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\" /></svg>\n    <span :class=\"label ? 'e-spinner-label' : 'e-sr'\">{{ label || t(\"loading\") }}</span>\n  </span>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-spinner {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    color: var(--e-ink);\n  }\n\n  .e-spinner--block {\n    display: flex;\n    justify-content: center;\n    padding: var(--e-space-8) 0;\n  }\n\n  .e-spinner-ring {\n    width: 24px;\n    height: 24px;\n    fill: none;\n    stroke: var(--e-primary);\n    stroke-width: 3;\n    stroke-linecap: round;\n    stroke-dasharray: 36 56;\n    animation: e-spin 0.9s linear infinite;\n  }\n\n  .e-spinner-label {\n    font: 500 var(--e-text-sm) / 1.3 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n\n  @keyframes e-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-spinner-ring {\n      animation-duration: 3s;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Spinner/ESpinner.vue.d.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    /** Shown beside the ring. Without it the ring is announced as "Loading". */
+    label?: string;
+    /** Centre it in a panel. */
+    block?: boolean;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/Spinner/ESpinner.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,30 @@
+/* empty css                */
+import { useMessages as e } from "../../config.js";
+import { createElementBlock as t, createElementVNode as n, defineComponent as r, normalizeClass as i, openBlock as a, toDisplayString as o, unref as s } from "vue";
+//#region src/components/Spinner/ESpinner.vue?vue&type=script&setup=true&lang.ts
+var c = /*@__PURE__*/ r({
+	__name: "ESpinner",
+	props: {
+		label: {},
+		block: { type: Boolean }
+	},
+	setup(r) {
+		let c = e();
+		return (e, l) => (a(), t("span", {
+			class: i(["e-spinner", { "e-spinner--block": r.block }]),
+			role: "status"
+		}, [l[0] ||= n("svg", {
+			class: "e-spinner-ring",
+			viewBox: "0 0 24 24",
+			"aria-hidden": "true"
+		}, [n("circle", {
+			cx: "12",
+			cy: "12",
+			r: "9"
+		})], -1), n("span", { class: i(r.label ? "e-spinner-label" : "e-sr") }, o(r.label || s(c)("loading")), 3)], 2));
+	}
+});
+//#endregion
+export { c as default };
+
+//# sourceMappingURL=ESpinner.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/Spinner/ESpinner.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ESpinner.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_toDisplayString","_unref","ESpinner_vue_vue_type_script_setup_true_lang_default","t","useMessages","openBlock","createElementBlock","normalizeClass","__props","_cache","createElementVNode","toDisplayString","unref"],"sources":["../../../src/components/Spinner/ESpinner.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\ndefineProps<{\n  /** Shown beside the ring. Without it the ring is announced as \"Loading\". */\n  label?: string;\n  /** Centre it in a panel. */\n  block?: boolean;\n}>();\n\nconst t = useMessages();\n</script>\n\n<template>\n  <span class=\"e-spinner\" :class=\"{ 'e-spinner--block': block }\" role=\"status\">\n    <svg class=\"e-spinner-ring\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\" /></svg>\n    <span :class=\"label ? 'e-spinner-label' : 'e-sr'\">{{ label || t(\"loading\") }}</span>\n  </span>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-spinner {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    color: var(--e-ink);\n  }\n\n  .e-spinner--block {\n    display: flex;\n    justify-content: center;\n    padding: var(--e-space-8) 0;\n  }\n\n  .e-spinner-ring {\n    width: 24px;\n    height: 24px;\n    fill: none;\n    stroke: var(--e-primary);\n    stroke-width: 3;\n    stroke-linecap: round;\n    stroke-dasharray: 36 56;\n    animation: e-spin 0.9s linear infinite;\n  }\n\n  .e-spinner-label {\n    font: 500 var(--e-text-sm) / 1.3 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n\n  @keyframes e-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-spinner-ring {\n      animation-duration: 3s;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;EAWA,IAAMO,IAAIC,EAAY;E,kBAIpBR,EAAA,GAAAC,EAGO,QAAA;GAHD,OAAKC,EAAA,CAAC,aAAW,EAAA,oBAA+BU,EAAA,MAAK,CAAA,CAAA;GAAI,MAAK;E,IAClE,AAAAC,EAAA,OAAAV,EAAyG,OAAA;GAApG,OAAM;GAAiB,SAAQ;GAAY,eAAY;E,IAAOA,EAAgC,UAAA;GAAxB,IAAG;GAAK,IAAG;GAAK,GAAE;E,UAC7FA,EAAoF,QAAA,EAA7E,OAAKD,EAAEU,EAAA,QAAK,oBAAA,MAAA,EAAkC,GAAAR,EAAAQ,EAAA,SAASP,EAAAE,CAAA,CAAC,CAAA,SAAA,CAAA,GAAA,CAAA,C"}

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

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

package/dist/components/Stack/EStack.js

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

package/dist/components/Stack/EStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EStack.js","names":["_sfc_main","EStack_vue_vue_type_script_setup_true_lang_default","EStack_default"],"sources":["../../../src/components/Stack/EStack.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The element to render, `div` by default. */\n    as?: string;\n    /** A space token number (1, 2, 3, 4, 6, 8), or any CSS length as a string. */\n    gap?: number | string;\n    /** Aligns the children across the column: `center` or `end`. Stretched by default. */\n    align?: \"center\" | \"end\";\n  }>(),\n  { as: \"div\", gap: 4 },\n);\n\ndefineSlots<{\n  /** The children, one under another. */\n  default(): unknown;\n}>();\n\nconst gapValue = computed(() => (typeof props.gap === \"number\" ? `var(--e-space-${props.gap})` : props.gap));\n</script>\n\n<template>\n  <component :is=\"as\" class=\"e-stack\" :class=\"align && `e-stack--${align}`\" :style=\"{ '--e-gap': gapValue }\">\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-stack {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    align-content: start;\n    gap: var(--e-gap, var(--e-space-3));\n    min-width: 0;\n  }\n\n  .e-stack--center {\n    justify-items: center;\n  }\n\n  .e-stack--end {\n    justify-items: end;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Stack/EStack.vue.d.ts

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    /** The element to render, `div` by default. */
+    as?: string;
+    /** A space token number (1, 2, 3, 4, 6, 8), or any CSS length as a string. */
+    gap?: number | string;
+    /** Aligns the children across the column: `center` or `end`. Stretched by default. */
+    align?: "center" | "end";
+};
+type __VLS_Slots = {
+    /** The children, one under another. */
+    default(): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string;
+    gap: string | number;
+}, {}, {}, {}, 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;
+    };
+};