@eos-ui/vue 0.1.1 → 0.2.0

package/dist/components/Chip/EChip.vue_vue_type_script_setup_true_lang.js

@@ -1,18 +0,0 @@
-/* empty css                */
-import { computed as e, createElementBlock as t, defineComponent as n, normalizeClass as r, openBlock as i, renderSlot as a } from "vue";
-//#region src/components/Chip/EChip.vue?vue&type=script&setup=true&lang.ts
-var o = /*@__PURE__*/ n({
-	__name: "EChip",
-	props: {
-		tone: {},
-		variant: { default: "solid" }
-	},
-	setup(n) {
-		let o = n, s = e(() => o.tone && o.tone !== "ink" && o.tone !== "neutral" ? `e-chip--${o.tone}` : null);
-		return (e, o) => (i(), t("span", { class: r(["e-chip", [s.value, n.variant === "subtle" && "e-chip--subtle"]]) }, [a(e.$slots, "default")], 2));
-	}
-});
-//#endregion
-export { o as default };
-
-//# sourceMappingURL=EChip.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/Chip/EChip.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EChip.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_renderSlot","EChip_vue_vue_type_script_setup_true_lang_default","props","__props","toneClass","computed","openBlock","createElementBlock","normalizeClass","renderSlot","_ctx"],"sources":["../../../src/components/Chip/EChip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport \"../../styles/base.css\";\n\nexport type ChipTone = \"neutral\" | \"ink\" | \"success\" | \"info\" | \"warning\" | \"danger\";\n\nconst props = withDefaults(defineProps<{\n  /** `success` (paid, confirmed, signed), `info` (due, scheduled, pending), `warning` (needs attention), `danger` (overdue, cancelled, failed). None is neutral. */\n  tone?: ChipTone;\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}>(), { variant: \"solid\" });\n\ndefineSlots<{\n  /** The word. Write sentence case; the chip sets it in capitals. */\n  default(): unknown;\n}>();\n\nconst toneClass = computed(() =>\n  props.tone && props.tone !== \"ink\" && props.tone !== \"neutral\" ? `e-chip--${props.tone}` : null,\n);\n</script>\n\n<template>\n  <span class=\"e-chip\" :class=\"[toneClass, variant === 'subtle' && 'e-chip--subtle']\"><slot /></span>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-chip {\n    --e-chip-text: var(--e-ink);\n    --e-chip-soft: var(--e-surface-tint);\n    --e-chip-on: var(--e-surface);\n\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-1);\n    height: var(--e-chip-height);\n    padding: 0 var(--e-space-3);\n    border-radius: var(--e-radius-pill);\n    background: var(--e-chip-text);\n    color: var(--e-chip-on);\n    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-chip-text);\n    font: 600 var(--e-text-xs) / 1 var(--e-font-mono);\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    white-space: nowrap;\n    /* stylelint-disable declaration-block-no-redundant-longhand-properties -- two longhands */\n    align-self: flex-start;\n    justify-self: start;\n    /* stylelint-enable declaration-block-no-redundant-longhand-properties */\n  }\n\n  .e-chip--success {\n    --e-chip-text: var(--e-secondary);\n    --e-chip-soft: var(--e-secondary-soft);\n    --e-chip-on: var(--e-on-secondary);\n  }\n\n  .e-chip--info {\n    --e-chip-text: var(--e-primary);\n    --e-chip-soft: var(--e-surface-tint);\n    --e-chip-on: var(--e-on-primary);\n  }\n\n  .e-chip--danger {\n    --e-chip-text: var(--e-danger);\n    --e-chip-soft: var(--e-danger-soft);\n    --e-chip-on: var(--e-on-danger);\n  }\n\n  .e-chip--warning {\n    --e-chip-text: var(--e-warning-strong);\n    --e-chip-soft: var(--e-warning-soft);\n  }\n\n  .e-chip--subtle {\n    background: var(--e-chip-soft);\n    color: var(--e-chip-text);\n  }\n\n  @media (forced-colors: active) {\n    .e-chip {\n      border: 1px solid CanvasText;\n    }\n  }\n\n  @media print {\n    .e-chip {\n      border: 1px solid #000;\n      background: none;\n      color: #000;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;EAMA,IAAMK,IAAQC,GAYRC,IAAYC,QAChBH,EAAM,QAAQA,EAAM,SAAS,SAASA,EAAM,SAAS,YAAY,WAAWA,EAAM,SAAS,IAC7F;E,kBAIEL,EAAA,GAAAC,EAAmG,QAAA,EAA7F,OAAKC,EAAA,CAAC,UAAQ,CAAUK,EAAA,OAAWD,EAAA,YAAO,YAAA,gBAAA,CAAA,CAAA,E,IAAoCH,EAAQU,EAAA,QAAA,SAAA,C"}

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

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

package/dist/components/Combobox/EHighlight.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EHighlight.js","names":["EHighlight_default","defineComponent","i","props","h"],"sources":["../../../src/components/Combobox/EHighlight.ts"],"sourcesContent":["import { defineComponent, h } from \"vue\";\n\nexport default defineComponent({\n  name: \"EHighlight\",\n  props: {\n    text: { type: String, required: true },\n    query: { type: String, required: true },\n  },\n  setup(props) {\n    return () => {\n      const i = props.query ? props.text.toLowerCase().indexOf(props.query) : -1;\n      if (i < 0) return props.text;\n      return [\n        props.text.slice(0, i),\n        h(\"mark\", props.text.slice(i, i + props.query.length)),\n        props.text.slice(i + props.query.length),\n      ];\n    };\n  },\n});\n"],"mappings":";;AAEA,IAAAA,IAAeC,EAAgB;CAC7B,MAAM;CACN,OAAO;EACL,MAAM;GAAE,MAAM;GAAQ,UAAU;EAAK;EACrC,OAAO;GAAE,MAAM;GAAQ,UAAU;EAAK;CACxC;CACA,MAAM,GAAO;EACX,aAAa;GACX,IAAMC,IAAIC,EAAM,QAAQA,EAAM,KAAK,YAAY,CAAC,CAAC,QAAQA,EAAM,KAAK,IAAI;GAExE,OADID,IAAI,IAAUC,EAAM,OACjB;IACLA,EAAM,KAAK,MAAM,GAAGD,CAAC;IACrBE,EAAE,QAAQD,EAAM,KAAK,MAAMD,GAAGA,IAAIC,EAAM,MAAM,MAAM,CAAC;IACrDA,EAAM,KAAK,MAAMD,IAAIC,EAAM,MAAM,MAAM;GACzC;EACF;CACF;AACF,CAAC"}

package/dist/components/DetailRow/EDetailRow.js

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

package/dist/components/DetailRow/EDetailRow.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EDetailRow.js","names":["_sfc_main","EDetailRow_vue_vue_type_script_setup_true_lang_default","EDetailRow_default"],"sources":["../../../src/components/DetailRow/EDetailRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getCurrentInstance } from \"vue\";\nimport EButton from \"../Button/EButton.vue\";\nimport EChip from \"../Chip/EChip.vue\";\nimport type { ChipTone } from \"../Chip/EChip.vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** What the detail is, such as \"Email\". Names the Edit button for screen readers. */\n    label: string;\n    /** A word in a chip after the value, such as \"Verified\" or \"Needs update\". */\n    status?: string;\n    /** The chip's tone. */\n    tone?: ChipTone;\n    /** Forces the Edit button on or off. Left out, it shows when an `@edit` listener is attached. */\n    editable?: boolean;\n  }>(),\n  { editable: undefined },\n);\n\nconst emit = defineEmits<{\n  /** The Edit button was pressed. The button appears only when something listens. */\n  edit: [];\n}>();\n\ndefineSlots<{\n  /** The value. */\n  default(): unknown;\n}>();\n\nconst t = useMessages();\nconst instance = getCurrentInstance();\nconst showEdit = () => props.editable ?? Boolean(instance?.vnode.props?.onEdit);\n\nfunction say(key: string, fallback: string, vars?: Record<string, string>) {\n  const text = t(key, vars);\n  return text === key ? fallback.replace(/\\{(\\w+)\\}/g, (m, k: string) => vars?.[k] ?? m) : text;\n}\n</script>\n\n<template>\n  <div class=\"e-detail\">\n    <div class=\"e-detail-main\">\n      <p class=\"e-kicker e-detail-label\">{{ label }}</p>\n      <p class=\"e-detail-value\"><slot /></p>\n    </div>\n    <EChip v-if=\"status\" :tone=\"tone\">{{ status }}</EChip>\n    <span v-else class=\"e-detail-gap\" aria-hidden=\"true\" />\n    <EButton\n      v-if=\"showEdit()\"\n      variant=\"quiet\"\n      :aria-label=\"say('editItem', 'Edit {label}', { label })\"\n      @click=\"emit('edit')\"\n    >\n      {{ say(\"edit\", \"Edit\") }}\n    </EButton>\n  </div>\n</template>\n\n<style>\n@layer e.account {\n  .e-detail {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) 8.75rem auto;\n    align-items: center;\n    gap: var(--e-space-1) var(--e-space-3);\n    padding: var(--e-space-3) 0;\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-detail-main {\n    display: grid;\n    gap: var(--e-space-1);\n    min-width: 0;\n  }\n\n  .e-detail-label {\n    margin: 0;\n  }\n\n  .e-detail-value {\n    margin: 0;\n    font: 400 var(--e-text-md) / 1.4 var(--e-font-sans);\n    overflow-wrap: anywhere;\n  }\n\n  .e-detail .e-chip {\n    /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties -- two longhands */\n    align-self: center;\n    justify-self: end;\n  }\n\n  .e-detail-gap {\n    display: block;\n  }\n\n  .e-detail:first-child {\n    border-top: 0;\n  }\n\n  @media (max-width: 32rem) {\n    .e-detail {\n      grid-template-columns: auto minmax(0, 1fr);\n    }\n\n    .e-detail-main {\n      grid-column: 1 / -1;\n    }\n\n    .e-detail .e-chip {\n      justify-self: start;\n    }\n\n    .e-detail-gap {\n      display: none;\n    }\n\n    .e-detail .e-btn {\n      grid-column: 2;\n      justify-self: end;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/DetailRow/EDetailRow.vue.d.ts

@@ -1,30 +0,0 @@
-import { ChipTone } from '../Chip/EChip.vue.js';
-type __VLS_Props = {
-    /** What the detail is, such as "Email". Names the Edit button for screen readers. */
-    label: string;
-    /** A word in a chip after the value, such as "Verified" or "Needs update". */
-    status?: string;
-    /** The chip's tone. */
-    tone?: ChipTone;
-    /** Forces the Edit button on or off. Left out, it shows when an `@edit` listener is attached. */
-    editable?: boolean;
-};
-type __VLS_Slots = {
-    /** The value. */
-    default(): unknown;
-};
-declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    edit: () => any;
-}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onEdit?: (() => any) | undefined;
-}>, {
-    editable: boolean;
-}, {}, {}, {}, 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/DetailRow/EDetailRow.vue_vue_type_script_setup_true_lang.js

@@ -1,53 +0,0 @@
-/* empty css                */
-import { useMessages as e } from "../../config.js";
-import t from "../Button/EButton.js";
-import n from "../Chip/EChip.js";
-import { createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, defineComponent as c, getCurrentInstance as l, openBlock as u, renderSlot as d, toDisplayString as f, withCtx as p } from "vue";
-//#region src/components/DetailRow/EDetailRow.vue?vue&type=script&setup=true&lang.ts
-var m = { class: "e-detail" }, h = { class: "e-detail-main" }, g = { class: "e-kicker e-detail-label" }, _ = { class: "e-detail-value" }, v = {
-	key: 1,
-	class: "e-detail-gap",
-	"aria-hidden": "true"
-}, y = /*@__PURE__*/ c({
-	__name: "EDetailRow",
-	props: {
-		label: {},
-		status: {},
-		tone: {},
-		editable: {
-			type: Boolean,
-			default: void 0
-		}
-	},
-	emits: ["edit"],
-	setup(c, { emit: y }) {
-		let b = c, x = y, S = e(), C = l(), w = () => b.editable ?? !!C?.vnode.props?.onEdit;
-		function T(e, t, n) {
-			let r = S(e, n);
-			return r === e ? t.replace(/\{(\w+)\}/g, (e, t) => n?.[t] ?? e) : r;
-		}
-		return (e, l) => (u(), a("div", m, [
-			o("div", h, [o("p", g, f(c.label), 1), o("p", _, [d(e.$slots, "default")])]),
-			c.status ? (u(), r(n, {
-				key: 0,
-				tone: c.tone
-			}, {
-				default: p(() => [s(f(c.status), 1)]),
-				_: 1
-			}, 8, ["tone"])) : (u(), a("span", v)),
-			w() ? (u(), r(t, {
-				key: 2,
-				variant: "quiet",
-				"aria-label": T("editItem", "Edit {label}", { label: c.label }),
-				onClick: l[0] ||= (e) => x("edit")
-			}, {
-				default: p(() => [s(f(T("edit", "Edit")), 1)]),
-				_: 1
-			}, 8, ["aria-label"])) : i("", !0)
-		]));
-	}
-});
-//#endregion
-export { y as default };
-
-//# sourceMappingURL=EDetailRow.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/DetailRow/EDetailRow.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EDetailRow.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createElementVNode","_toDisplayString","_renderSlot","_createBlock","EChip","_withCtx","_createTextVNode","EButton","_createCommentVNode","EButton_default","EChip_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","EDetailRow_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","t","useMessages","instance","getCurrentInstance","showEdit","say","text","key","vars","fallback","k","m","openBlock","createElementBlock","createElementVNode","toDisplayString","renderSlot","_ctx","createBlock","withCtx","createTextVNode","_cache","createCommentVNode"],"sources":["../../../src/components/DetailRow/EDetailRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getCurrentInstance } from \"vue\";\nimport EButton from \"../Button/EButton.vue\";\nimport EChip from \"../Chip/EChip.vue\";\nimport type { ChipTone } from \"../Chip/EChip.vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** What the detail is, such as \"Email\". Names the Edit button for screen readers. */\n    label: string;\n    /** A word in a chip after the value, such as \"Verified\" or \"Needs update\". */\n    status?: string;\n    /** The chip's tone. */\n    tone?: ChipTone;\n    /** Forces the Edit button on or off. Left out, it shows when an `@edit` listener is attached. */\n    editable?: boolean;\n  }>(),\n  { editable: undefined },\n);\n\nconst emit = defineEmits<{\n  /** The Edit button was pressed. The button appears only when something listens. */\n  edit: [];\n}>();\n\ndefineSlots<{\n  /** The value. */\n  default(): unknown;\n}>();\n\nconst t = useMessages();\nconst instance = getCurrentInstance();\nconst showEdit = () => props.editable ?? Boolean(instance?.vnode.props?.onEdit);\n\nfunction say(key: string, fallback: string, vars?: Record<string, string>) {\n  const text = t(key, vars);\n  return text === key ? fallback.replace(/\\{(\\w+)\\}/g, (m, k: string) => vars?.[k] ?? m) : text;\n}\n</script>\n\n<template>\n  <div class=\"e-detail\">\n    <div class=\"e-detail-main\">\n      <p class=\"e-kicker e-detail-label\">{{ label }}</p>\n      <p class=\"e-detail-value\"><slot /></p>\n    </div>\n    <EChip v-if=\"status\" :tone=\"tone\">{{ status }}</EChip>\n    <span v-else class=\"e-detail-gap\" aria-hidden=\"true\" />\n    <EButton\n      v-if=\"showEdit()\"\n      variant=\"quiet\"\n      :aria-label=\"say('editItem', 'Edit {label}', { label })\"\n      @click=\"emit('edit')\"\n    >\n      {{ say(\"edit\", \"Edit\") }}\n    </EButton>\n  </div>\n</template>\n\n<style>\n@layer e.account {\n  .e-detail {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) 8.75rem auto;\n    align-items: center;\n    gap: var(--e-space-1) var(--e-space-3);\n    padding: var(--e-space-3) 0;\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-detail-main {\n    display: grid;\n    gap: var(--e-space-1);\n    min-width: 0;\n  }\n\n  .e-detail-label {\n    margin: 0;\n  }\n\n  .e-detail-value {\n    margin: 0;\n    font: 400 var(--e-text-md) / 1.4 var(--e-font-sans);\n    overflow-wrap: anywhere;\n  }\n\n  .e-detail .e-chip {\n    /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties -- two longhands */\n    align-self: center;\n    justify-self: end;\n  }\n\n  .e-detail-gap {\n    display: block;\n  }\n\n  .e-detail:first-child {\n    border-top: 0;\n  }\n\n  @media (max-width: 32rem) {\n    .e-detail {\n      grid-template-columns: auto minmax(0, 1fr);\n    }\n\n    .e-detail-main {\n      grid-column: 1 / -1;\n    }\n\n    .e-detail .e-chip {\n      justify-self: start;\n    }\n\n    .e-detail-gap {\n      display: none;\n    }\n\n    .e-detail .e-btn {\n      grid-column: 2;\n      justify-self: end;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAQA,IAAMoB,IAAQC,GAcRC,IAAOH,GAUPI,IAAIC,EAAY,GAChBC,IAAWC,EAAmB,GAC9BC,UAAiBP,EAAM,YAAY,EAAQK,GAAU,MAAM,OAAO;EAExE,SAASG,EAAI,GAAa,GAAkB,GAA+B;GACzE,IAAMC,IAAON,EAAEO,GAAKC,CAAI;GACxB,OAAOF,MAASC,IAAME,EAAS,QAAQ,eAAe,GAAG,MAAcD,IAAOE,MAAMC,CAAC,IAAIL;EAC3F;E,kBAIE7B,EAAA,GAAAC,EAeM,OAfNY,GAeM;GAdJX,EAGM,OAHNY,GAGM,CAFJZ,EAAkD,KAAlDa,GAAkDZ,EAAZkB,EAAA,KAAK,GAAA,CAAA,GAC3CnB,EAAsC,KAAtCc,GAAsC,CAAZZ,EAAQoC,EAAA,QAAA,SAAA,C;GAEvBnB,EAAA,UAAbrB,EAAA,GAAAK,EAAsDC,GAAA;;IAAhC,MAAMe,EAAA;;IAAM,SAAAd,QAAY,CAATC,EAAAL,EAAAkB,EAAA,MAAM,GAAA,CAAA,C;;G,oBAC3CrB,EAAA,GAAAC,EAAuD,QAAvDgB,CAAuD;GAE/CU,EAAQ,KADhB3B,EAAA,GAAAK,EAOUI,GAAA;;IALR,SAAQ;IACP,cAAYmB,EAAG,YAAA,gBAAA,EAAA,OAA+BP,EAAA,MAAK,CAAA;IACnD,SAAK,AAAAuB,EAAA,QAAA,MAAEtB,EAAI,MAAA;;IAEZ,SAAAf,QAAyB,CAAtBC,EAAAL,EAAAyB,EAAG,QAAA,MAAA,CAAA,GAAA,CAAA,C"}

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

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

package/dist/components/ErrorSummary/EErrorSummary.js

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

package/dist/components/ErrorSummary/EErrorSummary.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EErrorSummary.js","names":["_sfc_main","EErrorSummary_vue_vue_type_script_setup_true_lang_default","EErrorSummary_default"],"sources":["../../../src/components/ErrorSummary/EErrorSummary.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface ErrorSummaryItem {\n  /** The field's name, shown first in medium weight (\"Email: Enter an email address\"). Leave it out when the message already names the field. */\n  field?: string;\n  /** What is wrong and how to fix it, written the same way as the field's own error. */\n  message: string;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { nextTick, onMounted, ref, watch } from \"vue\";\nimport ENotice from \"../Notice/ENotice.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** What went wrong. The summary shows nothing while the list is empty. */\n    errors: ErrorSummaryItem[];\n    /** The heading. Defaults to \"There is a problem\". */\n    title?: string;\n    /** The level of the heading element, 1 to 6. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n    /** Moves focus to the summary when errors appear, so keyboard and screen reader users land on it. */\n    autoFocus?: boolean;\n  }>(),\n  { headingLevel: 2, autoFocus: true },\n);\n\nconst t = useMessages();\nconst titleId = useUid();\nconst root = ref<HTMLElement>();\n\nfunction focusSummary() {\n  if (!props.errors.length || !props.autoFocus || !root.value) return;\n  root.value.focus();\n  root.value.scrollIntoView?.({ block: \"nearest\" });\n}\n\nonMounted(() => nextTick(focusSummary));\nwatch(\n  () => props.errors.length,\n  async () => {\n    await nextTick();\n    focusSummary();\n  },\n);\n</script>\n\n<template>\n  <div v-if=\"errors.length\" ref=\"root\" class=\"e-errsum\" role=\"alert\" tabindex=\"-1\" :aria-labelledby=\"titleId\">\n    <ENotice\n      tone=\"danger\"\n      :role=\"false\"\n      :heading-level=\"headingLevel\"\n      :title-id=\"titleId\"\n      :title=\"title ?? t('errorSummary')\"\n    >\n      <ul class=\"e-errsum-list\">\n        <li v-for=\"(error, i) in errors\" :key=\"`${i}-${error.message}`\">\n          <strong v-if=\"error.field\">{{ error.field }}</strong\n          >{{ error.field ? \": \" : \"\" }}{{ error.message }}\n        </li>\n      </ul>\n    </ENotice>\n  </div>\n</template>\n\n<style>\n@layer e.containers {\n  .e-errsum {\n    border-radius: var(--e-radius-md);\n  }\n\n  .e-errsum:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-errsum-list {\n    display: grid;\n    gap: var(--e-space-1);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .e-errsum-list li {\n    position: relative;\n    padding-inline-start: var(--e-space-4);\n  }\n\n  .e-errsum-list li::before {\n    content: \"\";\n    position: absolute;\n    inset-inline-start: 0;\n    top: 0.5em;\n    width: 7px;\n    height: 7px;\n    border-radius: calc(var(--e-radius-sm) / 2);\n    background: var(--e-danger);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/ErrorSummary/EErrorSummary.vue.d.ts

@@ -1,30 +0,0 @@
-export interface ErrorSummaryItem {
-    /** The field's name, shown first in medium weight ("Email: Enter an email address"). Leave it out when the message already names the field. */
-    field?: string;
-    /** What is wrong and how to fix it, written the same way as the field's own error. */
-    message: string;
-}
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: import('vue').DefineComponent<{
-    /** What went wrong. The summary shows nothing while the list is empty. */
-    errors: ErrorSummaryItem[];
-    /** The heading. Defaults to "There is a problem". */
-    title?: string;
-    /** The level of the heading element, 1 to 6. */
-    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
-    /** Moves focus to the summary when errors appear, so keyboard and screen reader users land on it. */
-    autoFocus?: boolean;
-}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
-    /** What went wrong. The summary shows nothing while the list is empty. */
-    errors: ErrorSummaryItem[];
-    /** The heading. Defaults to "There is a problem". */
-    title?: string;
-    /** The level of the heading element, 1 to 6. */
-    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
-    /** Moves focus to the summary when errors appear, so keyboard and screen reader users land on it. */
-    autoFocus?: boolean;
-}> & Readonly<{}>, {
-    autoFocus: boolean;
-    headingLevel: 1 | 2 | 3 | 4 | 5 | 6;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/ErrorSummary/EErrorSummary.vue_vue_type_script_setup_true_lang.js

@@ -1,52 +0,0 @@
-/* empty css                */
-import { useMessages as e } from "../../config.js";
-import { useUid as t } from "../../composables/useUid.js";
-import n from "../Notice/ENotice.js";
-import { Fragment as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, nextTick as u, onMounted as d, openBlock as f, ref as p, renderList as m, toDisplayString as h, unref as g, watch as _, withCtx as v } from "vue";
-//#region src/components/ErrorSummary/EErrorSummary.vue?vue&type=script&setup=true&lang.ts
-var y = ["aria-labelledby"], b = { class: "e-errsum-list" }, x = { key: 0 }, S = /*@__PURE__*/ l({
-	__name: "EErrorSummary",
-	props: {
-		errors: {},
-		title: {},
-		headingLevel: { default: 2 },
-		autoFocus: {
-			type: Boolean,
-			default: !0
-		}
-	},
-	setup(l) {
-		let S = l, C = e(), w = t(), T = p();
-		function E() {
-			S.errors.length && S.autoFocus && T.value && (T.value.focus(), T.value.scrollIntoView?.({ block: "nearest" }));
-		}
-		return d(() => u(E)), _(() => S.errors.length, async () => {
-			await u(), E();
-		}), (e, t) => l.errors.length ? (f(), a("div", {
-			key: 0,
-			ref_key: "root",
-			ref: T,
-			class: "e-errsum",
-			role: "alert",
-			tabindex: "-1",
-			"aria-labelledby": g(w)
-		}, [c(n, {
-			tone: "danger",
-			role: !1,
-			"heading-level": l.headingLevel,
-			"title-id": g(w),
-			title: l.title ?? g(C)("errorSummary")
-		}, {
-			default: v(() => [o("ul", b, [(f(!0), a(r, null, m(l.errors, (e, t) => (f(), a("li", { key: `${t}-${e.message}` }, [e.field ? (f(), a("strong", x, h(e.field), 1)) : i("", !0), s(h(e.field ? ": " : "") + h(e.message), 1)]))), 128))])]),
-			_: 1
-		}, 8, [
-			"heading-level",
-			"title-id",
-			"title"
-		])], 8, y)) : i("", !0);
-	}
-});
-//#endregion
-export { S as default };
-
-//# sourceMappingURL=EErrorSummary.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ErrorSummary/EErrorSummary.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EErrorSummary.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_unref","_createVNode","ENotice","_withCtx","_createElementVNode","_Fragment","_renderList","_toDisplayString","_createCommentVNode","_createTextVNode","ENotice_default","_hoisted_1","_hoisted_2","_hoisted_3","EErrorSummary_vue_vue_type_script_setup_true_lang_default","props","__props","t","useMessages","titleId","useUid","root","ref","focusSummary","onMounted","nextTick","watch","openBlock","createElementBlock","unref","createVNode","withCtx","createElementVNode","Fragment","renderList","i","error","toDisplayString","createCommentVNode","createTextVNode"],"sources":["../../../src/components/ErrorSummary/EErrorSummary.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface ErrorSummaryItem {\n  /** The field's name, shown first in medium weight (\"Email: Enter an email address\"). Leave it out when the message already names the field. */\n  field?: string;\n  /** What is wrong and how to fix it, written the same way as the field's own error. */\n  message: string;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { nextTick, onMounted, ref, watch } from \"vue\";\nimport ENotice from \"../Notice/ENotice.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** What went wrong. The summary shows nothing while the list is empty. */\n    errors: ErrorSummaryItem[];\n    /** The heading. Defaults to \"There is a problem\". */\n    title?: string;\n    /** The level of the heading element, 1 to 6. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n    /** Moves focus to the summary when errors appear, so keyboard and screen reader users land on it. */\n    autoFocus?: boolean;\n  }>(),\n  { headingLevel: 2, autoFocus: true },\n);\n\nconst t = useMessages();\nconst titleId = useUid();\nconst root = ref<HTMLElement>();\n\nfunction focusSummary() {\n  if (!props.errors.length || !props.autoFocus || !root.value) return;\n  root.value.focus();\n  root.value.scrollIntoView?.({ block: \"nearest\" });\n}\n\nonMounted(() => nextTick(focusSummary));\nwatch(\n  () => props.errors.length,\n  async () => {\n    await nextTick();\n    focusSummary();\n  },\n);\n</script>\n\n<template>\n  <div v-if=\"errors.length\" ref=\"root\" class=\"e-errsum\" role=\"alert\" tabindex=\"-1\" :aria-labelledby=\"titleId\">\n    <ENotice\n      tone=\"danger\"\n      :role=\"false\"\n      :heading-level=\"headingLevel\"\n      :title-id=\"titleId\"\n      :title=\"title ?? t('errorSummary')\"\n    >\n      <ul class=\"e-errsum-list\">\n        <li v-for=\"(error, i) in errors\" :key=\"`${i}-${error.message}`\">\n          <strong v-if=\"error.field\">{{ error.field }}</strong\n          >{{ error.field ? \": \" : \"\" }}{{ error.message }}\n        </li>\n      </ul>\n    </ENotice>\n  </div>\n</template>\n\n<style>\n@layer e.containers {\n  .e-errsum {\n    border-radius: var(--e-radius-md);\n  }\n\n  .e-errsum:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-errsum-list {\n    display: grid;\n    gap: var(--e-space-1);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .e-errsum-list li {\n    position: relative;\n    padding-inline-start: var(--e-space-4);\n  }\n\n  .e-errsum-list li::before {\n    content: \"\";\n    position: absolute;\n    inset-inline-start: 0;\n    top: 0.5em;\n    width: 7px;\n    height: 7px;\n    border-radius: calc(var(--e-radius-sm) / 2);\n    background: var(--e-danger);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAgBA,IAAMiB,IAAQC,GAcRC,IAAIC,EAAY,GAChBC,IAAUC,EAAO,GACjBC,IAAOC,EAAiB;EAE9B,SAASC,IAAe;GACtB,AAAKR,EAAM,OAAO,UAAWA,EAAM,aAAcM,EAAK,UACtDA,EAAK,MAAM,MAAM,GACjBA,EAAK,MAAM,iBAAiB,EAAE,OAAO,UAAU,CAAC;EAClD;E,OAEAG,QAAgBC,EAASF,CAAY,CAAC,GACtCG,QACQX,EAAM,OAAO,QACnB,YAAY;GAEV,AADA,MAAMU,EAAS,GACfF,EAAa;EACf,CACF,I,SAIaP,EAAA,OAAO,UAAlBlB,EAAA,GAAAC,EAeM,OAAA;;GAfwB,SAAA;GAAJ,KAAIsB;GAAO,OAAM;GAAW,MAAK;GAAQ,UAAS;GAAM,mBAAiBrB,EAAAmB,CAAA;E,IACjGlB,EAaUC,GAAA;GAZR,MAAK;GACJ,MAAM;GACN,iBAAec,EAAA;GACf,YAAUhB,EAAAmB,CAAA;GACV,OAAOH,EAAA,SAAShB,EAAAiB,CAAA,CAAC,CAAA,cAAA;;GAElB,SAAAd,QAKK,CALLC,EAKK,MALLQ,GAKK,EAJHd,EAAA,EAAA,GAAAC,EAGKM,GAAA,MAAAC,EAHoBU,EAAA,SAAb,GAAO,OAAnBlB,EAAA,GAAAC,EAGK,MAAA,EAH6B,KAAG,GAAKoC,EAAC,GAAIC,EAAM,U,IACrCA,EAAM,SAApBtC,EAAA,GAAAC,EACC,UAAAc,GAAAN,EAD6B6B,EAAM,KAAK,GAAA,CAAA,K,WACrC3B,EAAAF,EAAA6B,EAAM,QAAK,OAAA,EAAA,IAAA7B,EAAkB6B,EAAM,OAAO,GAAA,CAAA,C"}

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

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

package/dist/components/FormSection/EFormSection.js

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

package/dist/components/FormSection/EFormSection.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EFormSection.js","names":["_sfc_main","EFormSection_vue_vue_type_script_setup_true_lang_default","EFormSection_default"],"sources":["../../../src/components/FormSection/EFormSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EStack from \"../Stack/EStack.vue\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The question the section answers, such as \"Your details\". */\n    title: string;\n    /** A short line under the title. */\n    description?: string;\n    /** The heading element, 1 to 4. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n    /** Space between the fields: a space token number (1, 2, 3, 4, 6, 8) or any CSS length. */\n    gap?: number | string;\n    /** The id of the heading; the section is labelled by it. Generated when left out. */\n    id?: string;\n  }>(),\n  { headingLevel: 2, gap: 4 },\n);\n\ndefineSlots<{\n  /** The fields, spaced evenly. */\n  default(): unknown;\n}>();\n\nconst id = useUid(() => props.id);\n</script>\n\n<template>\n  <section class=\"e-formsection\" :aria-labelledby=\"id\">\n    <div class=\"e-formsection-head\">\n      <component :is=\"`h${headingLevel}`\" :id=\"id\" class=\"e-formsection-title\">{{ title }}</component>\n      <p v-if=\"description\" class=\"e-formsection-desc\">{{ description }}</p>\n    </div>\n    <EStack :gap=\"gap\"><slot /></EStack>\n  </section>\n</template>\n\n<style>\n@layer e.composites {\n  .e-formsection {\n    display: grid;\n    gap: var(--e-space-4);\n    padding-top: var(--e-space-6);\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-formsection:first-child {\n    padding-top: 0;\n    border-top: 0;\n  }\n\n  .e-formsection-title {\n    margin: 0;\n    font: 500 var(--e-text-xl)/1.25 var(--e-font-sans);\n  }\n\n  .e-formsection-desc {\n    margin: var(--e-space-1) 0 0;\n    max-width: var(--e-measure);\n    font: 400 var(--e-text-md)/1.45 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/FormSection/EFormSection.vue.d.ts

@@ -1,28 +0,0 @@
-type __VLS_Props = {
-    /** The question the section answers, such as "Your details". */
-    title: string;
-    /** A short line under the title. */
-    description?: string;
-    /** The heading element, 1 to 4. */
-    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
-    /** Space between the fields: a space token number (1, 2, 3, 4, 6, 8) or any CSS length. */
-    gap?: number | string;
-    /** The id of the heading; the section is labelled by it. Generated when left out. */
-    id?: string;
-};
-type __VLS_Slots = {
-    /** The fields, spaced evenly. */
-    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<{}>, {
-    headingLevel: 1 | 2 | 3 | 4 | 5 | 6;
-    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;
-    };
-};

package/dist/components/FormSection/EFormSection.vue_vue_type_script_setup_true_lang.js

@@ -1,38 +0,0 @@
-/* empty css                */
-import { useUid as e } from "../../composables/useUid.js";
-import t from "../Stack/EStack.js";
-import { createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, openBlock as l, renderSlot as u, resolveDynamicComponent as d, toDisplayString as f, unref as p, withCtx as m } from "vue";
-//#region src/components/FormSection/EFormSection.vue?vue&type=script&setup=true&lang.ts
-var h = ["aria-labelledby"], g = { class: "e-formsection-head" }, _ = {
-	key: 0,
-	class: "e-formsection-desc"
-}, v = /*@__PURE__*/ c({
-	__name: "EFormSection",
-	props: {
-		title: {},
-		description: {},
-		headingLevel: { default: 2 },
-		gap: { default: 4 },
-		id: {}
-	},
-	setup(c) {
-		let v = c, y = e(() => v.id);
-		return (e, v) => (l(), i("section", {
-			class: "e-formsection",
-			"aria-labelledby": p(y)
-		}, [a("div", g, [(l(), n(d(`h${c.headingLevel}`), {
-			id: p(y),
-			class: "e-formsection-title"
-		}, {
-			default: m(() => [o(f(c.title), 1)]),
-			_: 1
-		}, 8, ["id"])), c.description ? (l(), i("p", _, f(c.description), 1)) : r("", !0)]), s(t, { gap: c.gap }, {
-			default: m(() => [u(e.$slots, "default")]),
-			_: 3
-		}, 8, ["gap"])], 8, h));
-	}
-});
-//#endregion
-export { v as default };
-
-//# sourceMappingURL=EFormSection.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/FormSection/EFormSection.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EFormSection.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_unref","_createElementVNode","_createBlock","_resolveDynamicComponent","_withCtx","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode","EStack","_renderSlot","EStack_default","_hoisted_1","_hoisted_2","_hoisted_3","EFormSection_vue_vue_type_script_setup_true_lang_default","props","__props","id","useUid","openBlock","createElementBlock","unref","createElementVNode","createBlock","resolveDynamicComponent","withCtx","createTextVNode","toDisplayString","createCommentVNode","createVNode","renderSlot","_ctx"],"sources":["../../../src/components/FormSection/EFormSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EStack from \"../Stack/EStack.vue\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The question the section answers, such as \"Your details\". */\n    title: string;\n    /** A short line under the title. */\n    description?: string;\n    /** The heading element, 1 to 4. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n    /** Space between the fields: a space token number (1, 2, 3, 4, 6, 8) or any CSS length. */\n    gap?: number | string;\n    /** The id of the heading; the section is labelled by it. Generated when left out. */\n    id?: string;\n  }>(),\n  { headingLevel: 2, gap: 4 },\n);\n\ndefineSlots<{\n  /** The fields, spaced evenly. */\n  default(): unknown;\n}>();\n\nconst id = useUid(() => props.id);\n</script>\n\n<template>\n  <section class=\"e-formsection\" :aria-labelledby=\"id\">\n    <div class=\"e-formsection-head\">\n      <component :is=\"`h${headingLevel}`\" :id=\"id\" class=\"e-formsection-title\">{{ title }}</component>\n      <p v-if=\"description\" class=\"e-formsection-desc\">{{ description }}</p>\n    </div>\n    <EStack :gap=\"gap\"><slot /></EStack>\n  </section>\n</template>\n\n<style>\n@layer e.composites {\n  .e-formsection {\n    display: grid;\n    gap: var(--e-space-4);\n    padding-top: var(--e-space-6);\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-formsection:first-child {\n    padding-top: 0;\n    border-top: 0;\n  }\n\n  .e-formsection-title {\n    margin: 0;\n    font: 500 var(--e-text-xl)/1.25 var(--e-font-sans);\n  }\n\n  .e-formsection-desc {\n    margin: var(--e-space-1) 0 0;\n    max-width: var(--e-measure);\n    font: 400 var(--e-text-md)/1.45 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAKA,IAAMkB,IAAQC,GAqBRC,IAAKC,QAAaH,EAAM,EAAE;E,kBAI9BlB,EAAA,GAAAC,EAMU,WAAA;GAND,OAAM;GAAiB,mBAAiBC,EAAAkB,CAAA;E,IAC/CjB,EAGM,OAHNY,GAGM,EAFJf,EAAA,GAAAI,EAAgGC,EAAA,IAA5Ec,EAAA,cAAY,GAAA;GAAK,IAAIjB,EAAAkB,CAAA;GAAI,OAAM;;GAAsB,SAAAd,QAAW,CAARC,EAAAC,EAAAW,EAAA,KAAK,GAAA,CAAA,C;;E,gBACxEA,EAAA,eAATnB,EAAA,GAAAC,EAAsE,KAAtEe,GAAsER,EAAlBW,EAAA,WAAW,GAAA,CAAA,K,aAEjET,EAAoCC,GAAA,EAA3B,KAAKQ,EAAA,IAAG,GAAA;GAAE,SAAAb,QAAQ,CAARM,EAAQsB,EAAA,QAAA,SAAA,C"}

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

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

package/dist/components/ItemList/EItemList.js

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

package/dist/components/ItemList/EItemList.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EItemList.js","names":["_sfc_main","EItemList_vue_vue_type_script_setup_true_lang_default","EItemList_default"],"sources":["../../../src/components/ItemList/EItemList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { provide } from \"vue\";\nimport { ITEM_LIST_KEY } from \"./context.js\";\nimport \"../../styles/base.css\";\n\ndefineSlots<{\n  /** The `EItemRow`s. */\n  default(): unknown;\n}>();\n\nprovide(ITEM_LIST_KEY, true);\n</script>\n\n<template>\n  <div class=\"e-items\">\n    <div class=\"e-items-grid\" role=\"list\"><slot /></div>\n  </div>\n</template>\n\n<style>\n@layer e.account {\n  .e-items {\n    container-type: inline-size;\n  }\n\n  .e-items-grid {\n    display: grid;\n    grid-template-columns: auto minmax(0, 1fr) auto;\n    column-gap: var(--e-space-3);\n  }\n\n  @container (min-width: 36rem) {\n    .e-items-grid {\n      grid-template-columns: auto minmax(0, 1fr) auto auto;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/ItemList/EItemList.vue.d.ts

@@ -1,13 +0,0 @@
-type __VLS_Slots = {
-    /** The `EItemRow`s. */
-    default(): unknown;
-};
-declare const __VLS_base: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, 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/ItemList/EItemList.vue_vue_type_script_setup_true_lang.js

@@ -1,17 +0,0 @@
-/* empty css                */
-import { ITEM_LIST_KEY as e } from "./context.js";
-import { createElementBlock as t, createElementVNode as n, defineComponent as r, openBlock as i, provide as a, renderSlot as o } from "vue";
-//#region src/components/ItemList/EItemList.vue?vue&type=script&setup=true&lang.ts
-var s = { class: "e-items" }, c = {
-	class: "e-items-grid",
-	role: "list"
-}, l = /*@__PURE__*/ r({
-	__name: "EItemList",
-	setup(r) {
-		return a(e, !0), (e, r) => (i(), t("div", s, [n("div", c, [o(e.$slots, "default")])]));
-	}
-});
-//#endregion
-export { l as default };
-
-//# sourceMappingURL=EItemList.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ItemList/EItemList.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EItemList.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createElementVNode","_renderSlot","_hoisted_1","_hoisted_2","EItemList_vue_vue_type_script_setup_true_lang_default","provide","ITEM_LIST_KEY","openBlock","createElementBlock","createElementVNode","renderSlot","_ctx"],"sources":["../../../src/components/ItemList/EItemList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { provide } from \"vue\";\nimport { ITEM_LIST_KEY } from \"./context.js\";\nimport \"../../styles/base.css\";\n\ndefineSlots<{\n  /** The `EItemRow`s. */\n  default(): unknown;\n}>();\n\nprovide(ITEM_LIST_KEY, true);\n</script>\n\n<template>\n  <div class=\"e-items\">\n    <div class=\"e-items-grid\" role=\"list\"><slot /></div>\n  </div>\n</template>\n\n<style>\n@layer e.account {\n  .e-items {\n    container-type: inline-size;\n  }\n\n  .e-items-grid {\n    display: grid;\n    grid-template-columns: auto minmax(0, 1fr) auto;\n    column-gap: var(--e-space-3);\n  }\n\n  @container (min-width: 36rem) {\n    .e-items-grid {\n      grid-template-columns: auto minmax(0, 1fr) auto auto;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;E,OAUAO,EAAQC,GAAe,EAAI,I,UAIzBR,EAAA,GAAAC,EAEM,OAFNG,GAEM,CADJF,EAAoD,OAApDG,GAAoD,CAAdF,EAAQU,EAAA,QAAA,SAAA,C"}

package/dist/components/ItemList/context.d.ts

@@ -1,3 +0,0 @@
-import { InjectionKey } from 'vue';
-/** Provided by `EItemList` so an `EItemRow` knows it already has a list around it. Internal. */
-export declare const ITEM_LIST_KEY: InjectionKey<boolean>;

package/dist/components/ItemList/context.js

@@ -1,6 +0,0 @@
-//#region src/components/ItemList/context.ts
-var e = Symbol("eos.itemList");
-//#endregion
-export { e as ITEM_LIST_KEY };
-
-//# sourceMappingURL=context.js.map

package/dist/components/ItemList/context.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"context.js","names":["ITEM_LIST_KEY"],"sources":["../../../src/components/ItemList/context.ts"],"sourcesContent":["import type { InjectionKey } from \"vue\";\n\n/** Provided by `EItemList` so an `EItemRow` knows it already has a list around it. Internal. */\nexport const ITEM_LIST_KEY: InjectionKey<boolean> = Symbol(\"eos.itemList\");\n"],"mappings":";AAGA,IAAaA,IAAuC,OAAO,cAAc"}

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

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

package/dist/components/ItemRow/EItemRow.js

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

package/dist/components/ItemRow/EItemRow.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EItemRow.js","names":["_sfc_main","EItemRow_vue_vue_type_script_setup_true_lang_default","EItemRow_default"],"sources":["../../../src/components/ItemRow/EItemRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { h, inject, type FunctionalComponent } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EStamp from \"../Stamp/EStamp.vue\";\nimport EItemList from \"../ItemList/EItemList.vue\";\nimport { ITEM_LIST_KEY } from \"../ItemList/context.js\";\nimport type { StampStatus, StampTone } from \"../Stamp/EStamp.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\n\ndefineOptions({ inheritAttrs: false });\n\ndefineProps<{\n  /** What the line is, such as \"New client form\". */\n  title: string;\n  /** A line under the title, such as when it is due. */\n  subtitle?: string;\n  /** An icon in a tile before the title. */\n  icon?: IconProp;\n  /** A preset for the stamp: sets its tone, word and glyph. */\n  status?: StampStatus;\n  /** Overrides the status's tone. */\n  tone?: StampTone;\n  /** The stamp's word. Overrides the status's; on its own it shows a stamp too. */\n  label?: string;\n}>();\n\ndefineSlots<{\n  /** A Button or IconButton at the end of the row. */\n  action?(): unknown;\n}>();\n\nconst inList = inject(ITEM_LIST_KEY, false);\nconst Frame: FunctionalComponent = (_props, { slots }) =>\n  inList ? slots.default?.() : h(EItemList, null, { default: () => slots.default?.() });\n</script>\n\n<template>\n  <Frame>\n    <div class=\"e-item\" role=\"listitem\" v-bind=\"$attrs\">\n      <span v-if=\"icon\" class=\"e-item-icon\"><EIcon :name=\"icon\" /></span>\n      <div class=\"e-item-main\">\n        <p class=\"e-item-title\">{{ title }}</p>\n        <p v-if=\"subtitle\" class=\"e-item-sub\">{{ subtitle }}</p>\n      </div>\n      <EStamp v-if=\"status || label\" :status=\"status\" :tone=\"tone\" :label=\"label\" small />\n      <slot name=\"action\" />\n    </div>\n  </Frame>\n</template>\n\n<style>\n@layer e.account {\n  .e-item {\n    grid-column: 1 / -1;\n    display: grid;\n    grid-template-columns: subgrid;\n    align-items: center;\n    padding: var(--e-space-3) 0;\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-item:first-child {\n    border-top: 0;\n  }\n\n  .e-item-icon {\n    grid-column: 1;\n    grid-row: 1 / span 2;\n    align-self: start;\n    display: grid;\n    place-items: center;\n    width: 40px;\n    height: 40px;\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 0 0 1px var(--e-border-strong);\n  }\n\n  .e-item-icon .e-icon {\n    width: 22px;\n    height: 22px;\n  }\n\n  .e-item-main {\n    grid-column: 2;\n    grid-row: 1;\n    min-width: 0;\n  }\n\n  .e-item .e-stamp {\n    grid-column: 2;\n    grid-row: 2;\n    justify-self: start;\n    margin-top: var(--e-space-2);\n  }\n\n  .e-item > .e-btn {\n    grid-column: 2 / -1;\n    grid-row: 3;\n    justify-self: start;\n    margin-top: var(--e-space-3);\n  }\n\n  .e-item > .e-icon-btn {\n    grid-column: 3;\n    grid-row: 1 / span 2;\n    /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties -- two longhands */\n    justify-self: end;\n    align-self: center;\n  }\n\n  .e-item-title {\n    margin: 0;\n    font: 500 var(--e-text-md) / 1.3 var(--e-font-sans);\n    overflow-wrap: anywhere;\n  }\n\n  .e-item-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  @container (min-width: 36rem) {\n    .e-item-icon {\n      grid-row: 1;\n      align-self: center;\n    }\n\n    .e-item .e-stamp {\n      grid-column: 3;\n      grid-row: 1;\n      margin-top: 0;\n      align-self: center;\n    }\n\n    .e-item > .e-btn,\n    .e-item > .e-icon-btn {\n      grid-column: 4;\n      grid-row: 1;\n      margin-top: 0;\n      /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties -- two longhands */\n      justify-self: end;\n      align-self: center;\n    }\n  }\n\n  @media print {\n    .e-item {\n      box-shadow: none;\n      border: 1px solid #000;\n      border-width: 0 0 1px;\n      break-inside: avoid;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/ItemRow/EItemRow.vue.d.ts

@@ -1,29 +0,0 @@
-import { StampStatus, StampTone } from '../Stamp/EStamp.vue.js';
-import { IconProp } from '../../icons/types.js';
-type __VLS_Props = {
-    /** What the line is, such as "New client form". */
-    title: string;
-    /** A line under the title, such as when it is due. */
-    subtitle?: string;
-    /** An icon in a tile before the title. */
-    icon?: IconProp;
-    /** A preset for the stamp: sets its tone, word and glyph. */
-    status?: StampStatus;
-    /** Overrides the status's tone. */
-    tone?: StampTone;
-    /** The stamp's word. Overrides the status's; on its own it shows a stamp too. */
-    label?: string;
-};
-type __VLS_Slots = {
-    /** A Button or IconButton at the end of the row. */
-    action?(): unknown;
-};
-declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/ItemRow/EItemRow.vue_vue_type_script_setup_true_lang.js

@@ -1,54 +0,0 @@
-/* empty css                */
-import e from "../Icon/EIcon.js";
-import t from "../Stamp/EStamp.js";
-import { ITEM_LIST_KEY as n } from "../ItemList/context.js";
-import r from "../ItemList/EItemList.js";
-import { createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, h as u, inject as d, mergeProps as f, openBlock as p, renderSlot as m, toDisplayString as h, withCtx as g } from "vue";
-//#region src/components/ItemRow/EItemRow.vue?vue&type=script&setup=true&lang.ts
-var _ = {
-	key: 0,
-	class: "e-item-icon"
-}, v = { class: "e-item-main" }, y = { class: "e-item-title" }, b = {
-	key: 0,
-	class: "e-item-sub"
-}, x = /*@__PURE__*/ l({
-	inheritAttrs: !1,
-	__name: "EItemRow",
-	props: {
-		title: {},
-		subtitle: {},
-		icon: {},
-		status: {},
-		tone: {},
-		label: {}
-	},
-	setup(l) {
-		let x = d(n, !1), S = (e, { slots: t }) => x ? t.default?.() : u(r, null, { default: () => t.default?.() });
-		return (n, r) => (p(), i(S, null, {
-			default: g(() => [s("div", f({
-				class: "e-item",
-				role: "listitem"
-			}, n.$attrs), [
-				l.icon ? (p(), o("span", _, [c(e, { name: l.icon }, null, 8, ["name"])])) : a("", !0),
-				s("div", v, [s("p", y, h(l.title), 1), l.subtitle ? (p(), o("p", b, h(l.subtitle), 1)) : a("", !0)]),
-				l.status || l.label ? (p(), i(t, {
-					key: 1,
-					status: l.status,
-					tone: l.tone,
-					label: l.label,
-					small: ""
-				}, null, 8, [
-					"status",
-					"tone",
-					"label"
-				])) : a("", !0),
-				m(n.$slots, "action")
-			], 16)]),
-			_: 3
-		}));
-	}
-});
-//#endregion
-export { x as default };
-
-//# sourceMappingURL=EItemRow.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/ItemRow/EItemRow.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EItemRow.vue_vue_type_script_setup_true_lang.js","names":["$attrs","EItemList","_openBlock","_createBlock","_withCtx","_createElementVNode","_mergeProps","_createElementBlock","_createVNode","EIcon","_createCommentVNode","_toDisplayString","EStamp","_renderSlot","EIcon_default","EStamp_default","EItemList_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","EItemRow_vue_vue_type_script_setup_true_lang_default","inList","inject","ITEM_LIST_KEY","Frame","slots","h","openBlock","createBlock","withCtx","createElementVNode","mergeProps","_ctx","__props","createElementBlock","createVNode","createCommentVNode","toDisplayString","renderSlot"],"sources":["../../../src/components/ItemRow/EItemRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { h, inject, type FunctionalComponent } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EStamp from \"../Stamp/EStamp.vue\";\nimport EItemList from \"../ItemList/EItemList.vue\";\nimport { ITEM_LIST_KEY } from \"../ItemList/context.js\";\nimport type { StampStatus, StampTone } from \"../Stamp/EStamp.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\n\ndefineOptions({ inheritAttrs: false });\n\ndefineProps<{\n  /** What the line is, such as \"New client form\". */\n  title: string;\n  /** A line under the title, such as when it is due. */\n  subtitle?: string;\n  /** An icon in a tile before the title. */\n  icon?: IconProp;\n  /** A preset for the stamp: sets its tone, word and glyph. */\n  status?: StampStatus;\n  /** Overrides the status's tone. */\n  tone?: StampTone;\n  /** The stamp's word. Overrides the status's; on its own it shows a stamp too. */\n  label?: string;\n}>();\n\ndefineSlots<{\n  /** A Button or IconButton at the end of the row. */\n  action?(): unknown;\n}>();\n\nconst inList = inject(ITEM_LIST_KEY, false);\nconst Frame: FunctionalComponent = (_props, { slots }) =>\n  inList ? slots.default?.() : h(EItemList, null, { default: () => slots.default?.() });\n</script>\n\n<template>\n  <Frame>\n    <div class=\"e-item\" role=\"listitem\" v-bind=\"$attrs\">\n      <span v-if=\"icon\" class=\"e-item-icon\"><EIcon :name=\"icon\" /></span>\n      <div class=\"e-item-main\">\n        <p class=\"e-item-title\">{{ title }}</p>\n        <p v-if=\"subtitle\" class=\"e-item-sub\">{{ subtitle }}</p>\n      </div>\n      <EStamp v-if=\"status || label\" :status=\"status\" :tone=\"tone\" :label=\"label\" small />\n      <slot name=\"action\" />\n    </div>\n  </Frame>\n</template>\n\n<style>\n@layer e.account {\n  .e-item {\n    grid-column: 1 / -1;\n    display: grid;\n    grid-template-columns: subgrid;\n    align-items: center;\n    padding: var(--e-space-3) 0;\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-item:first-child {\n    border-top: 0;\n  }\n\n  .e-item-icon {\n    grid-column: 1;\n    grid-row: 1 / span 2;\n    align-self: start;\n    display: grid;\n    place-items: center;\n    width: 40px;\n    height: 40px;\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 0 0 1px var(--e-border-strong);\n  }\n\n  .e-item-icon .e-icon {\n    width: 22px;\n    height: 22px;\n  }\n\n  .e-item-main {\n    grid-column: 2;\n    grid-row: 1;\n    min-width: 0;\n  }\n\n  .e-item .e-stamp {\n    grid-column: 2;\n    grid-row: 2;\n    justify-self: start;\n    margin-top: var(--e-space-2);\n  }\n\n  .e-item > .e-btn {\n    grid-column: 2 / -1;\n    grid-row: 3;\n    justify-self: start;\n    margin-top: var(--e-space-3);\n  }\n\n  .e-item > .e-icon-btn {\n    grid-column: 3;\n    grid-row: 1 / span 2;\n    /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties -- two longhands */\n    justify-self: end;\n    align-self: center;\n  }\n\n  .e-item-title {\n    margin: 0;\n    font: 500 var(--e-text-md) / 1.3 var(--e-font-sans);\n    overflow-wrap: anywhere;\n  }\n\n  .e-item-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  @container (min-width: 36rem) {\n    .e-item-icon {\n      grid-row: 1;\n      align-self: center;\n    }\n\n    .e-item .e-stamp {\n      grid-column: 3;\n      grid-row: 1;\n      margin-top: 0;\n      align-self: center;\n    }\n\n    .e-item > .e-btn,\n    .e-item > .e-icon-btn {\n      grid-column: 4;\n      grid-row: 1;\n      margin-top: 0;\n      /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties -- two longhands */\n      justify-self: end;\n      align-self: center;\n    }\n  }\n\n  @media print {\n    .e-item {\n      box-shadow: none;\n      border: 1px solid #000;\n      border-width: 0 0 1px;\n      break-inside: avoid;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAgCA,IAAMsB,IAASC,EAAOC,GAAe,EAAK,GACpCC,KAA8B,GAAQ,EAAE,eAC5CH,IAASI,EAAM,UAAU,IAAIC,EAAE1B,GAAW,MAAM,EAAE,eAAeyB,EAAM,UAAU,EAAE,CAAC;E,kBAIpFxB,EAAA,GAAAC,EAUQsB,GAAA,MAAA;GATN,SAAArB,QAQM,CARNC,EAQM,OARNC,EAQM;IARD,OAAM;IAAS,MAAK;GAAmBN,GAAAA,EAAAA,MAAM,GAAA;IACpCkC,EAAA,QAAZhC,EAAA,GAAAK,EAAmE,QAAnEU,GAAmE,CAA7BT,EAAsBC,GAAA,EAAd,MAAMyB,EAAA,KAAI,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,C;IACxD7B,EAGM,OAHNa,GAGM,CAFJb,EAAuC,KAAvCc,GAAuCR,EAAZuB,EAAA,KAAK,GAAA,CAAA,GACvBA,EAAA,YAAThC,EAAA,GAAAK,EAAwD,KAAxDa,GAAwDT,EAAfuB,EAAA,QAAQ,GAAA,CAAA,K;IAErCA,EAAA,UAAUA,EAAA,SAAxBhC,EAAA,GAAAC,EAAoFS,GAAA;;KAApD,QAAQsB,EAAA;KAAS,MAAMA,EAAA;KAAO,OAAOA,EAAA;KAAO,OAAA;;;;;;IAC5ErB,EAAsBoB,EAAA,QAAA,QAAA"}

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

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

package/dist/components/LinkCard/ELinkCard.js

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

package/dist/components/LinkCard/ELinkCard.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ELinkCard.js","names":["_sfc_main","ELinkCard_vue_vue_type_script_setup_true_lang_default","ELinkCard_default"],"sources":["../../../src/components/LinkCard/ELinkCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, type Component } from \"vue\";\nimport ESurface from \"../Surface/ESurface.vue\";\nimport EText from \"../Text/EText.vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The card's title, and the text of the one link the whole card is. */\n    title: string;\n    /** Where the card goes. Defaults to `#`. */\n    href?: string;\n    /** A router location, passed to `linkComponent` as `to` (for `RouterLink`). Used instead of `href`. */\n    to?: unknown;\n    /** A line under the title saying what is there. */\n    description?: string;\n    /** A small mono label above the title. */\n    kicker?: string;\n    /** The level of the title's heading element, 1 to 6. Pick the one that fits the page outline. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n    /** Opens in a new tab. */\n    external?: boolean;\n    /** The element to render, `div` by default. Use `li` inside a list, such as `<EGrid as=\"ul\">`. */\n    as?: string;\n    /** What renders the link: `\"a\"` by default, or `RouterLink` (or any component that takes `href` or `to` and a default slot). */\n    linkComponent?: string | Component;\n  }>(),\n  { href: \"#\", headingLevel: 3, as: \"div\", linkComponent: \"a\" },\n);\n\ndefineSlots<{\n  /** Anything more under the description, such as a stamp or a count. It must not hold links or buttons: the whole card is already one link. */\n  default?(): unknown;\n}>();\n\nconst linkAttrs = computed(() => ({\n  ...(props.to !== undefined ? { to: props.to } : { href: props.href }),\n  ...(props.external && { target: \"_blank\", rel: \"noreferrer\" }),\n}));\n</script>\n\n<template>\n  <ESurface :as=\"as\" pad=\"sm\" class=\"e-linkcard\">\n    <p v-if=\"kicker\" class=\"e-kicker e-linkcard-kicker\">{{ kicker }}</p>\n    <component :is=\"`h${headingLevel}`\" class=\"e-linkcard-title\">\n      <component :is=\"linkComponent\" class=\"e-linkcard-link\" v-bind=\"linkAttrs\">{{ title }}</component>\n    </component>\n    <EText v-if=\"description\" variant=\"small\" muted>{{ description }}</EText>\n    <slot />\n  </ESurface>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-linkcard {\n    position: relative;\n    display: grid;\n    gap: var(--e-space-1);\n    align-content: start;\n    transition: box-shadow var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-linkcard:hover {\n    box-shadow: 0 0 0 var(--e-stroke-edge) var(--e-border-strong);\n  }\n\n  .e-linkcard:has(.e-linkcard-link:focus-visible) {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-linkcard-kicker,\n  .e-linkcard-title {\n    margin: 0;\n  }\n\n  .e-linkcard-title {\n    font: 500 var(--e-text-md) / 1.3 var(--e-font-sans);\n  }\n\n  .e-linkcard-link {\n    color: var(--e-primary);\n    text-decoration: underline;\n    text-decoration-thickness: var(--e-stroke-edge);\n    text-underline-offset: 4px;\n    text-decoration-color: var(--e-primary);\n  }\n\n  .e-linkcard-link::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: var(--e-radius-md);\n  }\n\n  .e-linkcard-link:focus-visible {\n    outline: none;\n  }\n\n  .e-linkcard:hover .e-linkcard-link {\n    color: var(--e-ink);\n    text-decoration-color: var(--e-ink);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-linkcard {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-linkcard:hover {\n      outline: var(--e-stroke-edge) solid Highlight;\n    }\n  }\n}\n</style>\n"],"mappings":""}