@eos-ui/vue 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,25 @@
+/* empty css                */
+import { computed as e, createBlock as t, defineComponent as n, normalizeClass as r, normalizeStyle as i, openBlock as a, renderSlot as o, resolveDynamicComponent as s, withCtx as c } from "vue";
+//#region src/components/Stack/EStack.vue?vue&type=script&setup=true&lang.ts
+var l = /*@__PURE__*/ n({
+	__name: "EStack",
+	props: {
+		as: { default: "div" },
+		gap: { default: 4 },
+		align: {}
+	},
+	setup(n) {
+		let l = n, u = e(() => typeof l.gap == "number" ? `var(--e-space-${l.gap})` : l.gap);
+		return (e, l) => (a(), t(s(n.as), {
+			class: r(["e-stack", n.align && `e-stack--${n.align}`]),
+			style: i({ "--e-gap": u.value })
+		}, {
+			default: c(() => [o(e.$slots, "default")]),
+			_: 3
+		}, 8, ["class", "style"]));
+	}
+});
+//#endregion
+export { l as default };
+
+//# sourceMappingURL=EStack.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EStack.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_normalizeStyle","_withCtx","_renderSlot","EStack_vue_vue_type_script_setup_true_lang_default","props","__props","gapValue","computed","openBlock","createBlock","resolveDynamicComponent","normalizeClass","normalizeStyle","withCtx","renderSlot","_ctx"],"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":";;;;;;;;;;;EAIA,IAAMQ,IAAQC,GAiBRC,IAAWC,QAAgB,OAAOH,EAAM,OAAQ,WAAW,iBAAiBA,EAAM,IAAI,KAAKA,EAAM,GAAI;E,kBAIzGR,EAAA,GAAAC,EAEYC,EAFIO,EAAA,EAAE,GAAA;GAAE,OAAKN,EAAA,CAAC,WAAkBM,EAAA,SAAK,YAAgBA,EAAA,OAAK,CAAA;GAAK,OAAKL,EAAA,EAAA,WAAeM,EAAA,MAAQ,CAAA;;GACrG,SAAAL,QAAQ,CAARC,EAAQa,EAAA,QAAA,SAAA,C"}

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

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

package/dist/components/Stamp/EStamp.js

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

package/dist/components/Stamp/EStamp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EStamp.js","names":["_sfc_main","EStamp_vue_vue_type_script_setup_true_lang_default","EStamp_default"],"sources":["../../../src/components/Stamp/EStamp.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport type { IconName } from \"../../icons/phosphor.js\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nexport type StampTone = \"success\" | \"info\" | \"warning\" | \"danger\";\nexport type StampStatus =\n  \"paid\" | \"due\" | \"overdue\" | \"action\" | \"scheduled\" | \"confirmed\" | \"cancelled\" | \"signed\" | \"pending\" | \"complete\";\n\nconst props = withDefaults(\n  defineProps<{\n  /** A preset: sets the tone, the word and the glyph. */\n  status?: StampStatus;\n  /** Overrides the preset's tone. Without a status, defaults to `info`. */\n  tone?: StampTone;\n  /** The word. Overrides the preset's. */\n  label?: string;\n  /** Overrides the preset's glyph. */\n  icon?: IconProp;\n  /** A date or day count, set after the word. */\n  detail?: string;\n  /** Smaller, for rows. */\n  small?: boolean;\n  /** `solid` is a filled badge with light text (the default); `subtle` is a soft tint with a tone-coloured outline and text. */\n  variant?: \"solid\" | \"subtle\";\n}>(),\n  { variant: \"solid\" },\n);\n\nconst PRESETS: Record<StampStatus, [StampTone, IconName]> = {\n  paid: [\"success\", \"check\"],\n  due: [\"info\", \"clock\"],\n  overdue: [\"danger\", \"alert\"],\n  action: [\"warning\", \"alert\"],\n  scheduled: [\"info\", \"calendar\"],\n  confirmed: [\"success\", \"check\"],\n  cancelled: [\"danger\", \"x\"],\n  signed: [\"success\", \"check\"],\n  pending: [\"info\", \"clock\"],\n  complete: [\"success\", \"check\"],\n};\nconst TONE_ICON: Record<StampTone, IconName> = { info: \"info\", success: \"check\", warning: \"alert\", danger: \"alert\" };\n\nconst t = useMessages();\nconst preset = computed(() => (props.status ? PRESETS[props.status] : undefined));\nconst tone = computed<StampTone>(() => props.tone || preset.value?.[0] || \"info\");\nconst text = computed(() => props.label || (preset.value ? t(`status.${props.status}`) : t(\"status\")));\nconst glyph = computed(() => props.icon || preset.value?.[1] || TONE_ICON[tone.value]);\n</script>\n\n<template>\n  <div\n    class=\"e-stamp\"\n    :class=\"[`e-stamp--${tone}`, small && 'e-stamp--s', variant === 'subtle' && 'e-stamp--subtle']\"\n    role=\"img\"\n    :aria-label=\"text + (detail ? ', ' + detail : '')\"\n  >\n    <EIcon :name=\"glyph\" bold />\n    <span class=\"e-stamp-word\">{{ text }}</span>\n    <span v-if=\"detail\" class=\"e-stamp-detail\">{{ detail }}</span>\n  </div>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-stamp {\n    --e-soft: var(--e-surface-tint);\n    --e-strong: var(--e-ink);\n    --e-on: var(--e-surface);\n\n    display: inline-flex;\n    flex-wrap: nowrap;\n    white-space: nowrap;\n    align-items: center;\n    gap: var(--e-space-2);\n    min-height: 28px;\n    padding: 0 var(--e-space-3);\n    border-radius: var(--e-radius-sm);\n    background: var(--e-strong);\n    color: var(--e-on);\n    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-strong);\n    cursor: default;\n    justify-self: start;\n  }\n\n  .e-stamp--success {\n    --e-soft: var(--e-secondary-soft);\n    --e-strong: var(--e-secondary);\n    --e-on: var(--e-on-secondary);\n  }\n\n  .e-stamp--info {\n    --e-soft: var(--e-surface-tint);\n    --e-strong: var(--e-primary);\n    --e-on: var(--e-on-primary);\n  }\n\n  .e-stamp--danger {\n    --e-soft: var(--e-danger-soft);\n    --e-strong: var(--e-danger);\n    --e-on: var(--e-on-danger);\n  }\n\n  .e-stamp--warning {\n    --e-soft: var(--e-warning-soft);\n    --e-strong: var(--e-warning-strong);\n    --e-on: var(--e-surface);\n  }\n\n  .e-stamp--subtle {\n    background: var(--e-soft);\n    color: var(--e-strong);\n  }\n\n  .e-stamp:not(.e-stamp--subtle) .e-stamp-detail {\n    border-inline-start-color: color-mix(in srgb, var(--e-on) 55%, transparent);\n  }\n\n  .e-stamp-word {\n    font: 600 var(--e-text-xs) / 16px var(--e-font-mono);\n    letter-spacing: 0.1em;\n    text-transform: uppercase;\n  }\n\n  .e-stamp-detail {\n    font: 500 var(--e-text-xs) / 1 var(--e-font-mono);\n    letter-spacing: 0.04em;\n    padding-inline-start: var(--e-space-2);\n    border-inline-start: 1px solid currentColor;\n  }\n\n  .e-stamp .e-icon {\n    width: 14px;\n    height: 14px;\n  }\n\n  .e-stamp--s {\n    min-height: 24px;\n    gap: 6px;\n    padding: 0 10px;\n    align-self: flex-start;\n  }\n\n  .e-stamp--s .e-icon {\n    width: 13px;\n    height: 13px;\n  }\n\n  .e-stamp--s .e-stamp-word {\n    font-size: var(--e-text-xs);\n    line-height: 14px;\n    letter-spacing: 0.06em;\n  }\n\n  @media (forced-colors: active) {\n    .e-stamp {\n      border: 1px solid CanvasText;\n    }\n  }\n\n  @media print {\n    .e-stamp {\n      border: 1px solid #000;\n      background: none;\n      color: #000;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Stamp/EStamp.vue.d.ts

@@ -0,0 +1,24 @@
+import { IconProp } from '../../icons/types.js';
+export type StampTone = "success" | "info" | "warning" | "danger";
+export type StampStatus = "paid" | "due" | "overdue" | "action" | "scheduled" | "confirmed" | "cancelled" | "signed" | "pending" | "complete";
+type __VLS_Props = {
+    /** A preset: sets the tone, the word and the glyph. */
+    status?: StampStatus;
+    /** Overrides the preset's tone. Without a status, defaults to `info`. */
+    tone?: StampTone;
+    /** The word. Overrides the preset's. */
+    label?: string;
+    /** Overrides the preset's glyph. */
+    icon?: IconProp;
+    /** A date or day count, set after the word. */
+    detail?: string;
+    /** Smaller, for rows. */
+    small?: boolean;
+    /** `solid` is a filled badge with light text (the default); `subtle` is a soft tint with a tone-coloured outline and text. */
+    variant?: "solid" | "subtle";
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    variant: "solid" | "subtle";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/Stamp/EStamp.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,59 @@
+/* empty css                */
+import { useMessages as e } from "../../config.js";
+import t from "../Icon/EIcon.js";
+import { computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, normalizeClass as c, openBlock as l, toDisplayString as u } from "vue";
+//#region src/components/Stamp/EStamp.vue?vue&type=script&setup=true&lang.ts
+var d = ["aria-label"], f = { class: "e-stamp-word" }, p = {
+	key: 0,
+	class: "e-stamp-detail"
+}, m = /*@__PURE__*/ s({
+	__name: "EStamp",
+	props: {
+		status: {},
+		tone: {},
+		label: {},
+		icon: {},
+		detail: {},
+		small: { type: Boolean },
+		variant: { default: "solid" }
+	},
+	setup(s) {
+		let m = s, h = {
+			paid: ["success", "check"],
+			due: ["info", "clock"],
+			overdue: ["danger", "alert"],
+			action: ["warning", "alert"],
+			scheduled: ["info", "calendar"],
+			confirmed: ["success", "check"],
+			cancelled: ["danger", "x"],
+			signed: ["success", "check"],
+			pending: ["info", "clock"],
+			complete: ["success", "check"]
+		}, g = {
+			info: "info",
+			success: "check",
+			warning: "alert",
+			danger: "alert"
+		}, _ = e(), v = n(() => m.status ? h[m.status] : void 0), y = n(() => m.tone || v.value?.[0] || "info"), b = n(() => m.label || (v.value ? _(`status.${m.status}`) : _("status"))), x = n(() => m.icon || v.value?.[1] || g[y.value]);
+		return (e, n) => (l(), i("div", {
+			class: c(["e-stamp", [
+				`e-stamp--${y.value}`,
+				s.small && "e-stamp--s",
+				s.variant === "subtle" && "e-stamp--subtle"
+			]]),
+			role: "img",
+			"aria-label": b.value + (s.detail ? ", " + s.detail : "")
+		}, [
+			o(t, {
+				name: x.value,
+				bold: ""
+			}, null, 8, ["name"]),
+			a("span", f, u(b.value), 1),
+			s.detail ? (l(), i("span", p, u(s.detail), 1)) : r("", !0)
+		], 10, d));
+	}
+});
+//#endregion
+export { m as default };
+
+//# sourceMappingURL=EStamp.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/Stamp/EStamp.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EStamp.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createVNode","EIcon","_createElementVNode","_toDisplayString","_createCommentVNode","EIcon_default","_hoisted_1","_hoisted_2","_hoisted_3","EStamp_vue_vue_type_script_setup_true_lang_default","props","__props","PRESETS","TONE_ICON","t","useMessages","preset","computed","tone","text","glyph","openBlock","createElementBlock","normalizeClass","createVNode","createElementVNode","toDisplayString","createCommentVNode"],"sources":["../../../src/components/Stamp/EStamp.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport type { IconName } from \"../../icons/phosphor.js\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nexport type StampTone = \"success\" | \"info\" | \"warning\" | \"danger\";\nexport type StampStatus =\n  \"paid\" | \"due\" | \"overdue\" | \"action\" | \"scheduled\" | \"confirmed\" | \"cancelled\" | \"signed\" | \"pending\" | \"complete\";\n\nconst props = withDefaults(\n  defineProps<{\n  /** A preset: sets the tone, the word and the glyph. */\n  status?: StampStatus;\n  /** Overrides the preset's tone. Without a status, defaults to `info`. */\n  tone?: StampTone;\n  /** The word. Overrides the preset's. */\n  label?: string;\n  /** Overrides the preset's glyph. */\n  icon?: IconProp;\n  /** A date or day count, set after the word. */\n  detail?: string;\n  /** Smaller, for rows. */\n  small?: boolean;\n  /** `solid` is a filled badge with light text (the default); `subtle` is a soft tint with a tone-coloured outline and text. */\n  variant?: \"solid\" | \"subtle\";\n}>(),\n  { variant: \"solid\" },\n);\n\nconst PRESETS: Record<StampStatus, [StampTone, IconName]> = {\n  paid: [\"success\", \"check\"],\n  due: [\"info\", \"clock\"],\n  overdue: [\"danger\", \"alert\"],\n  action: [\"warning\", \"alert\"],\n  scheduled: [\"info\", \"calendar\"],\n  confirmed: [\"success\", \"check\"],\n  cancelled: [\"danger\", \"x\"],\n  signed: [\"success\", \"check\"],\n  pending: [\"info\", \"clock\"],\n  complete: [\"success\", \"check\"],\n};\nconst TONE_ICON: Record<StampTone, IconName> = { info: \"info\", success: \"check\", warning: \"alert\", danger: \"alert\" };\n\nconst t = useMessages();\nconst preset = computed(() => (props.status ? PRESETS[props.status] : undefined));\nconst tone = computed<StampTone>(() => props.tone || preset.value?.[0] || \"info\");\nconst text = computed(() => props.label || (preset.value ? t(`status.${props.status}`) : t(\"status\")));\nconst glyph = computed(() => props.icon || preset.value?.[1] || TONE_ICON[tone.value]);\n</script>\n\n<template>\n  <div\n    class=\"e-stamp\"\n    :class=\"[`e-stamp--${tone}`, small && 'e-stamp--s', variant === 'subtle' && 'e-stamp--subtle']\"\n    role=\"img\"\n    :aria-label=\"text + (detail ? ', ' + detail : '')\"\n  >\n    <EIcon :name=\"glyph\" bold />\n    <span class=\"e-stamp-word\">{{ text }}</span>\n    <span v-if=\"detail\" class=\"e-stamp-detail\">{{ detail }}</span>\n  </div>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-stamp {\n    --e-soft: var(--e-surface-tint);\n    --e-strong: var(--e-ink);\n    --e-on: var(--e-surface);\n\n    display: inline-flex;\n    flex-wrap: nowrap;\n    white-space: nowrap;\n    align-items: center;\n    gap: var(--e-space-2);\n    min-height: 28px;\n    padding: 0 var(--e-space-3);\n    border-radius: var(--e-radius-sm);\n    background: var(--e-strong);\n    color: var(--e-on);\n    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-strong);\n    cursor: default;\n    justify-self: start;\n  }\n\n  .e-stamp--success {\n    --e-soft: var(--e-secondary-soft);\n    --e-strong: var(--e-secondary);\n    --e-on: var(--e-on-secondary);\n  }\n\n  .e-stamp--info {\n    --e-soft: var(--e-surface-tint);\n    --e-strong: var(--e-primary);\n    --e-on: var(--e-on-primary);\n  }\n\n  .e-stamp--danger {\n    --e-soft: var(--e-danger-soft);\n    --e-strong: var(--e-danger);\n    --e-on: var(--e-on-danger);\n  }\n\n  .e-stamp--warning {\n    --e-soft: var(--e-warning-soft);\n    --e-strong: var(--e-warning-strong);\n    --e-on: var(--e-surface);\n  }\n\n  .e-stamp--subtle {\n    background: var(--e-soft);\n    color: var(--e-strong);\n  }\n\n  .e-stamp:not(.e-stamp--subtle) .e-stamp-detail {\n    border-inline-start-color: color-mix(in srgb, var(--e-on) 55%, transparent);\n  }\n\n  .e-stamp-word {\n    font: 600 var(--e-text-xs) / 16px var(--e-font-mono);\n    letter-spacing: 0.1em;\n    text-transform: uppercase;\n  }\n\n  .e-stamp-detail {\n    font: 500 var(--e-text-xs) / 1 var(--e-font-mono);\n    letter-spacing: 0.04em;\n    padding-inline-start: var(--e-space-2);\n    border-inline-start: 1px solid currentColor;\n  }\n\n  .e-stamp .e-icon {\n    width: 14px;\n    height: 14px;\n  }\n\n  .e-stamp--s {\n    min-height: 24px;\n    gap: 6px;\n    padding: 0 10px;\n    align-self: flex-start;\n  }\n\n  .e-stamp--s .e-icon {\n    width: 13px;\n    height: 13px;\n  }\n\n  .e-stamp--s .e-stamp-word {\n    font-size: var(--e-text-xs);\n    line-height: 14px;\n    letter-spacing: 0.06em;\n  }\n\n  @media (forced-colors: active) {\n    .e-stamp {\n      border: 1px solid CanvasText;\n    }\n  }\n\n  @media print {\n    .e-stamp {\n      border: 1px solid #000;\n      background: none;\n      color: #000;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAYA,IAAMa,IAAQC,GAoBRC,IAAsD;GAC1D,MAAM,CAAC,WAAW,OAAO;GACzB,KAAK,CAAC,QAAQ,OAAO;GACrB,SAAS,CAAC,UAAU,OAAO;GAC3B,QAAQ,CAAC,WAAW,OAAO;GAC3B,WAAW,CAAC,QAAQ,UAAU;GAC9B,WAAW,CAAC,WAAW,OAAO;GAC9B,WAAW,CAAC,UAAU,GAAG;GACzB,QAAQ,CAAC,WAAW,OAAO;GAC3B,SAAS,CAAC,QAAQ,OAAO;GACzB,UAAU,CAAC,WAAW,OAAO;EAC/B,GACMC,IAAyC;GAAE,MAAM;GAAQ,SAAS;GAAS,SAAS;GAAS,QAAQ;EAAQ,GAE7GC,IAAIC,EAAY,GAChBC,IAASC,QAAgBP,EAAM,SAASE,EAAQF,EAAM,UAAU,KAAA,CAAU,GAC1EQ,IAAOD,QAA0BP,EAAM,QAAQM,EAAO,QAAQ,MAAM,MAAM,GAC1EG,IAAOF,QAAeP,EAAM,UAAUM,EAAO,QAAQF,EAAE,UAAUJ,EAAM,QAAQ,IAAII,EAAE,QAAQ,EAAE,GAC/FM,IAAQH,QAAeP,EAAM,QAAQM,EAAO,QAAQ,MAAMH,EAAUK,EAAK,MAAM;E,kBAInFrB,EAAA,GAAAC,EASM,OAAA;GARJ,OAAKC,EAAA,CAAC,WAAS;IAAA,YACMmB,EAAA;IAAQP,EAAA,SAAK;IAAkBA,EAAA,YAAO,YAAA;GAAA,CAAA,CAAA;GAC3D,MAAK;GACJ,cAAYQ,EAAA,SAAQR,EAAA,SAAM,OAAUA,EAAA,SAAM;;GAE3CX,EAA4BC,GAAA;IAApB,MAAMmB,EAAA;IAAO,MAAA;;GACrBlB,EAA4C,QAA5CK,GAA4CJ,EAAdgB,EAAA,KAAI,GAAA,CAAA;GACtBR,EAAA,UAAZd,EAAA,GAAAC,EAA8D,QAA9DU,GAA8DL,EAAhBQ,EAAA,MAAM,GAAA,CAAA,K"}

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

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

package/dist/components/StatementCard/EStatementCard.js

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

package/dist/components/StatementCard/EStatementCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EStatementCard.js","names":["_sfc_main","EStatementCard_vue_vue_type_script_setup_true_lang_default","EStatementCard_default"],"sources":["../../../src/components/StatementCard/EStatementCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ESurface from \"../Surface/ESurface.vue\";\nimport EStamp from \"../Stamp/EStamp.vue\";\nimport EDescriptionList from \"../DescriptionList/EDescriptionList.vue\";\nimport EDisclosure from \"../Disclosure/EDisclosure.vue\";\nimport EAmount from \"../Amount/EAmount.vue\";\nimport ETimeline from \"../Timeline/ETimeline.vue\";\nimport type { StatementProps } from \"./types.js\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<\n    StatementProps & {\n      /** The heading level of the title, 1 to 4. */\n      headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n    }\n  >(),\n  { headingLevel: 3 },\n);\n\ndefineSlots<{\n  /** Buttons for the bar at the foot: Pay now first, then Download. */\n  actions?(): unknown;\n}>();\n\nconst t = useMessages();\n</script>\n\n<template>\n  <ESurface as=\"article\" class=\"e-stmt\" pad=\"md\">\n    <div class=\"e-stmt-top\">\n      <EAmount :label=\"amountLabel\" :amount=\"amount\" :details=\"details\" :currency=\"currency\" :locale=\"locale\" />\n      <EStamp :status=\"status\" :tone=\"tone\" :label=\"label\" :detail=\"detail\" />\n    </div>\n    <div class=\"e-stmt-head\">\n      <component :is=\"`h${headingLevel}`\" class=\"e-stmt-title\">{{ title }}</component>\n      <p v-if=\"subtitle\" class=\"e-stmt-sub\">{{ subtitle }}</p>\n    </div>\n    <p v-if=\"reason\" class=\"e-stmt-reason\">{{ reason }}</p>\n    <EDescriptionList v-if=\"parts && parts.length\" :items=\"parts\" />\n    <EDisclosure v-if=\"activity && activity.length\" :title=\"`${activityTitle || t('history')} (${activity.length})`\">\n      <ETimeline :items=\"activity\" />\n    </EDisclosure>\n    <template v-if=\"$slots.actions\" #actions><slot name=\"actions\" /></template>\n  </ESurface>\n</template>\n\n<style>\n@layer e.account {\n  .e-stmt:not(.e-surface--actions),\n  .e-stmt > .e-surface-body {\n    display: grid;\n    align-content: start;\n    gap: var(--e-space-4);\n  }\n\n  .e-stmt-top {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--e-space-3) var(--e-space-4);\n  }\n\n  .e-stmt-top .e-stamp {\n    margin-inline-start: auto;\n  }\n\n  .e-stmt-title {\n    margin: 0;\n    font: 500 var(--e-text-xl) / 1.25 var(--e-font-sans);\n    text-wrap: balance;\n    min-width: 0;\n  }\n\n  .e-stmt-sub {\n    margin: var(--e-space-1) 0 0;\n    font: 400 var(--e-text-sm) / 1.4 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n\n  .e-stmt-reason {\n    margin: 0;\n    font: 400 var(--e-text-md) / 1.45 var(--e-font-sans);\n    text-wrap: pretty;\n  }\n\n  @media (max-width: 32rem) {\n    .e-stmt-top .e-stamp {\n      margin-inline-start: 0;\n    }\n  }\n\n  @media print {\n    .e-stmt {\n      box-shadow: none;\n      border: 1px solid #000;\n      break-inside: avoid;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/StatementCard/EStatementCard.vue.d.ts

@@ -0,0 +1,20 @@
+import { StatementProps } from './types.js';
+type __VLS_Props = StatementProps & {
+    /** The heading level of the title, 1 to 4. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+};
+type __VLS_Slots = {
+    /** Buttons for the bar at the foot: Pay now first, then Download. */
+    actions?(): 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/StatementCard/EStatementCard.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,96 @@
+/* empty css                */
+import { useMessages as e } from "../../config.js";
+import t from "../Disclosure/EDisclosure.js";
+import n from "../Amount/EAmount.js";
+import r from "../Surface/ESurface.js";
+import i from "../Stamp/EStamp.js";
+import a from "../DescriptionList/EDescriptionList.js";
+import o from "../Timeline/ETimeline.js";
+import { createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createSlots as d, createTextVNode as f, createVNode as p, defineComponent as m, openBlock as h, renderSlot as g, resolveDynamicComponent as _, toDisplayString as v, unref as y, withCtx as b } from "vue";
+//#region src/components/StatementCard/EStatementCard.vue?vue&type=script&setup=true&lang.ts
+var x = { class: "e-stmt-top" }, S = { class: "e-stmt-head" }, C = {
+	key: 0,
+	class: "e-stmt-sub"
+}, w = {
+	key: 0,
+	class: "e-stmt-reason"
+}, T = /*@__PURE__*/ m({
+	__name: "EStatementCard",
+	props: {
+		title: {},
+		subtitle: {},
+		status: {},
+		tone: {},
+		label: {},
+		detail: {},
+		amount: {},
+		amountLabel: {},
+		details: {},
+		reason: {},
+		parts: {},
+		activity: {},
+		activityTitle: {},
+		currency: {},
+		locale: {},
+		headingLevel: { default: 3 }
+	},
+	setup(m) {
+		let T = e();
+		return (e, E) => (h(), s(r, {
+			as: "article",
+			class: "e-stmt",
+			pad: "md"
+		}, d({
+			default: b(() => [
+				u("div", x, [p(n, {
+					label: m.amountLabel,
+					amount: m.amount,
+					details: m.details,
+					currency: m.currency,
+					locale: m.locale
+				}, null, 8, [
+					"label",
+					"amount",
+					"details",
+					"currency",
+					"locale"
+				]), p(i, {
+					status: m.status,
+					tone: m.tone,
+					label: m.label,
+					detail: m.detail
+				}, null, 8, [
+					"status",
+					"tone",
+					"label",
+					"detail"
+				])]),
+				u("div", S, [(h(), s(_(`h${m.headingLevel}`), { class: "e-stmt-title" }, {
+					default: b(() => [f(v(m.title), 1)]),
+					_: 1
+				})), m.subtitle ? (h(), l("p", C, v(m.subtitle), 1)) : c("", !0)]),
+				m.reason ? (h(), l("p", w, v(m.reason), 1)) : c("", !0),
+				m.parts && m.parts.length ? (h(), s(a, {
+					key: 1,
+					items: m.parts
+				}, null, 8, ["items"])) : c("", !0),
+				m.activity && m.activity.length ? (h(), s(t, {
+					key: 2,
+					title: `${m.activityTitle || y(T)("history")} (${m.activity.length})`
+				}, {
+					default: b(() => [p(o, { items: m.activity }, null, 8, ["items"])]),
+					_: 1
+				}, 8, ["title"])) : c("", !0)
+			]),
+			_: 2
+		}, [e.$slots.actions ? {
+			name: "actions",
+			fn: b(() => [g(e.$slots, "actions")]),
+			key: "0"
+		} : void 0]), 1024));
+	}
+});
+//#endregion
+export { T as default };
+
+//# sourceMappingURL=EStatementCard.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/StatementCard/EStatementCard.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EStatementCard.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createBlock","ESurface","_createSlots","_withCtx","_createElementVNode","_createVNode","EAmount","EStamp","_resolveDynamicComponent","_createTextVNode","_toDisplayString","_createElementBlock","_createCommentVNode","EDescriptionList","EDisclosure","_unref","ETimeline","_renderSlot","EDisclosure_default","EAmount_default","ESurface_default","EStamp_default","EDescriptionList_default","ETimeline_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","EStatementCard_vue_vue_type_script_setup_true_lang_default","t","useMessages","openBlock","createBlock","createSlots","withCtx","createElementVNode","createVNode","__props","resolveDynamicComponent","createTextVNode","toDisplayString","createElementBlock","createCommentVNode","unref","_ctx","renderSlot"],"sources":["../../../src/components/StatementCard/EStatementCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ESurface from \"../Surface/ESurface.vue\";\nimport EStamp from \"../Stamp/EStamp.vue\";\nimport EDescriptionList from \"../DescriptionList/EDescriptionList.vue\";\nimport EDisclosure from \"../Disclosure/EDisclosure.vue\";\nimport EAmount from \"../Amount/EAmount.vue\";\nimport ETimeline from \"../Timeline/ETimeline.vue\";\nimport type { StatementProps } from \"./types.js\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<\n    StatementProps & {\n      /** The heading level of the title, 1 to 4. */\n      headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n    }\n  >(),\n  { headingLevel: 3 },\n);\n\ndefineSlots<{\n  /** Buttons for the bar at the foot: Pay now first, then Download. */\n  actions?(): unknown;\n}>();\n\nconst t = useMessages();\n</script>\n\n<template>\n  <ESurface as=\"article\" class=\"e-stmt\" pad=\"md\">\n    <div class=\"e-stmt-top\">\n      <EAmount :label=\"amountLabel\" :amount=\"amount\" :details=\"details\" :currency=\"currency\" :locale=\"locale\" />\n      <EStamp :status=\"status\" :tone=\"tone\" :label=\"label\" :detail=\"detail\" />\n    </div>\n    <div class=\"e-stmt-head\">\n      <component :is=\"`h${headingLevel}`\" class=\"e-stmt-title\">{{ title }}</component>\n      <p v-if=\"subtitle\" class=\"e-stmt-sub\">{{ subtitle }}</p>\n    </div>\n    <p v-if=\"reason\" class=\"e-stmt-reason\">{{ reason }}</p>\n    <EDescriptionList v-if=\"parts && parts.length\" :items=\"parts\" />\n    <EDisclosure v-if=\"activity && activity.length\" :title=\"`${activityTitle || t('history')} (${activity.length})`\">\n      <ETimeline :items=\"activity\" />\n    </EDisclosure>\n    <template v-if=\"$slots.actions\" #actions><slot name=\"actions\" /></template>\n  </ESurface>\n</template>\n\n<style>\n@layer e.account {\n  .e-stmt:not(.e-surface--actions),\n  .e-stmt > .e-surface-body {\n    display: grid;\n    align-content: start;\n    gap: var(--e-space-4);\n  }\n\n  .e-stmt-top {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--e-space-3) var(--e-space-4);\n  }\n\n  .e-stmt-top .e-stamp {\n    margin-inline-start: auto;\n  }\n\n  .e-stmt-title {\n    margin: 0;\n    font: 500 var(--e-text-xl) / 1.25 var(--e-font-sans);\n    text-wrap: balance;\n    min-width: 0;\n  }\n\n  .e-stmt-sub {\n    margin: var(--e-space-1) 0 0;\n    font: 400 var(--e-text-sm) / 1.4 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n\n  .e-stmt-reason {\n    margin: 0;\n    font: 400 var(--e-text-md) / 1.45 var(--e-font-sans);\n    text-wrap: pretty;\n  }\n\n  @media (max-width: 32rem) {\n    .e-stmt-top .e-stamp {\n      margin-inline-start: 0;\n    }\n  }\n\n  @media print {\n    .e-stmt {\n      box-shadow: none;\n      border: 1px solid #000;\n      break-inside: avoid;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BA,IAAM+B,IAAIC,EAAY;E,kBAIpB/B,EAAA,GAAAC,EAeWC,GAAA;GAfD,IAAG;GAAU,OAAM;GAAS,KAAI;;GACxC,SAAAE,QAGM;IAHNC,EAGM,OAHNoB,GAGM,CAFJnB,EAA0GC,GAAA;KAAhG,OAAO+B,EAAA;KAAc,QAAQA,EAAA;KAAS,SAASA,EAAA;KAAU,UAAUA,EAAA;KAAW,QAAQA,EAAA;;;;;;;I,IAChGhC,EAAwEE,GAAA;KAA/D,QAAQ8B,EAAA;KAAS,MAAMA,EAAA;KAAO,OAAOA,EAAA;KAAQ,QAAQA,EAAA;;;;;;;IAEhEjC,EAGM,OAHNqB,GAGM,EAFJ1B,EAAA,GAAAC,EAAgFQ,EAAA,IAA5D6B,EAAA,cAAY,GAAA,EAAI,OAAM,eAAc,GAAA;KAAC,SAAAlC,QAAW,CAARM,EAAAC,EAAA2B,EAAA,KAAK,GAAA,CAAA,C;;I,KACxDA,EAAA,YAATtC,EAAA,GAAAY,EAAwD,KAAxDe,GAAwDhB,EAAf2B,EAAA,QAAQ,GAAA,CAAA,K;IAE1CA,EAAA,UAATtC,EAAA,GAAAY,EAAuD,KAAvDgB,GAAuDjB,EAAb2B,EAAA,MAAM,GAAA,CAAA,K;IACxBA,EAAA,SAASA,EAAA,MAAM,UAAvCtC,EAAA,GAAAC,EAAgEa,GAAA;;KAAhB,OAAOwB,EAAA;;IACpCA,EAAA,YAAYA,EAAA,SAAS,UAAxCtC,EAAA,GAAAC,EAEcc,GAAA;;KAFmC,OAAK,GAAKuB,EAAA,iBAAiBtB,EAAAc,CAAA,CAAC,CAAA,SAAA,EAAA,IAAgBQ,EAAA,SAAS,OAAM;;KAC1G,SAAAlC,QAA+B,CAA/BE,EAA+BW,GAAA,EAAnB,OAAOqB,EAAA,SAAQ,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,C;;;;;E,IAEbvC,EAAAA,OAAO,U;GAAU,MAAA;GAAQ,IAAAK,QAAuB,CAAvBc,EAAuB2B,EAAA,QAAA,SAAA,C"}

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

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

package/dist/components/StatementCard/types.d.ts

@@ -0,0 +1,37 @@
+import { StampStatus, StampTone } from '../Stamp/EStamp.vue.js';
+import { AmountDetail } from '../Amount/EAmount.vue.js';
+import { DescriptionItem } from '../DescriptionList/EDescriptionList.vue.js';
+import { TimelineItem } from '../Timeline/ETimeline.vue.js';
+/** What a statement shows. Shared by `EStatementCard` and `EStatementRow`. */
+export interface StatementProps {
+    /** The statement's name, such as "October statement". */
+    title: string;
+    /** A line under the title, such as the period it covers. */
+    subtitle?: string;
+    /** A preset for the stamp: sets its tone, word and glyph. */
+    status?: StampStatus;
+    /** Overrides the status's tone. */
+    tone?: StampTone;
+    /** Overrides the status's word. */
+    label?: string;
+    /** A date or day count set after the stamp's word, such as "Oct 22". */
+    detail?: string;
+    /** The lead amount. */
+    amount: number;
+    /** What the amount is ("You owe", "Paid"). */
+    amountLabel?: string;
+    /** Lines under the amount, or above the total in a row. A number is shown as money. */
+    details?: AmountDetail[];
+    /** One sentence: what this is and what to do. */
+    reason?: string;
+    /** Label and text rows: what it covers, how to pay, when it is due. */
+    parts?: DescriptionItem[];
+    /** Events, newest first, shown behind a disclosure. */
+    activity?: TimelineItem[];
+    /** The disclosure's title. Default "History"; the number of events follows it. */
+    activityTitle?: string;
+    /** ISO 4217 code for this statement's amounts. Overrides the configured currency. */
+    currency?: string;
+    /** BCP 47 tag for this statement's amounts. Overrides the configured locale. */
+    locale?: string;
+}

package/dist/components/StatementRow/EStatementRow.js

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

package/dist/components/StatementRow/EStatementRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EStatementRow.js","names":["_sfc_main","EStatementRow_vue_vue_type_script_setup_true_lang_default","EStatementRow_default"],"sources":["../../../src/components/StatementRow/EStatementRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport ESurface from \"../Surface/ESurface.vue\";\nimport EStamp from \"../Stamp/EStamp.vue\";\nimport EActions from \"../Actions/EActions.vue\";\nimport EDescriptionList from \"../DescriptionList/EDescriptionList.vue\";\nimport EDisclosure from \"../Disclosure/EDisclosure.vue\";\nimport ETimeline from \"../Timeline/ETimeline.vue\";\nimport type { StatementProps } from \"../StatementCard/types.js\";\nimport { useMessages } from \"../../config.js\";\nimport { useLocale } from \"../../composables/useLocale.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<StatementProps>();\n\ndefineSlots<{\n  /** Buttons for the bar at the foot of the opened row: Pay now first, then Download. */\n  actions?(): unknown;\n}>();\n\nconst t = useMessages();\nconst hasTotals = computed(() => Boolean(props.details && props.details.length));\nconst { formatMoney } = useLocale();\nconst money = (n: number) => formatMoney(n, { currency: props.currency, locale: props.locale });\n</script>\n\n<template>\n  <details class=\"e-srow\">\n    <summary>\n      <EStamp :status=\"status\" :tone=\"tone\" :label=\"label\" :detail=\"detail\" small />\n      <div class=\"e-srow-main\">\n        <p class=\"e-srow-title\">{{ title }}</p>\n        <p v-if=\"subtitle\" class=\"e-srow-sub\">{{ subtitle }}</p>\n      </div>\n      <span class=\"e-srow-amount\">{{ money(amount) }}</span>\n    </summary>\n    <div class=\"e-srow-body\">\n      <div class=\"e-srow-content\">\n        <div v-if=\"reason || hasTotals\" class=\"e-srow-lead\" :class=\"hasTotals ? 'e-srow-lead--totals' : null\">\n          <p v-if=\"reason\" class=\"e-stmt-reason\">{{ reason }}</p>\n          <ESurface v-if=\"hasTotals\" as=\"dl\" class=\"e-totals\" pad=\"sm\">\n            <div v-for=\"d in details\" :key=\"d.label\" class=\"e-totals-row\">\n              <dt>{{ d.label }}</dt>\n              <dd>{{ typeof d.value === \"number\" ? money(d.value) : d.value }}</dd>\n            </div>\n            <div class=\"e-totals-row e-totals-row--sum\">\n              <dt>{{ amountLabel || t(\"amount\") }}</dt>\n              <dd>{{ money(amount) }}</dd>\n            </div>\n          </ESurface>\n        </div>\n        <EDescriptionList v-if=\"parts && parts.length\" :items=\"parts\" />\n        <EDisclosure\n          v-if=\"activity && activity.length\"\n          :title=\"`${activityTitle || t('history')} (${activity.length})`\"\n        >\n          <ETimeline :items=\"activity\" />\n        </EDisclosure>\n      </div>\n      <EActions v-if=\"$slots.actions\" bar><slot name=\"actions\" /></EActions>\n    </div>\n  </details>\n</template>\n\n<style>\n@layer e.account {\n  .e-srow {\n    border-bottom: var(--e-depth) solid var(--e-border);\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    box-shadow: var(--e-edge);\n    transition:\n      background-color var(--e-duration-tap) var(--e-easing-out),\n      box-shadow var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-srow:not([open]):hover {\n    border-bottom-color: var(--e-border-strong);\n    background: var(--e-surface-tint);\n    box-shadow: 0 0 0 1px var(--e-border-strong);\n  }\n\n  .e-srow[open] {\n    border-bottom-width: 0;\n    box-shadow: var(--e-edge);\n  }\n\n  .e-srow[open]:has(> summary:hover) {\n    box-shadow: 0 0 0 1px var(--e-border-strong);\n  }\n\n  .e-srow[open] > summary:hover {\n    background: var(--e-surface-tint);\n    border-bottom-color: var(--e-border-strong);\n  }\n\n  .e-srow > summary {\n    border-radius: var(--e-radius-md);\n    display: grid;\n    grid-template-columns: 8.75rem minmax(0, 1fr) auto;\n    align-items: center;\n    gap: var(--e-space-3);\n    padding: var(--e-space-3) var(--e-space-4);\n    list-style: none;\n    cursor: pointer;\n  }\n\n  .e-srow > summary::-webkit-details-marker {\n    display: none;\n  }\n\n  .e-srow > summary:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-srow .e-stamp {\n    /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties -- two longhands */\n    justify-self: start;\n    align-self: center;\n  }\n\n  .e-srow-main {\n    min-width: 0;\n  }\n\n  .e-srow-title {\n    margin: 0;\n    font: 500 var(--e-text-md) / 1.3 var(--e-font-sans);\n    overflow-wrap: anywhere;\n    text-wrap: balance;\n  }\n\n  .e-srow-sub {\n    margin: var(--e-space-1) 0 0;\n    font: 400 var(--e-text-sm) / 1.4 var(--e-font-sans);\n    color: var(--e-muted);\n    overflow-wrap: anywhere;\n  }\n\n  .e-srow-amount {\n    min-width: 5.5rem;\n    font: 500 var(--e-text-md) / 1.3 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    white-space: nowrap;\n    text-align: end;\n  }\n\n  .e-srow[open] > summary {\n    border-radius: var(--e-radius-md) var(--e-radius-md) 0 0;\n    border-bottom: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-srow-body {\n    container-type: inline-size;\n    border-radius: 0 0 var(--e-radius-md) var(--e-radius-md);\n  }\n\n  .e-srow-content {\n    display: grid;\n    gap: var(--e-space-2);\n    padding: var(--e-space-4);\n  }\n\n  .e-srow-body > .e-actions--bar:last-child {\n    border-end-start-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-srow-body .e-stmt-reason {\n    margin: 0;\n  }\n\n  .e-srow-lead {\n    display: grid;\n    gap: var(--e-space-4);\n    align-items: start;\n  }\n\n  .e-totals {\n    display: grid;\n    gap: var(--e-space-1);\n    margin: 0;\n  }\n\n  .e-totals-row {\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: var(--e-space-3);\n  }\n\n  .e-totals-row dt {\n    font: 400 var(--e-text-sm) / 1.4 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n\n  .e-totals-row dd {\n    margin: 0;\n    font: 500 var(--e-text-sm) / 1.4 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .e-totals-row--sum {\n    margin-top: var(--e-space-2);\n    padding-top: var(--e-space-3);\n    border-top: var(--e-stroke-hair) solid var(--e-border-strong);\n  }\n\n  .e-totals-row--sum dt {\n    font: 500 var(--e-text-md) / 1.3 var(--e-font-sans);\n    color: var(--e-ink);\n  }\n\n  .e-totals-row--sum dd {\n    font-size: var(--e-text-xl);\n  }\n\n  @container (min-width: 34rem) {\n    .e-srow-lead--totals {\n      grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);\n    }\n  }\n\n  @media (max-width: 32rem) {\n    .e-srow > summary {\n      grid-template-columns: minmax(0, 1fr) auto;\n      align-items: start;\n    }\n\n    .e-srow .e-stamp {\n      grid-column: 1 / -1;\n      justify-self: start;\n      padding-inline: var(--e-space-2);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-srow {\n      transition: none;\n    }\n  }\n\n  @media print {\n    .e-srow,\n    .e-totals {\n      box-shadow: none;\n      border: 1px solid #000;\n      break-inside: avoid;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/StatementRow/EStatementRow.vue.d.ts

@@ -0,0 +1,14 @@
+import { StatementProps } from '../StatementCard/types.js';
+type __VLS_Slots = {
+    /** Buttons for the bar at the foot of the opened row: Pay now first, then Download. */
+    actions?(): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<StatementProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<StatementProps> & Readonly<{}>, {}, {}, {}, {}, 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/StatementRow/EStatementRow.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,96 @@
+/* empty css                */
+import { useMessages as e } from "../../config.js";
+import { useLocale as t } from "../../composables/useLocale.js";
+import n from "../Disclosure/EDisclosure.js";
+import r from "../Actions/EActions.js";
+import i from "../Surface/ESurface.js";
+import a from "../Stamp/EStamp.js";
+import o from "../DescriptionList/EDescriptionList.js";
+import s from "../Timeline/ETimeline.js";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createVNode as m, defineComponent as h, normalizeClass as g, openBlock as _, renderList as v, renderSlot as y, toDisplayString as b, unref as x, withCtx as S } from "vue";
+//#region src/components/StatementRow/EStatementRow.vue?vue&type=script&setup=true&lang.ts
+var C = { class: "e-srow" }, w = { class: "e-srow-main" }, T = { class: "e-srow-title" }, E = {
+	key: 0,
+	class: "e-srow-sub"
+}, D = { class: "e-srow-amount" }, O = { class: "e-srow-body" }, k = { class: "e-srow-content" }, A = {
+	key: 0,
+	class: "e-stmt-reason"
+}, j = { class: "e-totals-row e-totals-row--sum" }, M = /*@__PURE__*/ h({
+	__name: "EStatementRow",
+	props: {
+		title: {},
+		subtitle: {},
+		status: {},
+		tone: {},
+		label: {},
+		detail: {},
+		amount: {},
+		amountLabel: {},
+		details: {},
+		reason: {},
+		parts: {},
+		activity: {},
+		activityTitle: {},
+		currency: {},
+		locale: {}
+	},
+	setup(h) {
+		let M = h, N = e(), P = l(() => !!(M.details && M.details.length)), { formatMoney: F } = t(), I = (e) => F(e, {
+			currency: M.currency,
+			locale: M.locale
+		});
+		return (e, t) => (_(), f("details", C, [p("summary", null, [
+			m(a, {
+				status: h.status,
+				tone: h.tone,
+				label: h.label,
+				detail: h.detail,
+				small: ""
+			}, null, 8, [
+				"status",
+				"tone",
+				"label",
+				"detail"
+			]),
+			p("div", w, [p("p", T, b(h.title), 1), h.subtitle ? (_(), f("p", E, b(h.subtitle), 1)) : d("", !0)]),
+			p("span", D, b(I(h.amount)), 1)
+		]), p("div", O, [p("div", k, [
+			h.reason || P.value ? (_(), f("div", {
+				key: 0,
+				class: g(["e-srow-lead", P.value ? "e-srow-lead--totals" : null])
+			}, [h.reason ? (_(), f("p", A, b(h.reason), 1)) : d("", !0), P.value ? (_(), u(i, {
+				key: 1,
+				as: "dl",
+				class: "e-totals",
+				pad: "sm"
+			}, {
+				default: S(() => [(_(!0), f(c, null, v(h.details, (e) => (_(), f("div", {
+					key: e.label,
+					class: "e-totals-row"
+				}, [p("dt", null, b(e.label), 1), p("dd", null, b(typeof e.value == "number" ? I(e.value) : e.value), 1)]))), 128)), p("div", j, [p("dt", null, b(h.amountLabel || x(N)("amount")), 1), p("dd", null, b(I(h.amount)), 1)])]),
+				_: 1
+			})) : d("", !0)], 2)) : d("", !0),
+			h.parts && h.parts.length ? (_(), u(o, {
+				key: 1,
+				items: h.parts
+			}, null, 8, ["items"])) : d("", !0),
+			h.activity && h.activity.length ? (_(), u(n, {
+				key: 2,
+				title: `${h.activityTitle || x(N)("history")} (${h.activity.length})`
+			}, {
+				default: S(() => [m(s, { items: h.activity }, null, 8, ["items"])]),
+				_: 1
+			}, 8, ["title"])) : d("", !0)
+		]), e.$slots.actions ? (_(), u(r, {
+			key: 0,
+			bar: ""
+		}, {
+			default: S(() => [y(e.$slots, "actions")]),
+			_: 3
+		})) : d("", !0)])]));
+	}
+});
+//#endregion
+export { M as default };
+
+//# sourceMappingURL=EStatementRow.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/StatementRow/EStatementRow.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EStatementRow.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createElementBlock","_createElementVNode","_createVNode","EStamp","_toDisplayString","_createCommentVNode","_normalizeClass","_createBlock","ESurface","_withCtx","_Fragment","_renderList","_unref","EDescriptionList","EDisclosure","ETimeline","EActions","_renderSlot","EDisclosure_default","EActions_default","ESurface_default","EStamp_default","EDescriptionList_default","ETimeline_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","EStatementRow_vue_vue_type_script_setup_true_lang_default","props","__props","t","useMessages","hasTotals","computed","useLocale","money","formatMoney","n","openBlock","createElementBlock","createElementVNode","createVNode","toDisplayString","createCommentVNode","normalizeClass","createBlock","withCtx","Fragment","renderList","d","unref","_ctx","renderSlot"],"sources":["../../../src/components/StatementRow/EStatementRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport ESurface from \"../Surface/ESurface.vue\";\nimport EStamp from \"../Stamp/EStamp.vue\";\nimport EActions from \"../Actions/EActions.vue\";\nimport EDescriptionList from \"../DescriptionList/EDescriptionList.vue\";\nimport EDisclosure from \"../Disclosure/EDisclosure.vue\";\nimport ETimeline from \"../Timeline/ETimeline.vue\";\nimport type { StatementProps } from \"../StatementCard/types.js\";\nimport { useMessages } from \"../../config.js\";\nimport { useLocale } from \"../../composables/useLocale.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<StatementProps>();\n\ndefineSlots<{\n  /** Buttons for the bar at the foot of the opened row: Pay now first, then Download. */\n  actions?(): unknown;\n}>();\n\nconst t = useMessages();\nconst hasTotals = computed(() => Boolean(props.details && props.details.length));\nconst { formatMoney } = useLocale();\nconst money = (n: number) => formatMoney(n, { currency: props.currency, locale: props.locale });\n</script>\n\n<template>\n  <details class=\"e-srow\">\n    <summary>\n      <EStamp :status=\"status\" :tone=\"tone\" :label=\"label\" :detail=\"detail\" small />\n      <div class=\"e-srow-main\">\n        <p class=\"e-srow-title\">{{ title }}</p>\n        <p v-if=\"subtitle\" class=\"e-srow-sub\">{{ subtitle }}</p>\n      </div>\n      <span class=\"e-srow-amount\">{{ money(amount) }}</span>\n    </summary>\n    <div class=\"e-srow-body\">\n      <div class=\"e-srow-content\">\n        <div v-if=\"reason || hasTotals\" class=\"e-srow-lead\" :class=\"hasTotals ? 'e-srow-lead--totals' : null\">\n          <p v-if=\"reason\" class=\"e-stmt-reason\">{{ reason }}</p>\n          <ESurface v-if=\"hasTotals\" as=\"dl\" class=\"e-totals\" pad=\"sm\">\n            <div v-for=\"d in details\" :key=\"d.label\" class=\"e-totals-row\">\n              <dt>{{ d.label }}</dt>\n              <dd>{{ typeof d.value === \"number\" ? money(d.value) : d.value }}</dd>\n            </div>\n            <div class=\"e-totals-row e-totals-row--sum\">\n              <dt>{{ amountLabel || t(\"amount\") }}</dt>\n              <dd>{{ money(amount) }}</dd>\n            </div>\n          </ESurface>\n        </div>\n        <EDescriptionList v-if=\"parts && parts.length\" :items=\"parts\" />\n        <EDisclosure\n          v-if=\"activity && activity.length\"\n          :title=\"`${activityTitle || t('history')} (${activity.length})`\"\n        >\n          <ETimeline :items=\"activity\" />\n        </EDisclosure>\n      </div>\n      <EActions v-if=\"$slots.actions\" bar><slot name=\"actions\" /></EActions>\n    </div>\n  </details>\n</template>\n\n<style>\n@layer e.account {\n  .e-srow {\n    border-bottom: var(--e-depth) solid var(--e-border);\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    box-shadow: var(--e-edge);\n    transition:\n      background-color var(--e-duration-tap) var(--e-easing-out),\n      box-shadow var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-srow:not([open]):hover {\n    border-bottom-color: var(--e-border-strong);\n    background: var(--e-surface-tint);\n    box-shadow: 0 0 0 1px var(--e-border-strong);\n  }\n\n  .e-srow[open] {\n    border-bottom-width: 0;\n    box-shadow: var(--e-edge);\n  }\n\n  .e-srow[open]:has(> summary:hover) {\n    box-shadow: 0 0 0 1px var(--e-border-strong);\n  }\n\n  .e-srow[open] > summary:hover {\n    background: var(--e-surface-tint);\n    border-bottom-color: var(--e-border-strong);\n  }\n\n  .e-srow > summary {\n    border-radius: var(--e-radius-md);\n    display: grid;\n    grid-template-columns: 8.75rem minmax(0, 1fr) auto;\n    align-items: center;\n    gap: var(--e-space-3);\n    padding: var(--e-space-3) var(--e-space-4);\n    list-style: none;\n    cursor: pointer;\n  }\n\n  .e-srow > summary::-webkit-details-marker {\n    display: none;\n  }\n\n  .e-srow > summary:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-srow .e-stamp {\n    /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties -- two longhands */\n    justify-self: start;\n    align-self: center;\n  }\n\n  .e-srow-main {\n    min-width: 0;\n  }\n\n  .e-srow-title {\n    margin: 0;\n    font: 500 var(--e-text-md) / 1.3 var(--e-font-sans);\n    overflow-wrap: anywhere;\n    text-wrap: balance;\n  }\n\n  .e-srow-sub {\n    margin: var(--e-space-1) 0 0;\n    font: 400 var(--e-text-sm) / 1.4 var(--e-font-sans);\n    color: var(--e-muted);\n    overflow-wrap: anywhere;\n  }\n\n  .e-srow-amount {\n    min-width: 5.5rem;\n    font: 500 var(--e-text-md) / 1.3 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    white-space: nowrap;\n    text-align: end;\n  }\n\n  .e-srow[open] > summary {\n    border-radius: var(--e-radius-md) var(--e-radius-md) 0 0;\n    border-bottom: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-srow-body {\n    container-type: inline-size;\n    border-radius: 0 0 var(--e-radius-md) var(--e-radius-md);\n  }\n\n  .e-srow-content {\n    display: grid;\n    gap: var(--e-space-2);\n    padding: var(--e-space-4);\n  }\n\n  .e-srow-body > .e-actions--bar:last-child {\n    border-end-start-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-srow-body .e-stmt-reason {\n    margin: 0;\n  }\n\n  .e-srow-lead {\n    display: grid;\n    gap: var(--e-space-4);\n    align-items: start;\n  }\n\n  .e-totals {\n    display: grid;\n    gap: var(--e-space-1);\n    margin: 0;\n  }\n\n  .e-totals-row {\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: var(--e-space-3);\n  }\n\n  .e-totals-row dt {\n    font: 400 var(--e-text-sm) / 1.4 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n\n  .e-totals-row dd {\n    margin: 0;\n    font: 500 var(--e-text-sm) / 1.4 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .e-totals-row--sum {\n    margin-top: var(--e-space-2);\n    padding-top: var(--e-space-3);\n    border-top: var(--e-stroke-hair) solid var(--e-border-strong);\n  }\n\n  .e-totals-row--sum dt {\n    font: 500 var(--e-text-md) / 1.3 var(--e-font-sans);\n    color: var(--e-ink);\n  }\n\n  .e-totals-row--sum dd {\n    font-size: var(--e-text-xl);\n  }\n\n  @container (min-width: 34rem) {\n    .e-srow-lead--totals {\n      grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);\n    }\n  }\n\n  @media (max-width: 32rem) {\n    .e-srow > summary {\n      grid-template-columns: minmax(0, 1fr) auto;\n      align-items: start;\n    }\n\n    .e-srow .e-stamp {\n      grid-column: 1 / -1;\n      justify-self: start;\n      padding-inline: var(--e-space-2);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-srow {\n      transition: none;\n    }\n  }\n\n  @media print {\n    .e-srow,\n    .e-totals {\n      box-shadow: none;\n      border: 1px solid #000;\n      break-inside: avoid;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAaA,IAAMoC,IAAQC,GAORC,IAAIC,EAAY,GAChBC,IAAYC,QAAe,GAAQL,EAAM,WAAWA,EAAM,QAAQ,OAAO,GACzE,EAAE,mBAAgBM,EAAU,GAC5BC,KAAS,MAAcC,EAAYC,GAAG;GAAE,UAAUT,EAAM;GAAU,QAAQA,EAAM;EAAO,CAAC;E,kBAI5FnC,EAAA,GAAAC,EAkCU,WAlCVwB,GAkCU,CAjCRvB,EAOU,WAAA,MAAA;GANRC,EAA8EC,GAAA;IAArE,QAAQgC,EAAA;IAAS,MAAMA,EAAA;IAAO,OAAOA,EAAA;IAAQ,QAAQA,EAAA;IAAQ,OAAA;;;;;;;GACtElC,EAGM,OAHNwB,GAGM,CAFJxB,EAAuC,KAAvCyB,GAAuCtB,EAAZ+B,EAAA,KAAK,GAAA,CAAA,GACvBA,EAAA,YAATpC,EAAA,GAAAC,EAAwD,KAAxD2B,GAAwDvB,EAAf+B,EAAA,QAAQ,GAAA,CAAA,K;GAEnDlC,EAAsD,QAAtD2B,GAAsDxB,EAAvBqC,EAAMN,EAAA,MAAM,CAAA,GAAA,CAAA;E,IAE7ClC,EAwBM,OAxBN4B,GAwBM,CAvBJ5B,EAqBM,OArBN6B,GAqBM;GApBOK,EAAA,UAAUG,EAAA,SAArBvC,EAAA,GAAAC,EAYM,OAAA;;IAZ0B,OAAKM,EAAA,CAAC,eAAsBgC,EAAA,QAAS,wBAAA,IAAA,CAAA;G,IAC1DH,EAAA,UAATpC,EAAA,GAAAC,EAAuD,KAAvD+B,GAAuD3B,EAAb+B,EAAA,MAAM,GAAA,CAAA,K,WAChCG,EAAA,SAAhBvC,EAAA,GAAAQ,EASWC,GAAA;;IATgB,IAAG;IAAK,OAAM;IAAW,KAAI;;IACjD,SAAAC,QAAoB,EAAzBV,EAAA,EAAA,GAAAC,EAGMU,GAAA,MAAAC,EAHWwB,EAAA,UAAL,OAAZpC,EAAA,GAAAC,EAGM,OAAA;KAHqB,KAAKuD,EAAE;KAAO,OAAM;I,IAC7CtD,EAAsB,MAAA,MAAAG,EAAfmD,EAAE,KAAK,GAAA,CAAA,GACdtD,EAAqE,MAAA,MAAAG,EAAA,OAAvDmD,EAAE,SAAK,WAAgBd,EAAMc,EAAE,KAAK,IAAIA,EAAE,KAAK,GAAA,CAAA,C,aAE/DtD,EAGM,OAHN+B,GAGM,CAFJ/B,EAAyC,MAAA,MAAAG,EAAlC+B,EAAA,eAAevB,EAAAwB,CAAA,CAAC,CAAA,QAAA,CAAA,GAAA,CAAA,GACvBnC,EAA4B,MAAA,MAAAG,EAArBqC,EAAMN,EAAA,MAAM,CAAA,GAAA,CAAA,C;;;GAIDA,EAAA,SAASA,EAAA,MAAM,UAAvCpC,EAAA,GAAAQ,EAAgEM,GAAA;;IAAhB,OAAOsB,EAAA;;GAE/CA,EAAA,YAAYA,EAAA,SAAS,UAD7BpC,EAAA,GAAAQ,EAKcO,GAAA;;IAHX,OAAK,GAAKqB,EAAA,iBAAiBvB,EAAAwB,CAAA,CAAC,CAAA,SAAA,EAAA,IAAgBD,EAAA,SAAS,OAAM;;IAE5D,SAAA1B,QAA+B,CAA/BP,EAA+Ba,GAAA,EAAnB,OAAOoB,EAAA,SAAQ,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,C;;;E,IAGfrC,EAAAA,OAAO,WAAvBC,EAAA,GAAAQ,EAAsES,GAAA;;GAAtC,KAAA;;GAAI,SAAAP,QAAuB,CAAvBQ,EAAuBwC,EAAA,QAAA,SAAA,C"}

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

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

package/dist/components/Stepper/EStepper.js

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

package/dist/components/Stepper/EStepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EStepper.js","names":["_sfc_main","EStepper_vue_vue_type_script_setup_true_lang_default","EStepper_default"],"sources":["../../../src/components/Stepper/EStepper.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nexport interface Step {\n  /** The name of the step. */\n  label: string;\n  /** `done` is finished, `current` is where the person is, `upcoming` is still ahead (`todo` is accepted as the same thing). */\n  state: \"done\" | \"current\" | \"upcoming\" | \"todo\";\n}\n\ndefineProps<{\n  /** The steps in order. Exactly one is normally `current`. */\n  steps: Step[];\n  /** The list's name for assistive technology, such as \"Registration\". Defaults to \"Progress\". */\n  label?: string;\n}>();\n\nconst t = useMessages();\n</script>\n\n<template>\n  <ol class=\"e-steps\" :aria-label=\"label || t('progress')\">\n    <li\n      v-for=\"(step, i) in steps\"\n      :key=\"i\"\n      class=\"e-step\"\n      :data-state=\"step.state === 'todo' ? 'upcoming' : step.state\"\n      :aria-current=\"step.state === 'current' ? 'step' : undefined\"\n    >\n      <span class=\"e-step-dot\">\n        <EIcon v-if=\"step.state === 'done'\" name=\"check\" small />\n        <template v-else>{{ i + 1 }}</template>\n      </span>\n      <span class=\"e-step-label\">\n        {{ step.label }}\n        <span v-if=\"step.state === 'done'\" class=\"e-sr\"> ({{ t(\"done\") }})</span>\n      </span>\n    </li>\n  </ol>\n</template>\n\n<style>\n@layer e.page {\n  .e-steps {\n    display: grid;\n    grid-auto-flow: column;\n    grid-auto-columns: 1fr;\n    gap: var(--e-space-2);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    counter-reset: s;\n  }\n\n  .e-step {\n    display: grid;\n    justify-items: center;\n    align-content: start;\n    gap: var(--e-space-2);\n    position: relative;\n    text-align: center;\n    min-width: 0;\n  }\n\n  .e-step::before {\n    content: \"\";\n    position: absolute;\n    top: 13px;\n    inset-inline-end: 50%;\n    width: 100%;\n    border-top: 2px solid var(--e-border-strong);\n    z-index: 0;\n  }\n\n  .e-step:first-child::before {\n    display: none;\n  }\n\n  .e-step[data-state=\"done\"]::before,\n  .e-step[data-state=\"current\"]::before {\n    border-top-color: var(--e-primary);\n  }\n\n  .e-step-dot {\n    position: relative;\n    z-index: var(--e-z-raised);\n    display: grid;\n    place-items: center;\n    width: 28px;\n    height: 28px;\n    border-radius: 50%;\n    border: var(--e-stroke-edge) dashed var(--e-border-strong);\n    background: var(--e-surface);\n    color: var(--e-muted);\n    font: 600 var(--e-text-xs) / 1 var(--e-font-mono);\n  }\n\n  .e-step[data-state=\"done\"] .e-step-dot {\n    border: var(--e-stroke-edge) solid var(--e-primary);\n    background: var(--e-primary);\n    color: var(--e-on-primary);\n  }\n\n  .e-step[data-state=\"current\"] .e-step-dot {\n    border: 2px solid var(--e-ink);\n    color: var(--e-ink);\n    background: var(--e-surface);\n  }\n\n  .e-step-label {\n    font: 400 var(--e-text-sm) / 1.3 var(--e-font-sans);\n    color: var(--e-muted);\n    overflow-wrap: anywhere;\n  }\n\n  .e-step[data-state=\"current\"] .e-step-label {\n    color: var(--e-ink);\n    font-weight: 600;\n  }\n\n  .e-step[data-state=\"done\"] .e-step-label {\n    color: var(--e-ink);\n  }\n\n  /* stylelint-disable declaration-block-no-redundant-longhand-properties -- the longhands stay separate */\n  @media (max-width: 32rem) {\n    .e-steps {\n      grid-auto-flow: row;\n      gap: var(--e-space-3);\n    }\n\n    .e-step {\n      grid-template-columns: auto 1fr;\n      justify-items: start;\n      align-items: center;\n      text-align: start;\n    }\n\n    .e-step::before {\n      display: block;\n      top: calc(-1 * var(--e-space-3));\n      inset-inline-end: auto;\n      inset-inline-start: 13px;\n      width: 0;\n      height: var(--e-space-3);\n      border-top: 0;\n      border-inline-start: 2px solid var(--e-border-strong);\n    }\n\n    .e-step:first-child::before {\n      display: none;\n    }\n\n    .e-step[data-state=\"done\"]::before,\n    .e-step[data-state=\"current\"]::before {\n      border-inline-start-color: var(--e-primary);\n    }\n  }\n\n  /* stylelint-enable declaration-block-no-redundant-longhand-properties */\n\n  @media (forced-colors: active) {\n    .e-step[data-state=\"done\"] .e-step-dot {\n      forced-color-adjust: none;\n      background: Highlight;\n      border-color: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Stepper/EStepper.vue.d.ts

@@ -0,0 +1,15 @@
+export interface Step {
+    /** The name of the step. */
+    label: string;
+    /** `done` is finished, `current` is where the person is, `upcoming` is still ahead (`todo` is accepted as the same thing). */
+    state: "done" | "current" | "upcoming" | "todo";
+}
+type __VLS_Props = {
+    /** The steps in order. Exactly one is normally `current`. */
+    steps: Step[];
+    /** The list's name for assistive technology, such as "Registration". Defaults to "Progress". */
+    label?: string;
+};
+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/Stepper/EStepper.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,35 @@
+/* empty css                */
+import { useMessages as e } from "../../config.js";
+import t from "../Icon/EIcon.js";
+import { Fragment as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, defineComponent as c, openBlock as l, renderList as u, toDisplayString as d, unref as f } from "vue";
+//#region src/components/Stepper/EStepper.vue?vue&type=script&setup=true&lang.ts
+var p = ["aria-label"], m = ["data-state", "aria-current"], h = { class: "e-step-dot" }, g = { class: "e-step-label" }, _ = {
+	key: 0,
+	class: "e-sr"
+}, v = /*@__PURE__*/ c({
+	__name: "EStepper",
+	props: {
+		steps: {},
+		label: {}
+	},
+	setup(c) {
+		let v = e();
+		return (e, y) => (l(), a("ol", {
+			class: "e-steps",
+			"aria-label": c.label || f(v)("progress")
+		}, [(l(!0), a(n, null, u(c.steps, (e, c) => (l(), a("li", {
+			key: c,
+			class: "e-step",
+			"data-state": e.state === "todo" ? "upcoming" : e.state,
+			"aria-current": e.state === "current" ? "step" : void 0
+		}, [o("span", h, [e.state === "done" ? (l(), r(t, {
+			key: 0,
+			name: "check",
+			small: ""
+		})) : (l(), a(n, { key: 1 }, [s(d(c + 1), 1)], 64))]), o("span", g, [s(d(e.label) + " ", 1), e.state === "done" ? (l(), a("span", _, " (" + d(f(v)("done")) + ")", 1)) : i("", !0)])], 8, m))), 128))], 8, p));
+	}
+});
+//#endregion
+export { v as default };
+
+//# sourceMappingURL=EStepper.vue_vue_type_script_setup_true_lang.js.map