@eos-ui/vue 0.0.0-stage → 0.1.0

package/dist/components/MetaList/EMetaList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EMetaList.js","names":["_sfc_main","EMetaList_vue_vue_type_script_setup_true_lang_default","EMetaList_default"],"sources":["../../../src/components/MetaList/EMetaList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, type VNodeChild } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\n\nexport interface MetaItem {\n  /** A decorative icon before the text. */\n  icon?: IconProp;\n  /** What the fact says, in words. A string, or a rendered VNode for rich text. */\n  text: string | VNodeChild;\n}\n\nconst props = defineProps<{\n  /** Short facts, one per line. `null` items are skipped. */\n  items: (MetaItem | null | undefined)[];\n}>();\n\nconst shown = computed(() => props.items.filter((it): it is MetaItem => Boolean(it)));\n\nconst Render = Object.assign((p: { value: VNodeChild }) => p.value, { props: [\"value\"] });\n</script>\n\n<template>\n  <ul class=\"e-meta\">\n    <li v-for=\"(item, i) in shown\" :key=\"i\">\n      <EIcon v-if=\"item.icon\" :name=\"item.icon\" />\n      <span><Render :value=\"item.text\" /></span>\n    </li>\n  </ul>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-meta {\n    display: grid;\n    gap: var(--e-space-2);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    font: 400 var(--e-text-md) / 1.4 var(--e-font-sans);\n  }\n\n  .e-meta li {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--e-space-2);\n    min-width: 0;\n  }\n\n  .e-meta .e-icon {\n    flex: none;\n    width: 18px;\n    height: 18px;\n    margin-top: 2px;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/MetaList/EMetaList.vue.d.ts

@@ -0,0 +1,15 @@
+import { VNodeChild } from 'vue';
+import { IconProp } from '../../icons/types.js';
+export interface MetaItem {
+    /** A decorative icon before the text. */
+    icon?: IconProp;
+    /** What the fact says, in words. A string, or a rendered VNode for rich text. */
+    text: string | VNodeChild;
+}
+type __VLS_Props = {
+    /** Short facts, one per line. `null` items are skipped. */
+    items: (MetaItem | null | undefined)[];
+};
+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/MetaList/EMetaList.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,19 @@
+/* empty css                */
+import e from "../Icon/EIcon.js";
+import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, openBlock as l, renderList as u, unref as d } from "vue";
+//#region src/components/MetaList/EMetaList.vue?vue&type=script&setup=true&lang.ts
+var f = { class: "e-meta" }, p = /*@__PURE__*/ c({
+	__name: "EMetaList",
+	props: { items: {} },
+	setup(c) {
+		let p = c, m = n(() => p.items.filter((e) => !!e)), h = Object.assign((e) => e.value, { props: ["value"] });
+		return (n, c) => (l(), a("ul", f, [(l(!0), a(t, null, u(m.value, (t, n) => (l(), a("li", { key: n }, [t.icon ? (l(), r(e, {
+			key: 0,
+			name: t.icon
+		}, null, 8, ["name"])) : i("", !0), o("span", null, [s(d(h), { value: t.text }, null, 8, ["value"])])]))), 128))]));
+	}
+});
+//#endregion
+export { p as default };
+
+//# sourceMappingURL=EMetaList.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/MetaList/EMetaList.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EMetaList.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_renderList","_createBlock","EIcon","_createCommentVNode","_createElementVNode","_createVNode","_unref","EIcon_default","_hoisted_1","EMetaList_vue_vue_type_script_setup_true_lang_default","props","__props","shown","computed","it","Render","p","openBlock","createElementBlock","Fragment","renderList","i","item","createBlock","createCommentVNode","createElementVNode","createVNode","unref"],"sources":["../../../src/components/MetaList/EMetaList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, type VNodeChild } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\n\nexport interface MetaItem {\n  /** A decorative icon before the text. */\n  icon?: IconProp;\n  /** What the fact says, in words. A string, or a rendered VNode for rich text. */\n  text: string | VNodeChild;\n}\n\nconst props = defineProps<{\n  /** Short facts, one per line. `null` items are skipped. */\n  items: (MetaItem | null | undefined)[];\n}>();\n\nconst shown = computed(() => props.items.filter((it): it is MetaItem => Boolean(it)));\n\nconst Render = Object.assign((p: { value: VNodeChild }) => p.value, { props: [\"value\"] });\n</script>\n\n<template>\n  <ul class=\"e-meta\">\n    <li v-for=\"(item, i) in shown\" :key=\"i\">\n      <EIcon v-if=\"item.icon\" :name=\"item.icon\" />\n      <span><Render :value=\"item.text\" /></span>\n    </li>\n  </ul>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-meta {\n    display: grid;\n    gap: var(--e-space-2);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    font: 400 var(--e-text-md) / 1.4 var(--e-font-sans);\n  }\n\n  .e-meta li {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--e-space-2);\n    min-width: 0;\n  }\n\n  .e-meta .e-icon {\n    flex: none;\n    width: 18px;\n    height: 18px;\n    margin-top: 2px;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;EAaA,IAAMa,IAAQC,GAKRC,IAAQC,QAAeH,EAAM,MAAM,QAAQ,MAAuB,EAAQI,CAAG,CAAC,GAE9EC,IAAS,OAAO,QAAQ,MAA6BC,EAAE,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,CAAC;E,kBAItFnB,EAAA,GAAAC,EAKK,MALLU,GAKK,EAJHX,EAAA,EAAA,GAAAC,EAGKC,GAAA,MAAAC,EAHmBY,EAAA,QAAZ,GAAM,OAAlBf,EAAA,GAAAC,EAGK,MAAA,EAH2B,KAAKuB,EAAC,GAAA,CACvBC,EAAK,QAAlBzB,EAAA,GAAAI,EAA4CC,GAAA;;GAAnB,MAAMoB,EAAK;E,oCACpClB,EAA0C,QAAA,MAAA,CAApCC,EAA6BC,EAAAS,CAAA,GAAA,EAApB,OAAOO,EAAK,K"}

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

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

package/dist/components/MultiSelect/EMultiSelect.js

@@ -0,0 +1,7 @@
+import e from "./EMultiSelect.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/MultiSelect/EMultiSelect.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=EMultiSelect.js.map

package/dist/components/MultiSelect/EMultiSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EMultiSelect.js","names":["_sfc_main","EMultiSelect_vue_vue_type_script_setup_true_lang_default","EMultiSelect_default"],"sources":["../../../src/components/MultiSelect/EMultiSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport EComboboxBase from \"../Combobox/EComboboxBase.vue\";\nimport type { EComboboxProps } from \"../Combobox/types.js\";\n\nconst props = withDefaults(defineProps<EComboboxProps>(), { clearable: true });\n\ndefineEmits<{\n  /** The text in the input changed, by typing or by choosing. Use it to fetch options from a server. */\n  inputChange: [text: string];\n}>();\n\nconst model = defineModel<string[]>({ default: () => [] });\n\nconst open = defineModel<boolean>(\"open\", { default: false });\n\nconst base = ref<InstanceType<typeof EComboboxBase> | null>(null);\ndefineExpose({\n  input: () => base.value?.input ?? null,\n  focus: () => base.value?.focus(),\n});\n</script>\n\n<template>\n  <EComboboxBase\n    ref=\"base\"\n    v-bind=\"props\"\n    v-model=\"model\"\n    v-model:open=\"open\"\n    mode=\"multiple\"\n    @input-change=\"(text: string) => $emit('inputChange', text)\"\n  />\n</template>\n"],"mappings":""}

package/dist/components/MultiSelect/EMultiSelect.vue.d.ts

@@ -0,0 +1,44 @@
+type __VLS_ModelProps = {
+    modelValue?: string[];
+    "open"?: boolean;
+};
+declare const __VLS_export: import('vue').DefineComponent<({
+    hideLabel?: boolean;
+    ariaLabel?: string;
+} & {
+    label: string;
+    bare?: boolean;
+} & import('../Combobox/types.js').EComboboxFields & __VLS_ModelProps) | ({
+    hideLabel?: boolean;
+    ariaLabel?: string;
+} & {
+    label?: string;
+    bare: true;
+} & import('../Combobox/types.js').EComboboxFields & __VLS_ModelProps), {
+    input: () => HTMLInputElement | null;
+    focus: () => void | undefined;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    "update:modelValue": (value: string[]) => any;
+    inputChange: (text: string) => any;
+}, string, import('vue').PublicProps, Readonly<({
+    hideLabel?: boolean;
+    ariaLabel?: string;
+} & {
+    label: string;
+    bare?: boolean;
+} & import('../Combobox/types.js').EComboboxFields & __VLS_ModelProps) | ({
+    hideLabel?: boolean;
+    ariaLabel?: string;
+} & {
+    label?: string;
+    bare: true;
+} & import('../Combobox/types.js').EComboboxFields & __VLS_ModelProps)> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+    onInputChange?: ((text: string) => any) | undefined;
+}>, {
+    clearable: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/MultiSelect/EMultiSelect.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,58 @@
+import e from "../Combobox/EComboboxBase.js";
+import { createBlock as t, defineComponent as n, mergeModels as r, mergeProps as i, openBlock as a, ref as o, useModel as s } from "vue";
+//#region src/components/MultiSelect/EMultiSelect.vue?vue&type=script&setup=true&lang.ts
+var c = /*@__PURE__*/ n({
+	__name: "EMultiSelect",
+	props: /*@__PURE__*/ r({
+		hideLabel: { type: Boolean },
+		ariaLabel: {},
+		label: {},
+		bare: { type: Boolean },
+		options: {},
+		placeholder: {},
+		hint: {},
+		error: {},
+		required: { type: Boolean },
+		optional: { type: Boolean },
+		disabled: { type: Boolean },
+		name: {},
+		loading: { type: Boolean },
+		emptyText: {},
+		clearable: {
+			type: Boolean,
+			default: !0
+		},
+		filter: {},
+		id: {}
+	}, {
+		modelValue: { default: () => [] },
+		modelModifiers: {},
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ r(["inputChange"], ["update:modelValue", "update:open"]),
+	setup(n, { expose: r }) {
+		let c = n, l = s(n, "modelValue"), u = s(n, "open"), d = o(null);
+		return r({
+			input: () => d.value?.input ?? null,
+			focus: () => d.value?.focus()
+		}), (n, r) => (a(), t(e, i({
+			ref_key: "base",
+			ref: d
+		}, c, {
+			modelValue: l.value,
+			"onUpdate:modelValue": r[0] ||= (e) => l.value = e,
+			open: u.value,
+			"onUpdate:open": r[1] ||= (e) => u.value = e,
+			mode: "multiple",
+			onInputChange: r[2] ||= (e) => n.$emit("inputChange", e)
+		}), null, 16, ["modelValue", "open"]));
+	}
+});
+//#endregion
+export { c as default };
+
+//# sourceMappingURL=EMultiSelect.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/MultiSelect/EMultiSelect.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EMultiSelect.vue_vue_type_script_setup_true_lang.js","names":["$emit","_useModel","_openBlock","_createBlock","EComboboxBase","_mergeProps","EComboboxBase_default","EMultiSelect_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","\"open\"","\"openModifiers\"","__expose","props","__props","model","useModel","open","base","ref","openBlock","createBlock","mergeProps","_cache","$event","_ctx","text"],"sources":["../../../src/components/MultiSelect/EMultiSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport EComboboxBase from \"../Combobox/EComboboxBase.vue\";\nimport type { EComboboxProps } from \"../Combobox/types.js\";\n\nconst props = withDefaults(defineProps<EComboboxProps>(), { clearable: true });\n\ndefineEmits<{\n  /** The text in the input changed, by typing or by choosing. Use it to fetch options from a server. */\n  inputChange: [text: string];\n}>();\n\nconst model = defineModel<string[]>({ default: () => [] });\n\nconst open = defineModel<boolean>(\"open\", { default: false });\n\nconst base = ref<InstanceType<typeof EComboboxBase> | null>(null);\ndefineExpose({\n  input: () => base.value?.input ?? null,\n  focus: () => base.value?.focus(),\n});\n</script>\n\n<template>\n  <EComboboxBase\n    ref=\"base\"\n    v-bind=\"props\"\n    v-model=\"model\"\n    v-model:open=\"open\"\n    mode=\"multiple\"\n    @input-change=\"(text: string) => $emit('inputChange', text)\"\n  />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAKA,IAAMa,IAAQC,GAORC,IAAQd,EAAqBa,GAAA,YAAsB,GAEnDG,IAAOhB,EAAoBa,GAAC,MAA0B,GAEtDI,IAAOC,EAA+C,IAAI;E,OAChEP,EAAa;GACX,aAAaM,EAAK,OAAO,SAAS;GAClC,aAAaA,EAAK,OAAO,MAAM;EACjC,CAAC,I,UAIChB,EAAA,GAAAC,EAOEC,GAPFC,EAOE;GANI,SAAA;GAAJ,KAAIa;EACI,GAAAL,GAAK;GACJ,YAAAE,EAAA;GAAA,uBAAA,AAAAQ,EAAA,QAAA,MAAA,EAAK,QAAAC;GACN,MAAMP,EAAA;GAAA,iBAAA,AAAAM,EAAA,QAAA,MAAA,EAAI,QAAAC;GAClB,MAAK;GACJ,eAAY,AAAAD,EAAA,QAAG,MAAiBvB,EAAAA,MAAK,eAAgB0B,CAAI"}

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

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

package/dist/components/NavList/ENavList.js

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

package/dist/components/NavList/ENavList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ENavList.js","names":["_sfc_main","ENavList_vue_vue_type_script_setup_true_lang_default","ENavList_default"],"sources":["../../../src/components/NavList/ENavList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, type Component } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport LinkNav, { type LinkItem, type LinkSection } from \"../Tabs/LinkNav.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\n\nexport interface NavItem extends LinkItem {\n  /** An icon before the label. */\n  icon?: IconProp;\n  /** A count of things waiting on the person (bills to pay, forms to sign). */\n  count?: number;\n}\n\nexport type NavSection = LinkSection<NavItem>;\n\nconst props = withDefaults(\n  defineProps<{\n    /** The destinations, in order. */\n    items?: NavItem[];\n    /** Destinations in labelled groups, instead of `items`. Give a heading only when there is more than one section. */\n    sections?: NavSection[];\n    /** Shorter rows and smaller words, for a long list such as the pages of a documentation site. */\n    dense?: boolean;\n    /** `vertical` stacks the links, for a sidebar or a menu. `horizontal` lays them in a row, for a header: muted words, a bar under each, a heavier bar under the current page. */\n    orientation?: \"vertical\" | \"horizontal\";\n    /** The landmark's name, so a page with two navigations tells them apart. Defaults to \"Main\". */\n    label?: string;\n    /** What renders each link: `\"a\"` by default, or `RouterLink` (or any component that takes `href` or `to` and a default slot). */\n    linkComponent?: string | Component;\n  }>(),\n  { orientation: \"vertical\", linkComponent: \"a\" },\n);\n\nconst groups = computed<NavSection[]>(() => props.sections ?? [{ items: props.items ?? [] }]);\n</script>\n\n<template>\n  <LinkNav\n    class=\"e-nav\"\n    :class=\"[dense && 'e-nav--dense', orientation === 'horizontal' && 'e-nav--horizontal']\"\n    :groups=\"groups\"\n    :label=\"label\"\n    :link-component=\"linkComponent\"\n    item-class=\"e-nav-item\"\n    heading-class=\"e-nav-heading\"\n  >\n    <template #item=\"{ item }\">\n      <EIcon v-if=\"item.icon\" :name=\"item.icon\" />\n      <span class=\"e-nav-label\">{{ item.label }}</span>\n      <span v-if=\"item.count != null\" class=\"e-nav-count\">{{ item.count }}</span>\n    </template>\n  </LinkNav>\n</template>\n\n<style>\n@layer e.page {\n  .e-nav ul {\n    display: grid;\n    gap: 2px;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .e-nav-item {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-3);\n    height: var(--e-control-height);\n    padding: 0 var(--e-space-3);\n    border-radius: var(--e-radius-md);\n    color: var(--e-ink);\n    font: 400 var(--e-text-md) / 1 var(--e-font-sans);\n    text-decoration: none;\n    transition: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-nav-item:hover {\n    background: var(--e-surface-tint);\n  }\n\n  .e-nav-item:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-nav:not(.e-nav--dense, .e-nav--horizontal) .e-nav-item {\n    box-sizing: border-box;\n    border: var(--e-stroke-edge) solid transparent;\n  }\n\n  .e-nav-item[aria-current=\"page\"] {\n    background: color-mix(in srgb, var(--e-surface-tint), var(--e-ink) 3%);\n    font-weight: 600;\n  }\n\n  .e-nav:not(.e-nav--dense, .e-nav--horizontal) .e-nav-item[aria-current=\"page\"] {\n    border-color: var(--e-border-strong);\n    border-top-width: calc(var(--e-stroke-edge) + var(--e-depth));\n  }\n\n  .e-nav-label {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .e-nav--dense .e-nav-item {\n    position: relative;\n    height: 2.25rem;\n    gap: var(--e-space-2);\n    border-radius: 0;\n    box-shadow: inset 2px 0 0 transparent;\n    color: var(--e-muted);\n    font-size: var(--e-text-sm);\n  }\n\n  .e-nav--dense .e-nav-item::after {\n    content: \"\";\n    position: absolute;\n    inset-block: -4px;\n    inset-inline: 0;\n  }\n\n  .e-nav--dense .e-nav-item:hover {\n    background: transparent;\n    box-shadow: inset 2px 0 0 var(--e-border-strong);\n    color: var(--e-ink);\n  }\n\n  .e-nav--dense .e-nav-item[aria-current=\"page\"] {\n    background: var(--e-surface-tint);\n    box-shadow: inset 3px 0 0 var(--e-primary);\n    color: var(--e-primary);\n    font-weight: 600;\n  }\n\n  .e-nav--dense .e-nav-heading {\n    margin-top: var(--e-space-4);\n    padding-top: var(--e-space-4);\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-nav--dense > .e-nav-heading:first-child {\n    padding-top: 0;\n    border-top: 0;\n  }\n\n  .e-nav--horizontal {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--e-space-2) var(--e-space-4);\n  }\n\n  .e-nav--horizontal ul {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--e-space-2);\n  }\n\n  .e-nav--horizontal .e-nav-heading {\n    margin: 0;\n    padding-inline: 0;\n  }\n\n  .e-nav--horizontal .e-nav-item {\n    height: 2.5rem;\n    border-radius: 0;\n    background: transparent;\n    box-shadow: inset 0 -2px 0 transparent;\n    color: var(--e-muted);\n    font-size: var(--e-text-sm);\n  }\n\n  .e-nav--horizontal .e-nav-item:hover {\n    background: transparent;\n    box-shadow: inset 0 -2px 0 var(--e-border-strong);\n    color: var(--e-ink);\n  }\n\n  .e-nav--horizontal .e-nav-item[aria-current=\"page\"] {\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 -3px 0 var(--e-primary);\n    color: var(--e-primary);\n    font-weight: 600;\n  }\n\n  .e-nav--horizontal.e-nav--dense .e-nav-item {\n    height: 2.25rem;\n  }\n\n  .e-nav-count {\n    min-width: 22px;\n    padding: 0 6px;\n    border-radius: var(--e-radius-pill);\n    background: var(--e-surface);\n    box-shadow: inset 0 0 0 1px var(--e-border-strong);\n    font: 600 var(--e-text-xs) / 20px var(--e-font-mono);\n    text-align: center;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-nav-item {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-nav--horizontal .e-nav-item[aria-current=\"page\"] {\n      border-block-end: 3px solid Highlight;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/NavList/ENavList.vue.d.ts

@@ -0,0 +1,30 @@
+import { Component } from 'vue';
+import { LinkItem, LinkSection } from '../Tabs/LinkNav.vue.js';
+import { IconProp } from '../../icons/types.js';
+export interface NavItem extends LinkItem {
+    /** An icon before the label. */
+    icon?: IconProp;
+    /** A count of things waiting on the person (bills to pay, forms to sign). */
+    count?: number;
+}
+export type NavSection = LinkSection<NavItem>;
+type __VLS_Props = {
+    /** The destinations, in order. */
+    items?: NavItem[];
+    /** Destinations in labelled groups, instead of `items`. Give a heading only when there is more than one section. */
+    sections?: NavSection[];
+    /** Shorter rows and smaller words, for a long list such as the pages of a documentation site. */
+    dense?: boolean;
+    /** `vertical` stacks the links, for a sidebar or a menu. `horizontal` lays them in a row, for a header: muted words, a bar under each, a heavier bar under the current page. */
+    orientation?: "vertical" | "horizontal";
+    /** The landmark's name, so a page with two navigations tells them apart. Defaults to "Main". */
+    label?: string;
+    /** What renders each link: `"a"` by default, or `RouterLink` (or any component that takes `href` or `to` and a default slot). */
+    linkComponent?: string | Component;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    orientation: "vertical" | "horizontal";
+    linkComponent: string | Component;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/NavList/ENavList.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,49 @@
+/* empty css                */
+import e from "../Icon/EIcon.js";
+import t from "../Tabs/LinkNav.js";
+import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, normalizeClass as c, openBlock as l, toDisplayString as u, withCtx as d } from "vue";
+//#region src/components/NavList/ENavList.vue?vue&type=script&setup=true&lang.ts
+var f = { class: "e-nav-label" }, p = {
+	key: 1,
+	class: "e-nav-count"
+}, m = /*@__PURE__*/ s({
+	__name: "ENavList",
+	props: {
+		items: {},
+		sections: {},
+		dense: { type: Boolean },
+		orientation: { default: "vertical" },
+		label: {},
+		linkComponent: { default: "a" }
+	},
+	setup(s) {
+		let m = s, h = n(() => m.sections ?? [{ items: m.items ?? [] }]);
+		return (n, m) => (l(), r(t, {
+			class: c(["e-nav", [s.dense && "e-nav--dense", s.orientation === "horizontal" && "e-nav--horizontal"]]),
+			groups: h.value,
+			label: s.label,
+			"link-component": s.linkComponent,
+			"item-class": "e-nav-item",
+			"heading-class": "e-nav-heading"
+		}, {
+			item: d(({ item: t }) => [
+				t.icon ? (l(), r(e, {
+					key: 0,
+					name: t.icon
+				}, null, 8, ["name"])) : i("", !0),
+				o("span", f, u(t.label), 1),
+				t.count == null ? i("", !0) : (l(), a("span", p, u(t.count), 1))
+			]),
+			_: 1
+		}, 8, [
+			"class",
+			"groups",
+			"label",
+			"link-component"
+		]));
+	}
+});
+//#endregion
+export { m as default };
+
+//# sourceMappingURL=ENavList.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/NavList/ENavList.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ENavList.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","LinkNav","_normalizeClass","_withCtx","EIcon","_createCommentVNode","_createElementVNode","_toDisplayString","_createElementBlock","EIcon_default","LinkNav_default","_hoisted_1","_hoisted_2","ENavList_vue_vue_type_script_setup_true_lang_default","props","__props","groups","computed","openBlock","createBlock","normalizeClass","withCtx","item","createCommentVNode","createElementVNode","toDisplayString","createElementBlock"],"sources":["../../../src/components/NavList/ENavList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, type Component } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport LinkNav, { type LinkItem, type LinkSection } from \"../Tabs/LinkNav.vue\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\n\nexport interface NavItem extends LinkItem {\n  /** An icon before the label. */\n  icon?: IconProp;\n  /** A count of things waiting on the person (bills to pay, forms to sign). */\n  count?: number;\n}\n\nexport type NavSection = LinkSection<NavItem>;\n\nconst props = withDefaults(\n  defineProps<{\n    /** The destinations, in order. */\n    items?: NavItem[];\n    /** Destinations in labelled groups, instead of `items`. Give a heading only when there is more than one section. */\n    sections?: NavSection[];\n    /** Shorter rows and smaller words, for a long list such as the pages of a documentation site. */\n    dense?: boolean;\n    /** `vertical` stacks the links, for a sidebar or a menu. `horizontal` lays them in a row, for a header: muted words, a bar under each, a heavier bar under the current page. */\n    orientation?: \"vertical\" | \"horizontal\";\n    /** The landmark's name, so a page with two navigations tells them apart. Defaults to \"Main\". */\n    label?: string;\n    /** What renders each link: `\"a\"` by default, or `RouterLink` (or any component that takes `href` or `to` and a default slot). */\n    linkComponent?: string | Component;\n  }>(),\n  { orientation: \"vertical\", linkComponent: \"a\" },\n);\n\nconst groups = computed<NavSection[]>(() => props.sections ?? [{ items: props.items ?? [] }]);\n</script>\n\n<template>\n  <LinkNav\n    class=\"e-nav\"\n    :class=\"[dense && 'e-nav--dense', orientation === 'horizontal' && 'e-nav--horizontal']\"\n    :groups=\"groups\"\n    :label=\"label\"\n    :link-component=\"linkComponent\"\n    item-class=\"e-nav-item\"\n    heading-class=\"e-nav-heading\"\n  >\n    <template #item=\"{ item }\">\n      <EIcon v-if=\"item.icon\" :name=\"item.icon\" />\n      <span class=\"e-nav-label\">{{ item.label }}</span>\n      <span v-if=\"item.count != null\" class=\"e-nav-count\">{{ item.count }}</span>\n    </template>\n  </LinkNav>\n</template>\n\n<style>\n@layer e.page {\n  .e-nav ul {\n    display: grid;\n    gap: 2px;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .e-nav-item {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-3);\n    height: var(--e-control-height);\n    padding: 0 var(--e-space-3);\n    border-radius: var(--e-radius-md);\n    color: var(--e-ink);\n    font: 400 var(--e-text-md) / 1 var(--e-font-sans);\n    text-decoration: none;\n    transition: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-nav-item:hover {\n    background: var(--e-surface-tint);\n  }\n\n  .e-nav-item:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-nav:not(.e-nav--dense, .e-nav--horizontal) .e-nav-item {\n    box-sizing: border-box;\n    border: var(--e-stroke-edge) solid transparent;\n  }\n\n  .e-nav-item[aria-current=\"page\"] {\n    background: color-mix(in srgb, var(--e-surface-tint), var(--e-ink) 3%);\n    font-weight: 600;\n  }\n\n  .e-nav:not(.e-nav--dense, .e-nav--horizontal) .e-nav-item[aria-current=\"page\"] {\n    border-color: var(--e-border-strong);\n    border-top-width: calc(var(--e-stroke-edge) + var(--e-depth));\n  }\n\n  .e-nav-label {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .e-nav--dense .e-nav-item {\n    position: relative;\n    height: 2.25rem;\n    gap: var(--e-space-2);\n    border-radius: 0;\n    box-shadow: inset 2px 0 0 transparent;\n    color: var(--e-muted);\n    font-size: var(--e-text-sm);\n  }\n\n  .e-nav--dense .e-nav-item::after {\n    content: \"\";\n    position: absolute;\n    inset-block: -4px;\n    inset-inline: 0;\n  }\n\n  .e-nav--dense .e-nav-item:hover {\n    background: transparent;\n    box-shadow: inset 2px 0 0 var(--e-border-strong);\n    color: var(--e-ink);\n  }\n\n  .e-nav--dense .e-nav-item[aria-current=\"page\"] {\n    background: var(--e-surface-tint);\n    box-shadow: inset 3px 0 0 var(--e-primary);\n    color: var(--e-primary);\n    font-weight: 600;\n  }\n\n  .e-nav--dense .e-nav-heading {\n    margin-top: var(--e-space-4);\n    padding-top: var(--e-space-4);\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n  }\n\n  .e-nav--dense > .e-nav-heading:first-child {\n    padding-top: 0;\n    border-top: 0;\n  }\n\n  .e-nav--horizontal {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--e-space-2) var(--e-space-4);\n  }\n\n  .e-nav--horizontal ul {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--e-space-2);\n  }\n\n  .e-nav--horizontal .e-nav-heading {\n    margin: 0;\n    padding-inline: 0;\n  }\n\n  .e-nav--horizontal .e-nav-item {\n    height: 2.5rem;\n    border-radius: 0;\n    background: transparent;\n    box-shadow: inset 0 -2px 0 transparent;\n    color: var(--e-muted);\n    font-size: var(--e-text-sm);\n  }\n\n  .e-nav--horizontal .e-nav-item:hover {\n    background: transparent;\n    box-shadow: inset 0 -2px 0 var(--e-border-strong);\n    color: var(--e-ink);\n  }\n\n  .e-nav--horizontal .e-nav-item[aria-current=\"page\"] {\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 -3px 0 var(--e-primary);\n    color: var(--e-primary);\n    font-weight: 600;\n  }\n\n  .e-nav--horizontal.e-nav--dense .e-nav-item {\n    height: 2.25rem;\n  }\n\n  .e-nav-count {\n    min-width: 22px;\n    padding: 0 6px;\n    border-radius: var(--e-radius-pill);\n    background: var(--e-surface);\n    box-shadow: inset 0 0 0 1px var(--e-border-strong);\n    font: 600 var(--e-text-xs) / 20px var(--e-font-mono);\n    text-align: center;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-nav-item {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-nav--horizontal .e-nav-item[aria-current=\"page\"] {\n      border-block-end: 3px solid Highlight;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAgBA,IAAMe,IAAQC,GAkBRC,IAASC,QAA6BH,EAAM,YAAY,CAAC,EAAE,OAAOA,EAAM,SAAS,CAAC,EAAE,CAAC,CAAC;E,kBAI1Ff,EAAA,GAAAC,EAcUC,GAAA;GAbR,OAAKC,EAAA,CAAC,SAAO,CACJa,EAAA,SAAK,gBAAoBA,EAAA,gBAAW,gBAAA,mBAAA,CAAA,CAAA;GAC5C,QAAQC,EAAA;GACR,OAAOD,EAAA;GACP,kBAAgBA,EAAA;GACjB,cAAW;GACX,iBAAc;;GAEH,MAAIZ,GAC+B,EAD3B,cAAI;IACRmB,EAAK,QAAlBvB,EAAA,GAAAC,EAA4CI,GAAA;;KAAnB,MAAMkB,EAAK;;IACpChB,EAAiD,QAAjDK,GAAiDJ,EAApBe,EAAK,KAAK,GAAA,CAAA;IAC3BA,EAAK,SAAK,O,aAAtBvB,EAAA,GAAAS,EAA2E,QAA3EI,GAA2EL,EAApBe,EAAK,KAAK,GAAA,CAAA"}

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

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

package/dist/components/Notice/ENotice.js

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

package/dist/components/Notice/ENotice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ENotice.js","names":["_sfc_main","ENotice_vue_vue_type_script_setup_true_lang_default","ENotice_default"],"sources":["../../../src/components/Notice/ENotice.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type NoticeTone = \"info\" | \"success\" | \"warning\" | \"danger\";\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, getCurrentInstance } from \"vue\";\nimport EActions from \"../Actions/EActions.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EIconButton from \"../IconButton/EIconButton.vue\";\nimport { useMessages } from \"../../config.js\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\nimport \"./notice.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** `info` is the default; `success` confirms; `warning` needs attention; `danger` is an error and is announced at once. */\n    tone?: NoticeTone;\n    /** What happened, in one short line. */\n    title: string;\n    /** Renders the title as a heading of this level (1 to 6) so the notice is findable by heading. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n    /** The id of the title element, for a parent that labels itself by it. */\n    titleId?: string;\n    /** The ARIA role. `danger` uses `alert`, the others `status`. `false` removes it, for a parent that announces the notice. */\n    role?: string | false;\n    /** Replaces the icon of the tone. */\n    icon?: IconProp;\n    /** Forces the close button on or off. Left out, it shows when a `@close` listener is attached. */\n    closable?: boolean;\n  }>(),\n  { tone: \"info\", role: undefined, closable: undefined },\n);\n\nconst emit = defineEmits<{\n  /** The close button was pressed. The button only shows when a listener is attached. */\n  close: [];\n}>();\n\ndefineSlots<{\n  /** One sentence of detail under the title. */\n  default?(): unknown;\n  /** Buttons for the next step; `outline` and `quiet` suit best. At the end of the row when the notice is 36rem wide or more, under the text when narrower. */\n  actions?(): unknown;\n}>();\n\nconst t = useMessages();\nconst instance = getCurrentInstance();\nconst TONE_ICON: Record<NoticeTone, string> = { info: \"info\", success: \"check\", warning: \"alert\", danger: \"alert\" };\nconst role = computed(() =>\n  props.role === false ? undefined : props.role || (props.tone === \"danger\" ? \"alert\" : \"status\"),\n);\nconst hasClose = () => props.closable ?? !!instance?.vnode.props?.onClose;\n</script>\n\n<template>\n  <div\n    class=\"e-notice\"\n    :class=\"[tone !== 'info' && `e-notice--${tone}`, $slots.actions && 'e-notice--actions']\"\n    :role=\"role\"\n  >\n    <div class=\"e-notice-grid\">\n      <span class=\"e-notice-icon\"><EIcon :name=\"icon ?? TONE_ICON[tone]\" /></span>\n      <div class=\"e-notice-body\">\n        <component :is=\"headingLevel ? `h${headingLevel}` : 'p'\" :id=\"titleId\" class=\"e-notice-title\">\n          {{ title }}\n        </component>\n        <div v-if=\"$slots.default\" class=\"e-notice-text\"><slot /></div>\n      </div>\n      <EActions v-if=\"$slots.actions\" class=\"e-notice-actions\"><slot name=\"actions\" /></EActions>\n      <span v-if=\"hasClose()\" class=\"e-notice-close\">\n        <EIconButton icon=\"x\" :label=\"t('dismiss')\" @click=\"emit('close')\" />\n      </span>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer e.containers {\n  .e-notice {\n    --e-tone: var(--e-primary);\n    --e-bg: var(--e-surface-tint);\n\n    container-type: inline-size;\n    padding: var(--e-space-3) var(--e-space-4);\n    border: var(--e-stroke-edge) solid var(--e-tone);\n    border-top-width: calc(var(--e-stroke-edge) + var(--e-depth));\n    border-radius: var(--e-radius-md);\n    background: var(--e-bg);\n    color: var(--e-ink);\n  }\n\n  .e-notice--success {\n    --e-tone: var(--e-secondary);\n    --e-bg: var(--e-secondary-soft);\n  }\n\n  .e-notice--warning {\n    --e-tone: var(--e-warning-strong);\n    --e-bg: var(--e-warning-soft);\n  }\n\n  .e-notice--danger {\n    --e-tone: var(--e-danger);\n    --e-bg: var(--e-danger-soft);\n  }\n\n  .e-notice-title {\n    margin: 0;\n    font: 500 var(--e-text-lg) / 24px var(--e-font-sans);\n  }\n\n  .e-notice-text {\n    margin: 0;\n    font: 400 var(--e-text-sm) / 1.45 var(--e-font-sans);\n    color: var(--e-ink);\n  }\n\n  @media (forced-colors: active) {\n    .e-notice {\n      border: 1px solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Notice/ENotice.vue.d.ts

@@ -0,0 +1,53 @@
+import { IconProp } from '../../icons/types.js';
+export type NoticeTone = "info" | "success" | "warning" | "danger";
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
+    /** `info` is the default; `success` confirms; `warning` needs attention; `danger` is an error and is announced at once. */
+    tone?: NoticeTone;
+    /** What happened, in one short line. */
+    title: string;
+    /** Renders the title as a heading of this level (1 to 6) so the notice is findable by heading. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** The id of the title element, for a parent that labels itself by it. */
+    titleId?: string;
+    /** The ARIA role. `danger` uses `alert`, the others `status`. `false` removes it, for a parent that announces the notice. */
+    role?: string | false;
+    /** Replaces the icon of the tone. */
+    icon?: IconProp;
+    /** Forces the close button on or off. Left out, it shows when a `@close` listener is attached. */
+    closable?: boolean;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => any;
+}, string, import('vue').PublicProps, Readonly<{
+    /** `info` is the default; `success` confirms; `warning` needs attention; `danger` is an error and is announced at once. */
+    tone?: NoticeTone;
+    /** What happened, in one short line. */
+    title: string;
+    /** Renders the title as a heading of this level (1 to 6) so the notice is findable by heading. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** The id of the title element, for a parent that labels itself by it. */
+    titleId?: string;
+    /** The ARIA role. `danger` uses `alert`, the others `status`. `false` removes it, for a parent that announces the notice. */
+    role?: string | false;
+    /** Replaces the icon of the tone. */
+    icon?: IconProp;
+    /** Forces the close button on or off. Left out, it shows when a `@close` listener is attached. */
+    closable?: boolean;
+}> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {
+    tone: NoticeTone;
+    role: string | false;
+    closable: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
+    /** One sentence of detail under the title. */
+    default?(): unknown;
+    /** Buttons for the next step; `outline` and `quiet` suit best. At the end of the row when the notice is 36rem wide or more, under the text when narrower. */
+    actions?(): unknown;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Notice/ENotice.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,70 @@
+/* empty css                */
+import { useMessages as e } from "../../config.js";
+import t from "../Actions/EActions.js";
+import n from "../Icon/EIcon.js";
+import r from "../IconButton/EIconButton.js";
+/* empty css       */
+import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, getCurrentInstance as f, normalizeClass as p, openBlock as m, renderSlot as h, resolveDynamicComponent as g, toDisplayString as _, unref as v, withCtx as y } from "vue";
+//#region src/components/Notice/ENotice.vue?vue&type=script&setup=true&lang.ts
+var b = ["role"], x = { class: "e-notice-grid" }, S = { class: "e-notice-icon" }, C = { class: "e-notice-body" }, w = {
+	key: 0,
+	class: "e-notice-text"
+}, T = {
+	key: 1,
+	class: "e-notice-close"
+}, E = /*@__PURE__*/ d({
+	__name: "ENotice",
+	props: {
+		tone: { default: "info" },
+		title: {},
+		headingLevel: {},
+		titleId: {},
+		role: {
+			type: [String, Boolean],
+			default: void 0
+		},
+		icon: {},
+		closable: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	emits: ["close"],
+	setup(d, { emit: E }) {
+		let D = d, O = E, k = e(), A = f(), j = {
+			info: "info",
+			success: "check",
+			warning: "alert",
+			danger: "alert"
+		}, M = i(() => D.role === !1 ? void 0 : D.role || (D.tone === "danger" ? "alert" : "status")), N = () => D.closable ?? !!A?.vnode.props?.onClose;
+		return (e, i) => (m(), s("div", {
+			class: p(["e-notice", [d.tone !== "info" && `e-notice--${d.tone}`, e.$slots.actions && "e-notice--actions"]]),
+			role: M.value
+		}, [c("div", x, [
+			c("span", S, [u(n, { name: d.icon ?? j[d.tone] }, null, 8, ["name"])]),
+			c("div", C, [(m(), a(g(d.headingLevel ? `h${d.headingLevel}` : "p"), {
+				id: d.titleId,
+				class: "e-notice-title"
+			}, {
+				default: y(() => [l(_(d.title), 1)]),
+				_: 1
+			}, 8, ["id"])), e.$slots.default ? (m(), s("div", w, [h(e.$slots, "default")])) : o("", !0)]),
+			e.$slots.actions ? (m(), a(t, {
+				key: 0,
+				class: "e-notice-actions"
+			}, {
+				default: y(() => [h(e.$slots, "actions")]),
+				_: 3
+			})) : o("", !0),
+			N() ? (m(), s("span", T, [u(r, {
+				icon: "x",
+				label: v(k)("dismiss"),
+				onClick: i[0] ||= (e) => O("close")
+			}, null, 8, ["label"])])) : o("", !0)
+		])], 10, b));
+	}
+});
+//#endregion
+export { E as default };
+
+//# sourceMappingURL=ENotice.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/Notice/ENotice.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ENotice.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_createVNode","EIcon","_createBlock","_resolveDynamicComponent","_withCtx","_createTextVNode","_toDisplayString","_renderSlot","_createCommentVNode","EActions","EIconButton","_unref","EActions_default","EIcon_default","EIconButton_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","ENotice_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","t","useMessages","instance","getCurrentInstance","TONE_ICON","role","computed","hasClose","openBlock","createElementBlock","normalizeClass","_ctx","createElementVNode","createVNode","createBlock","resolveDynamicComponent","withCtx","createTextVNode","toDisplayString","renderSlot","createCommentVNode","unref","_cache"],"sources":["../../../src/components/Notice/ENotice.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type NoticeTone = \"info\" | \"success\" | \"warning\" | \"danger\";\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, getCurrentInstance } from \"vue\";\nimport EActions from \"../Actions/EActions.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EIconButton from \"../IconButton/EIconButton.vue\";\nimport { useMessages } from \"../../config.js\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\nimport \"./notice.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** `info` is the default; `success` confirms; `warning` needs attention; `danger` is an error and is announced at once. */\n    tone?: NoticeTone;\n    /** What happened, in one short line. */\n    title: string;\n    /** Renders the title as a heading of this level (1 to 6) so the notice is findable by heading. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n    /** The id of the title element, for a parent that labels itself by it. */\n    titleId?: string;\n    /** The ARIA role. `danger` uses `alert`, the others `status`. `false` removes it, for a parent that announces the notice. */\n    role?: string | false;\n    /** Replaces the icon of the tone. */\n    icon?: IconProp;\n    /** Forces the close button on or off. Left out, it shows when a `@close` listener is attached. */\n    closable?: boolean;\n  }>(),\n  { tone: \"info\", role: undefined, closable: undefined },\n);\n\nconst emit = defineEmits<{\n  /** The close button was pressed. The button only shows when a listener is attached. */\n  close: [];\n}>();\n\ndefineSlots<{\n  /** One sentence of detail under the title. */\n  default?(): unknown;\n  /** Buttons for the next step; `outline` and `quiet` suit best. At the end of the row when the notice is 36rem wide or more, under the text when narrower. */\n  actions?(): unknown;\n}>();\n\nconst t = useMessages();\nconst instance = getCurrentInstance();\nconst TONE_ICON: Record<NoticeTone, string> = { info: \"info\", success: \"check\", warning: \"alert\", danger: \"alert\" };\nconst role = computed(() =>\n  props.role === false ? undefined : props.role || (props.tone === \"danger\" ? \"alert\" : \"status\"),\n);\nconst hasClose = () => props.closable ?? !!instance?.vnode.props?.onClose;\n</script>\n\n<template>\n  <div\n    class=\"e-notice\"\n    :class=\"[tone !== 'info' && `e-notice--${tone}`, $slots.actions && 'e-notice--actions']\"\n    :role=\"role\"\n  >\n    <div class=\"e-notice-grid\">\n      <span class=\"e-notice-icon\"><EIcon :name=\"icon ?? TONE_ICON[tone]\" /></span>\n      <div class=\"e-notice-body\">\n        <component :is=\"headingLevel ? `h${headingLevel}` : 'p'\" :id=\"titleId\" class=\"e-notice-title\">\n          {{ title }}\n        </component>\n        <div v-if=\"$slots.default\" class=\"e-notice-text\"><slot /></div>\n      </div>\n      <EActions v-if=\"$slots.actions\" class=\"e-notice-actions\"><slot name=\"actions\" /></EActions>\n      <span v-if=\"hasClose()\" class=\"e-notice-close\">\n        <EIconButton icon=\"x\" :label=\"t('dismiss')\" @click=\"emit('close')\" />\n      </span>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer e.containers {\n  .e-notice {\n    --e-tone: var(--e-primary);\n    --e-bg: var(--e-surface-tint);\n\n    container-type: inline-size;\n    padding: var(--e-space-3) var(--e-space-4);\n    border: var(--e-stroke-edge) solid var(--e-tone);\n    border-top-width: calc(var(--e-stroke-edge) + var(--e-depth));\n    border-radius: var(--e-radius-md);\n    background: var(--e-bg);\n    color: var(--e-ink);\n  }\n\n  .e-notice--success {\n    --e-tone: var(--e-secondary);\n    --e-bg: var(--e-secondary-soft);\n  }\n\n  .e-notice--warning {\n    --e-tone: var(--e-warning-strong);\n    --e-bg: var(--e-warning-soft);\n  }\n\n  .e-notice--danger {\n    --e-tone: var(--e-danger);\n    --e-bg: var(--e-danger-soft);\n  }\n\n  .e-notice-title {\n    margin: 0;\n    font: 500 var(--e-text-lg) / 24px var(--e-font-sans);\n  }\n\n  .e-notice-text {\n    margin: 0;\n    font: 400 var(--e-text-sm) / 1.45 var(--e-font-sans);\n    color: var(--e-ink);\n  }\n\n  @media (forced-colors: active) {\n    .e-notice {\n      border: 1px solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAcA,IAAM4B,IAAQC,GAoBRC,IAAOH,GAYPI,IAAIC,EAAY,GAChBC,IAAWC,EAAmB,GAC9BC,IAAwC;GAAE,MAAM;GAAQ,SAAS;GAAS,SAAS;GAAS,QAAQ;EAAQ,GAC5GC,IAAOC,QACXT,EAAM,SAAS,KAAQ,KAAA,IAAYA,EAAM,SAASA,EAAM,SAAS,WAAW,UAAU,SACxF,GACMU,UAAiBV,EAAM,YAAY,CAAC,CAACK,GAAU,MAAM,OAAO;E,kBAIhEhC,EAAA,GAAAC,EAkBM,OAAA;GAjBJ,OAAKC,EAAA,CAAC,YAAU,CACP0B,EAAA,SAAI,UAAA,aAA4BA,EAAA,QAAQ7B,EAAAA,OAAO,WAAO,mBAAA,CAAA,CAAA;GAC9D,MAAMoC,EAAA;E,IAEPhC,EAYM,OAZNiB,GAYM;GAXJjB,EAA4E,QAA5EkB,GAA4E,CAAhDjB,EAAyCC,GAAA,EAAjC,MAAMuB,EAAA,QAAQM,EAAUN,EAAA,M;GAC5DzB,EAKM,OALNmB,GAKM,EAJJtB,EAAA,GAAAM,EAEYC,EAFIqB,EAAA,eAAY,IAAOA,EAAA,iBAAY,GAAA,GAAA;IAAW,IAAIA,EAAA;IAAS,OAAM;;IAC3E,SAAApB,QAAW,CAARC,EAAAC,EAAAkB,EAAA,KAAK,GAAA,CAAA,C;;G,gBAEC7B,EAAAA,OAAO,WAAlBC,EAAA,GAAAC,EAA+D,OAA/DsB,GAA+D,CAAdZ,EAAQ8B,EAAA,QAAA,SAAA,C;GAE3C1C,EAAAA,OAAO,WAAvBC,EAAA,GAAAM,EAA2FO,GAAA;;IAA3D,OAAM;;IAAmB,SAAAL,QAAuB,CAAvBG,EAAuB8B,EAAA,QAAA,SAAA,C;;;GACpEJ,EAAQ,KAApBrC,EAAA,GAAAC,EAEO,QAFPuB,GAEO,CADLpB,EAAqEU,GAAA;IAAxD,MAAK;IAAK,OAAOC,EAAAe,CAAA,CAAC,CAAA,SAAA;IAAc,SAAK,AAAAsB,EAAA,QAAA,MAAEvB,EAAI,OAAA"}

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

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

package/dist/components/NumberField/ENumberField.js

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

package/dist/components/NumberField/ENumberField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ENumberField.js","names":["_sfc_main","ENumberField_vue_vue_type_script_setup_true_lang_default","ENumberField_default"],"sources":["../../../src/components/NumberField/ENumberField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EField from \"../Field/EField.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { focusInside } from \"../../composables/focusInside.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the field. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** The lowest value. The value clamps to it and the decrease button disables there. */\n  min?: number;\n  /** The highest value. The value clamps to it and the increase button disables there. */\n  max?: number;\n  /** How far a button or arrow key moves the value. Decimals shown follow the step. */\n  step?: number;\n  /** A unit before the value. */\n  prefix?: string;\n  /** A unit after the value, such as visits. */\n  suffix?: string;\n  /** The name submitted with a form (the number, or empty). */\n  name?: string;\n  /** Help that stays under the field. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the field invalid and is announced. */\n  error?: string;\n  /** A word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  disabled?: boolean;\n  /** The id of the input; the label points at it. Generated when left out. */\n  id?: string;\n}>();\n\nconst model = defineModel<number | null>({ default: null });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst input = ref<HTMLInputElement | null>(null);\n\nconst stepBy = computed(() => props.step || 1);\nconst decimals = computed(() => (String(stepBy.value).split(\".\")[1] || \"\").length);\nconst format = (n: number | null | undefined) => (n == null ? \"\" : Number(n).toFixed(decimals.value));\nconst text = ref(format(model.value));\nwatch(model, (v) => (text.value = format(v)));\n\nconst num = computed(() => (model.value == null ? undefined : Number(model.value)));\n\nfunction clamp(n: number): number {\n  if (props.min != null && n < props.min) n = props.min;\n  if (props.max != null && n > props.max) n = props.max;\n  return n;\n}\nfunction set(n: number) {\n  n = clamp(n);\n  model.value = n;\n  text.value = n.toFixed(decimals.value);\n}\nfunction bump(dir: 1 | -1, mult = 1) {\n  const base = num.value == null ? (props.min != null ? props.min - stepBy.value * (dir > 0 ? 1 : 0) : 0) : num.value;\n  set(Math.round((base + dir * stepBy.value * mult) * 1e6) / 1e6);\n}\nfunction commit() {\n  const n = parseFloat(text.value.replace(/,/g, \"\"));\n  if (isNaN(n)) {\n    if (text.value === \"\") model.value = null;\n    else text.value = format(model.value);\n  } else set(n);\n}\nfunction onKeydown(e: KeyboardEvent) {\n  if (e.key === \"ArrowUp\") {\n    e.preventDefault();\n    bump(1, e.shiftKey ? 10 : 1);\n  } else if (e.key === \"ArrowDown\") {\n    e.preventDefault();\n    bump(-1, e.shiftKey ? 10 : 1);\n  } else if (e.key === \"Enter\") commit();\n}\n\nfunction inputBind(field: { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined }) {\n  return {\n    id: field.id,\n    class: [\"e-input\", \"e-numinput\", !props.prefix && \"e-numfield-first\", !props.suffix && \"e-numfield-last\"],\n    style: { \"--e-chars\": Math.max(text.value.length, 1) },\n    type: \"text\" as const,\n    inputmode: \"decimal\" as const,\n    role: \"spinbutton\",\n    autocomplete: \"off\",\n    value: text.value,\n    disabled: props.disabled,\n    required: props.required,\n    \"aria-valuenow\": num.value,\n    \"aria-valuemin\": props.min,\n    \"aria-valuemax\": props.max,\n    \"aria-invalid\": field.ariaInvalid,\n    ...attrs.input(field.ariaDescribedby),\n  };\n}\n\ndefineExpose({\n  input,\n  focus: () => input.value?.focus(),\n});\n</script>\n\n<template>\n  <EField\n    v-bind=\"attrs.wrapper()\"\n    :id=\"id\"\n    :label=\"label\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->\n      <div\n        class=\"e-input-wrap e-numfield\"\n        :class=\"{ 'e-numfield--affix': prefix || suffix }\"\n        :data-invalid=\"error ? '' : undefined\"\n        :data-disabled=\"disabled ? '' : undefined\"\n        @click=\"focusInside\"\n      >\n        <button\n          type=\"button\"\n          class=\"e-numbtn\"\n          :aria-label=\"t('decrease')\"\n          :disabled=\"disabled || (min != null && num != null && num <= min)\"\n          @click=\"bump(-1)\"\n        >\n          <EIcon name=\"minus\" bold />\n        </button>\n        <span v-if=\"prefix\" class=\"e-affix e-affix--pre e-numfield-first\" aria-hidden=\"true\">{{ prefix }}</span>\n        <input\n          ref=\"input\"\n          v-bind=\"inputBind(field)\"\n          @input=\"text = ($event.target as HTMLInputElement).value\"\n          @blur=\"commit\"\n          @keydown=\"onKeydown\"\n        />\n        <span v-if=\"suffix\" class=\"e-affix e-affix--post e-numfield-last\" aria-hidden=\"true\">{{ suffix }}</span>\n        <button\n          type=\"button\"\n          class=\"e-numbtn\"\n          :aria-label=\"t('increase')\"\n          :disabled=\"disabled || (max != null && num != null && num >= max)\"\n          @click=\"bump(1)\"\n        >\n          <EIcon name=\"plus\" bold />\n        </button>\n      </div>\n      <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"num == null ? '' : num\" />\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-numfield {\n    align-items: stretch;\n    container-type: inline-size;\n  }\n\n  .e-numfield .e-numinput {\n    text-align: center;\n    font: 500 var(--e-text-md)/1 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    height: auto;\n    padding-inline: var(--e-space-2);\n  }\n\n  .e-numbtn {\n    display: inline-grid;\n    place-items: center;\n    flex: none;\n    width: var(--e-control-height);\n    padding: 0;\n    border: 0;\n    background: transparent;\n    color: var(--e-ink);\n    cursor: pointer;\n    transition: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-numbtn:first-child {\n    border-inline-end: var(--e-stroke-hair) solid var(--e-border-strong);\n    border-start-start-radius: var(--e-radius-md);\n    border-end-start-radius: var(--e-radius-md);\n  }\n\n  .e-numbtn:last-child {\n    border-inline-start: var(--e-stroke-hair) solid var(--e-border-strong);\n    border-start-end-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-numbtn:hover:not(:disabled) {\n    background: var(--e-wash-hover);\n  }\n\n  .e-numbtn:active:not(:disabled) {\n    background: var(--e-wash-press);\n  }\n\n  .e-numbtn:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: -3px;\n  }\n\n  .e-numbtn:disabled {\n    color: var(--e-muted);\n    cursor: not-allowed;\n    background: transparent;\n  }\n\n  .e-numfield--affix .e-numinput {\n    flex: none;\n    width: calc(var(--e-chars) * 1ch);\n    padding-inline: 0;\n    text-align: start;\n  }\n\n  .e-numfield--affix .e-affix--pre {\n    padding-inline: 0 var(--e-space-1);\n  }\n\n  .e-numfield--affix .e-affix--post {\n    padding-inline: var(--e-space-1) 0;\n  }\n\n  .e-numfield--affix .e-numfield-first {\n    margin-inline-start: auto;\n  }\n\n  .e-numfield--affix .e-numfield-last {\n    margin-inline-end: auto;\n  }\n\n  @container (max-width: 10rem) {\n    .e-numbtn {\n      display: none;\n    }\n\n    .e-numfield .e-numinput {\n      text-align: start;\n      padding-inline: var(--e-space-3);\n    }\n  }\n\n  @container (max-width: 13rem) {\n    .e-numfield--affix .e-numbtn {\n      display: none;\n    }\n\n    .e-numfield--affix .e-numfield-first {\n      margin-inline-start: var(--e-space-3);\n    }\n\n    .e-numfield--affix .e-numfield-last {\n      margin-inline-end: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-numbtn {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/NumberField/ENumberField.vue.d.ts

@@ -0,0 +1,43 @@
+type __VLS_Props = {
+    /** The visible label, a mono kicker above the field. */
+    label: string;
+    /** Keep the label for screen readers and remove it from the page. */
+    hideLabel?: boolean;
+    /** The lowest value. The value clamps to it and the decrease button disables there. */
+    min?: number;
+    /** The highest value. The value clamps to it and the increase button disables there. */
+    max?: number;
+    /** How far a button or arrow key moves the value. Decimals shown follow the step. */
+    step?: number;
+    /** A unit before the value. */
+    prefix?: string;
+    /** A unit after the value, such as visits. */
+    suffix?: string;
+    /** The name submitted with a form (the number, or empty). */
+    name?: string;
+    /** Help that stays under the field. */
+    hint?: string;
+    /** What to fix. Replaces the hint, marks the field invalid and is announced. */
+    error?: string;
+    /** A word beside the label. */
+    required?: boolean;
+    /** A word beside the label. Flag whichever is rarer. */
+    optional?: boolean;
+    disabled?: boolean;
+    /** The id of the input; the label points at it. Generated when left out. */
+    id?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: number | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {
+    input: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
+    focus: () => void | undefined;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: number | null) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;