@eos-ui/vue 0.1.0 → 0.2.0

package/dist/components/Text/EText.js.map

@@ -1 +1 @@
-{"version":3,"file":"EText.js","names":["_sfc_main","EText_vue_vue_type_script_setup_true_lang_default","EText_default"],"sources":["../../../src/components/Text/EText.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** `body` 16px, `deck` 18px for the one-sentence reading of a statement, `small` 14px. */\n    variant?: \"body\" | \"deck\" | \"small\";\n    /** Secondary copy, in the muted colour. */\n    muted?: boolean;\n    /** The element to render. */\n    as?: string;\n  }>(),\n  { variant: \"body\", as: \"p\" },\n);\n\ndefineSlots<{\n  /** The text. */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <component :is=\"as\" class=\"e-text\" :class=\"[`e-text--${variant}`, muted && 'e-text--muted']\"><slot /></component>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-text {\n    margin: 0;\n    max-width: var(--e-measure);\n    font: 400 var(--e-text-md) / 24px var(--e-font-sans);\n    color: var(--e-ink);\n    text-wrap: pretty;\n  }\n\n  .e-text--deck {\n    font-size: var(--e-text-lg);\n    line-height: 26px;\n  }\n\n  .e-text--small {\n    font-size: var(--e-text-sm);\n    line-height: 20px;\n  }\n\n  .e-text--muted {\n    color: var(--e-muted);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EText.js","names":["_sfc_main","EText_vue_vue_type_script_setup_true_lang_default","EText_default"],"sources":["../../../src/components/Text/EText.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** 14px, for captions and fine print. */\n    small?: boolean;\n    /** 18px, for the one-sentence reading of a statement. */\n    large?: boolean;\n    /** Secondary copy, in the muted colour. */\n    muted?: boolean;\n    /** The element to render. */\n    as?: string;\n  }>(),\n  { as: \"p\" },\n);\n\ndefineSlots<{\n  /** The text. */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <component :is=\"as\" class=\"e-text\" :class=\"[small && 'e-text--small', large && 'e-text--large', muted && 'e-text--muted']\"><slot /></component>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-text {\n    margin: 0;\n    max-width: var(--e-measure);\n    font: 400 var(--e-text-md) / 24px var(--e-font-sans);\n    color: var(--e-ink);\n    text-wrap: pretty;\n  }\n\n  .e-text--large {\n    font-size: var(--e-text-lg);\n    line-height: 26px;\n  }\n\n  .e-text--small {\n    font-size: var(--e-text-sm);\n    line-height: 20px;\n  }\n\n  .e-text--muted {\n    color: var(--e-muted);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Text/EText.vue.d.ts

@@ -1,6 +1,8 @@
 type __VLS_Props = {
-    /** `body` 16px, `deck` 18px for the one-sentence reading of a statement, `small` 14px. */
-    variant?: "body" | "deck" | "small";
+    /** 14px, for captions and fine print. */
+    small?: boolean;
+    /** 18px, for the one-sentence reading of a statement. */
+    large?: boolean;
     /** Secondary copy, in the muted colour. */
     muted?: boolean;
     /** The element to render. */
@@ -11,7 +13,6 @@ type __VLS_Slots = {
     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<{}>, {
-    variant: "body" | "small" | "deck";
     as: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/Text/EText.vue_vue_type_script_setup_true_lang.js

@@ -4,12 +4,17 @@ import { createBlock as e, defineComponent as t, normalizeClass as n, openBlock
 var s = /*@__PURE__*/ t({
 	__name: "EText",
 	props: {
-		variant: { default: "body" },
+		small: { type: Boolean },
+		large: { type: Boolean },
 		muted: { type: Boolean },
 		as: { default: "p" }
 	},
 	setup(t) {
-		return (s, c) => (r(), e(a(t.as), { class: n(["e-text", [`e-text--${t.variant}`, t.muted && "e-text--muted"]]) }, {
+		return (s, c) => (r(), e(a(t.as), { class: n(["e-text", [
+			t.small && "e-text--small",
+			t.large && "e-text--large",
+			t.muted && "e-text--muted"
+		]]) }, {
 			default: o(() => [i(s.$slots, "default")]),
 			_: 3
 		}, 8, ["class"]));

package/dist/components/Text/EText.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EText.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_renderSlot","EText_vue_vue_type_script_setup_true_lang_default","openBlock","createBlock","resolveDynamicComponent","__props","normalizeClass","withCtx","renderSlot","_ctx"],"sources":["../../../src/components/Text/EText.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** `body` 16px, `deck` 18px for the one-sentence reading of a statement, `small` 14px. */\n    variant?: \"body\" | \"deck\" | \"small\";\n    /** Secondary copy, in the muted colour. */\n    muted?: boolean;\n    /** The element to render. */\n    as?: string;\n  }>(),\n  { variant: \"body\", as: \"p\" },\n);\n\ndefineSlots<{\n  /** The text. */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <component :is=\"as\" class=\"e-text\" :class=\"[`e-text--${variant}`, muted && 'e-text--muted']\"><slot /></component>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-text {\n    margin: 0;\n    max-width: var(--e-measure);\n    font: 400 var(--e-text-md) / 24px var(--e-font-sans);\n    color: var(--e-ink);\n    text-wrap: pretty;\n  }\n\n  .e-text--deck {\n    font-size: var(--e-text-lg);\n    line-height: 26px;\n  }\n\n  .e-text--small {\n    font-size: var(--e-text-sm);\n    line-height: 20px;\n  }\n\n  .e-text--muted {\n    color: var(--e-muted);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;E,kBAsBEA,EAAA,GAAAC,EAAiHC,EAAjGQ,EAAA,EAAE,GAAA,EAAE,OAAKP,EAAA,CAAC,UAAQ,CAAA,WAAqBO,EAAA,WAAWA,EAAA,SAAK,eAAA,CAAA,CAAA,E;GAAsB,SAAAN,QAAQ,CAARC,EAAQS,EAAA,QAAA,SAAA,C"}
+{"version":3,"file":"EText.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_renderSlot","EText_vue_vue_type_script_setup_true_lang_default","openBlock","createBlock","resolveDynamicComponent","__props","normalizeClass","withCtx","renderSlot","_ctx"],"sources":["../../../src/components/Text/EText.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** 14px, for captions and fine print. */\n    small?: boolean;\n    /** 18px, for the one-sentence reading of a statement. */\n    large?: boolean;\n    /** Secondary copy, in the muted colour. */\n    muted?: boolean;\n    /** The element to render. */\n    as?: string;\n  }>(),\n  { as: \"p\" },\n);\n\ndefineSlots<{\n  /** The text. */\n  default(): unknown;\n}>();\n</script>\n\n<template>\n  <component :is=\"as\" class=\"e-text\" :class=\"[small && 'e-text--small', large && 'e-text--large', muted && 'e-text--muted']\"><slot /></component>\n</template>\n\n<style>\n@layer e.primitives {\n  .e-text {\n    margin: 0;\n    max-width: var(--e-measure);\n    font: 400 var(--e-text-md) / 24px var(--e-font-sans);\n    color: var(--e-ink);\n    text-wrap: pretty;\n  }\n\n  .e-text--large {\n    font-size: var(--e-text-lg);\n    line-height: 26px;\n  }\n\n  .e-text--small {\n    font-size: var(--e-text-sm);\n    line-height: 20px;\n  }\n\n  .e-text--muted {\n    color: var(--e-muted);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;E,kBAwBEA,EAAA,GAAAC,EAA+IC,EAA/HQ,EAAA,EAAE,GAAA,EAAE,OAAKP,EAAA,CAAC,UAAQ;GAAUO,EAAA,SAAK;GAAqBA,EAAA,SAAK;GAAqBA,EAAA,SAAK;EAAA,CAAA,CAAA,E;GAAsB,SAAAN,QAAQ,CAARC,EAAQS,EAAA,QAAA,SAAA,C"}

package/dist/components/TextField/ETextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"ETextField.js","names":["_sfc_main","ETextField_vue_vue_type_script_setup_true_lang_default","ETextField_default"],"sources":["../../../src/components/TextField/ETextField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport EField from \"../Field/EField.vue\";\nimport { focusInside } from \"../../composables/focusInside.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"./input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the input. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** Help that stays under the input. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the input invalid and is announced. */\n  error?: string;\n  /** An example, never the label. */\n  placeholder?: string;\n  /** The input type. */\n  type?: string;\n  /** A unit before the value, such as $. */\n  prefix?: string;\n  /** A unit after the value, such as USD. */\n  suffix?: string;\n  /** A word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  disabled?: boolean;\n  /** The id of the input; the label points at it. Generated when left out. */\n  id?: string;\n}>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst input = ref<HTMLInputElement | null>(null);\nconst attrs = useFieldAttrs();\nfunction inputBind(field: { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined }) {\n  return {\n    id: field.id,\n    class: \"e-input\",\n    type: props.type || \"text\",\n    placeholder: props.placeholder,\n    value: model.value,\n    disabled: props.disabled,\n    required: props.required,\n    \"aria-invalid\": field.ariaInvalid,\n    ...attrs.input(field.ariaDescribedby),\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        v-if=\"prefix || suffix\"\n        class=\"e-input-wrap\"\n        :data-invalid=\"error ? '' : undefined\"\n        :data-disabled=\"disabled ? '' : undefined\"\n        @click=\"focusInside\"\n      >\n        <span v-if=\"prefix\" class=\"e-affix e-affix--pre\" aria-hidden=\"true\">{{ prefix }}</span>\n        <input ref=\"input\" v-bind=\"inputBind(field)\" @input=\"model = ($event.target as HTMLInputElement).value\" />\n        <span v-if=\"suffix\" class=\"e-affix e-affix--post\" aria-hidden=\"true\">{{ suffix }}</span>\n      </div>\n      <input v-else ref=\"input\" v-bind=\"inputBind(field)\" @input=\"model = ($event.target as HTMLInputElement).value\" />\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-input[type=\"number\"],\n  .e-input[inputmode=\"numeric\"],\n  .e-input[inputmode=\"decimal\"] {\n    font-variant-numeric: tabular-nums;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ETextField.js","names":["_sfc_main","ETextField_vue_vue_type_script_setup_true_lang_default","ETextField_default"],"sources":["../../../src/components/TextField/ETextField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport EField from \"../Field/EField.vue\";\nimport { focusInside } from \"../../composables/focusInside.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"./input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the input. The placeholder is an example, never the label. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** Help that stays under the input. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the input invalid and is announced. */\n  error?: string;\n  /** An example, never the label. */\n  placeholder?: string;\n  /** The input type. @default \"text\" */\n  type?: string;\n  /** A unit before the value, such as `$`. Hidden from screen readers. */\n  prefix?: string;\n  /** A unit after the value, such as `USD`. Hidden from screen readers. */\n  suffix?: string;\n  /** The `required` attribute and a word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  /** Disables the field. */\n  disabled?: boolean;\n  /** The id of the input; the label points at it. @default generated */\n  id?: string;\n}>();\n\n/** The text. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst input = ref<HTMLInputElement | null>(null);\nconst attrs = useFieldAttrs();\nfunction inputBind(field: { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined }) {\n  return {\n    id: field.id,\n    class: \"e-input\",\n    type: props.type || \"text\",\n    placeholder: props.placeholder,\n    value: model.value,\n    disabled: props.disabled,\n    required: props.required,\n    \"aria-invalid\": field.ariaInvalid,\n    ...attrs.input(field.ariaDescribedby),\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        v-if=\"prefix || suffix\"\n        class=\"e-input-wrap\"\n        :data-invalid=\"error ? '' : undefined\"\n        :data-disabled=\"disabled ? '' : undefined\"\n        @click=\"focusInside\"\n      >\n        <span v-if=\"prefix\" class=\"e-affix e-affix--pre\" aria-hidden=\"true\">{{ prefix }}</span>\n        <input ref=\"input\" v-bind=\"inputBind(field)\" @input=\"model = ($event.target as HTMLInputElement).value\" />\n        <span v-if=\"suffix\" class=\"e-affix e-affix--post\" aria-hidden=\"true\">{{ suffix }}</span>\n      </div>\n      <input v-else ref=\"input\" v-bind=\"inputBind(field)\" @input=\"model = ($event.target as HTMLInputElement).value\" />\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-input[type=\"number\"],\n  .e-input[inputmode=\"numeric\"],\n  .e-input[inputmode=\"decimal\"] {\n    font-variant-numeric: tabular-nums;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/TextField/ETextField.vue.d.ts

@@ -1,5 +1,5 @@
 type __VLS_Props = {
-    /** The visible label, a mono kicker above the input. */
+    /** The visible label, a mono kicker above the input. The placeholder is an example, never the label. */
     label: string;
     /** Keep the label for screen readers and remove it from the page. */
     hideLabel?: boolean;
@@ -9,21 +9,23 @@ type __VLS_Props = {
     error?: string;
     /** An example, never the label. */
     placeholder?: string;
-    /** The input type. */
+    /** The input type. @default "text" */
     type?: string;
-    /** A unit before the value, such as $. */
+    /** A unit before the value, such as `$`. Hidden from screen readers. */
     prefix?: string;
-    /** A unit after the value, such as USD. */
+    /** A unit after the value, such as `USD`. Hidden from screen readers. */
     suffix?: string;
-    /** A word beside the label. */
+    /** The `required` attribute and a word beside the label. */
     required?: boolean;
     /** A word beside the label. Flag whichever is rarer. */
     optional?: boolean;
+    /** Disables the field. */
     disabled?: boolean;
-    /** The id of the input; the label points at it. Generated when left out. */
+    /** The id of the input; the label points at it. @default generated */
     id?: string;
 };
 type __VLS_ModelProps = {
+    /** The text. */
     modelValue?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;

package/dist/components/TextField/ETextField.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ETextField.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","EField","_mergeProps","_unref","_withCtx","_createElementBlock","_toDisplayString","_createCommentVNode","_createElementVNode","EField_default","_hoisted_1","_hoisted_2","_hoisted_3","ETextField_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","props","__props","model","useModel","input","ref","attrs","useFieldAttrs","inputBind","field","openBlock","createBlock","mergeProps","unref","withCtx","createElementBlock","_cache","args","focusInside","toDisplayString","createCommentVNode","createElementVNode","$event"],"sources":["../../../src/components/TextField/ETextField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport EField from \"../Field/EField.vue\";\nimport { focusInside } from \"../../composables/focusInside.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"./input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the input. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** Help that stays under the input. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the input invalid and is announced. */\n  error?: string;\n  /** An example, never the label. */\n  placeholder?: string;\n  /** The input type. */\n  type?: string;\n  /** A unit before the value, such as $. */\n  prefix?: string;\n  /** A unit after the value, such as USD. */\n  suffix?: string;\n  /** A word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  disabled?: boolean;\n  /** The id of the input; the label points at it. Generated when left out. */\n  id?: string;\n}>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst input = ref<HTMLInputElement | null>(null);\nconst attrs = useFieldAttrs();\nfunction inputBind(field: { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined }) {\n  return {\n    id: field.id,\n    class: \"e-input\",\n    type: props.type || \"text\",\n    placeholder: props.placeholder,\n    value: model.value,\n    disabled: props.disabled,\n    required: props.required,\n    \"aria-invalid\": field.ariaInvalid,\n    ...attrs.input(field.ariaDescribedby),\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        v-if=\"prefix || suffix\"\n        class=\"e-input-wrap\"\n        :data-invalid=\"error ? '' : undefined\"\n        :data-disabled=\"disabled ? '' : undefined\"\n        @click=\"focusInside\"\n      >\n        <span v-if=\"prefix\" class=\"e-affix e-affix--pre\" aria-hidden=\"true\">{{ prefix }}</span>\n        <input ref=\"input\" v-bind=\"inputBind(field)\" @input=\"model = ($event.target as HTMLInputElement).value\" />\n        <span v-if=\"suffix\" class=\"e-affix e-affix--post\" aria-hidden=\"true\">{{ suffix }}</span>\n      </div>\n      <input v-else ref=\"input\" v-bind=\"inputBind(field)\" @input=\"model = ($event.target as HTMLInputElement).value\" />\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-input[type=\"number\"],\n  .e-input[inputmode=\"numeric\"],\n  .e-input[inputmode=\"decimal\"] {\n    font-variant-numeric: tabular-nums;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAUA,IAAMmB,IAAQC,GA0BRC,IAAQrB,EAAmBoB,GAAA,YAAgB,GAE3CG,IAAQC,EAA6B,IAAI,GACzCC,IAAQC,EAAc;EAC5B,SAASC,EAAU,GAA6F;GAC9G,OAAO;IACL,IAAIC,EAAM;IACV,OAAO;IACP,MAAMT,EAAM,QAAQ;IACpB,aAAaA,EAAM;IACnB,OAAOE,EAAM;IACb,UAAUF,EAAM;IAChB,UAAUA,EAAM;IAChB,gBAAgBS,EAAM;IACtB,GAAGH,EAAM,MAAMG,EAAM,eAAe;GACtC;EACF;E,OACAV,EAAa;GACX;GACA,aAAaK,EAAM,OAAO,MAAM;EAClC,CAAC,I,UAICtB,EAAA,GAAAC,EAyBSC,GAzBTC,EACUC,EAwBDoB,CAAA,CAxBM,CAAC,QAAO,GAAA;GACpB,IAAIL,EAAA;GACJ,OAAOA,EAAA;GACP,cAAYA,EAAA;GACZ,MAAMA,EAAA;GACN,OAAOA,EAAA;GACP,UAAUA,EAAA;GACV,UAAUA,EAAA;;GAEA,SAAOd,GAAE,MAAK,CAGfc,EAAA,UAAUA,EAAA,UADlBnB,EAAA,GAAAM,EAUM,OAAA;;IARJ,OAAM;IACL,gBAAca,EAAA,QAAK,KAAQ,KAAA;IAC3B,iBAAeA,EAAA,WAAQ,KAAQ,KAAA;IAC/B,SAAK,AAAAe,EAAA,QAAE,GAAAC,MAAA/B,EAAAgC,CAAA,KAAAhC,EAAAgC,CAAA,CAAA,CAAA,GAAAD,CAAA;;IAEIhB,EAAA,UAAZnB,EAAA,GAAAM,EAAuF,QAAvFM,GAAuFL,EAAhBY,EAAA,MAAM,GAAA,CAAA,K;IAC7EV,EAA0G,SAA1GN,EAA0G;KAA/F,SAAA;KAAJ,KAAImB;IAAgB,GAAAI,EAAUC,CAAK,GAAA,EAAI,SAAK,AAAAO,EAAA,QAAA,MAAE,EAAA,QAASM,EAAO,OAA4B,M;IACrFrB,EAAA,UAAZnB,EAAA,GAAAM,EAAwF,QAAxFO,GAAwFN,EAAhBY,EAAA,MAAM,GAAA,CAAA,K;G,aAEhFnB,EAAA,GAAAM,EAAiH,SAAjHH,EAAiH;;IAA/F,SAAA;IAAJ,KAAImB;GAAgB,GAAAI,EAAUC,CAAK,GAAA,EAAI,SAAK,AAAAO,EAAA,QAAA,MAAE,EAAA,QAASM,EAAO,OAA4B,M"}
+{"version":3,"file":"ETextField.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","EField","_mergeProps","_unref","_withCtx","_createElementBlock","_toDisplayString","_createCommentVNode","_createElementVNode","EField_default","_hoisted_1","_hoisted_2","_hoisted_3","ETextField_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","props","__props","model","useModel","input","ref","attrs","useFieldAttrs","inputBind","field","openBlock","createBlock","mergeProps","unref","withCtx","createElementBlock","_cache","args","focusInside","toDisplayString","createCommentVNode","createElementVNode","$event"],"sources":["../../../src/components/TextField/ETextField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport EField from \"../Field/EField.vue\";\nimport { focusInside } from \"../../composables/focusInside.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"./input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the input. The placeholder is an example, never the label. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** Help that stays under the input. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the input invalid and is announced. */\n  error?: string;\n  /** An example, never the label. */\n  placeholder?: string;\n  /** The input type. @default \"text\" */\n  type?: string;\n  /** A unit before the value, such as `$`. Hidden from screen readers. */\n  prefix?: string;\n  /** A unit after the value, such as `USD`. Hidden from screen readers. */\n  suffix?: string;\n  /** The `required` attribute and a word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  /** Disables the field. */\n  disabled?: boolean;\n  /** The id of the input; the label points at it. @default generated */\n  id?: string;\n}>();\n\n/** The text. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst input = ref<HTMLInputElement | null>(null);\nconst attrs = useFieldAttrs();\nfunction inputBind(field: { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined }) {\n  return {\n    id: field.id,\n    class: \"e-input\",\n    type: props.type || \"text\",\n    placeholder: props.placeholder,\n    value: model.value,\n    disabled: props.disabled,\n    required: props.required,\n    \"aria-invalid\": field.ariaInvalid,\n    ...attrs.input(field.ariaDescribedby),\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        v-if=\"prefix || suffix\"\n        class=\"e-input-wrap\"\n        :data-invalid=\"error ? '' : undefined\"\n        :data-disabled=\"disabled ? '' : undefined\"\n        @click=\"focusInside\"\n      >\n        <span v-if=\"prefix\" class=\"e-affix e-affix--pre\" aria-hidden=\"true\">{{ prefix }}</span>\n        <input ref=\"input\" v-bind=\"inputBind(field)\" @input=\"model = ($event.target as HTMLInputElement).value\" />\n        <span v-if=\"suffix\" class=\"e-affix e-affix--post\" aria-hidden=\"true\">{{ suffix }}</span>\n      </div>\n      <input v-else ref=\"input\" v-bind=\"inputBind(field)\" @input=\"model = ($event.target as HTMLInputElement).value\" />\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-input[type=\"number\"],\n  .e-input[inputmode=\"numeric\"],\n  .e-input[inputmode=\"decimal\"] {\n    font-variant-numeric: tabular-nums;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAUA,IAAMmB,IAAQC,GA4BRC,IAAQrB,EAAmBoB,GAAA,YAAgB,GAE3CG,IAAQC,EAA6B,IAAI,GACzCC,IAAQC,EAAc;EAC5B,SAASC,EAAU,GAA6F;GAC9G,OAAO;IACL,IAAIC,EAAM;IACV,OAAO;IACP,MAAMT,EAAM,QAAQ;IACpB,aAAaA,EAAM;IACnB,OAAOE,EAAM;IACb,UAAUF,EAAM;IAChB,UAAUA,EAAM;IAChB,gBAAgBS,EAAM;IACtB,GAAGH,EAAM,MAAMG,EAAM,eAAe;GACtC;EACF;E,OACAV,EAAa;GACX;GACA,aAAaK,EAAM,OAAO,MAAM;EAClC,CAAC,I,UAICtB,EAAA,GAAAC,EAyBSC,GAzBTC,EACUC,EAwBDoB,CAAA,CAxBM,CAAC,QAAO,GAAA;GACpB,IAAIL,EAAA;GACJ,OAAOA,EAAA;GACP,cAAYA,EAAA;GACZ,MAAMA,EAAA;GACN,OAAOA,EAAA;GACP,UAAUA,EAAA;GACV,UAAUA,EAAA;;GAEA,SAAOd,GAAE,MAAK,CAGfc,EAAA,UAAUA,EAAA,UADlBnB,EAAA,GAAAM,EAUM,OAAA;;IARJ,OAAM;IACL,gBAAca,EAAA,QAAK,KAAQ,KAAA;IAC3B,iBAAeA,EAAA,WAAQ,KAAQ,KAAA;IAC/B,SAAK,AAAAe,EAAA,QAAE,GAAAC,MAAA/B,EAAAgC,CAAA,KAAAhC,EAAAgC,CAAA,CAAA,CAAA,GAAAD,CAAA;;IAEIhB,EAAA,UAAZnB,EAAA,GAAAM,EAAuF,QAAvFM,GAAuFL,EAAhBY,EAAA,MAAM,GAAA,CAAA,K;IAC7EV,EAA0G,SAA1GN,EAA0G;KAA/F,SAAA;KAAJ,KAAImB;IAAgB,GAAAI,EAAUC,CAAK,GAAA,EAAI,SAAK,AAAAO,EAAA,QAAA,MAAE,EAAA,QAASM,EAAO,OAA4B,M;IACrFrB,EAAA,UAAZnB,EAAA,GAAAM,EAAwF,QAAxFO,GAAwFN,EAAhBY,EAAA,MAAM,GAAA,CAAA,K;G,aAEhFnB,EAAA,GAAAM,EAAiH,SAAjHH,EAAiH;;IAA/F,SAAA;IAAJ,KAAImB;GAAgB,GAAAI,EAAUC,CAAK,GAAA,EAAI,SAAK,AAAAO,EAAA,QAAA,MAAE,EAAA,QAASM,EAAO,OAA4B,M"}

package/dist/components/Textarea/ETextarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"ETextarea.js","names":["_sfc_main","ETextarea_vue_vue_type_script_setup_true_lang_default","ETextarea_default"],"sources":["../../../src/components/Textarea/ETextarea.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport EField from \"../Field/EField.vue\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = withDefaults(\n  defineProps<{\n    /** The visible label, a mono kicker above the text well. */\n    label: string;\n    /** Keep the label for screen readers and remove it from the page. */\n    hideLabel?: boolean;\n    /** Help that stays under the text well. */\n    hint?: string;\n    /** What to fix. Replaces the hint, marks the textarea invalid and is announced. */\n    error?: string;\n    /** An example, never the label. */\n    placeholder?: string;\n    /** Visible lines. */\n    rows?: number;\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 textarea; the label points at it. Generated when left out. */\n    id?: string;\n  }>(),\n  { rows: 4 },\n);\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst input = ref<HTMLTextAreaElement | null>(null);\nconst attrs = useFieldAttrs();\nfunction inputBind(field: { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined }) {\n  return {\n    id: field.id,\n    class: \"e-input e-textarea\",\n    rows: props.rows,\n    placeholder: props.placeholder,\n    value: model.value,\n    disabled: props.disabled,\n    required: props.required,\n    \"aria-invalid\": field.ariaInvalid,\n    ...attrs.input(field.ariaDescribedby),\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/form-control-has-label -->\n      <textarea ref=\"input\" v-bind=\"inputBind(field)\" @input=\"model = ($event.target as HTMLTextAreaElement).value\" />\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-textarea {\n    height: auto;\n    min-height: 6.5rem;\n    padding: var(--e-space-3) var(--e-space-4);\n    line-height: 1.5;\n    resize: vertical;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ETextarea.js","names":["_sfc_main","ETextarea_vue_vue_type_script_setup_true_lang_default","ETextarea_default"],"sources":["../../../src/components/Textarea/ETextarea.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport EField from \"../Field/EField.vue\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = withDefaults(\n  defineProps<{\n    /** The visible label, a mono kicker above the text well. */\n    label: string;\n    /** Keep the label for screen readers and remove it from the page. */\n    hideLabel?: boolean;\n    /** Help that stays under the text well. */\n    hint?: string;\n    /** What to fix. Replaces the hint, marks the textarea invalid and is announced. */\n    error?: string;\n    /** An example, never the label. */\n    placeholder?: string;\n    /** Visible lines. */\n    rows?: number;\n    /** The `required` attribute and a word beside the label. */\n    required?: boolean;\n    /** A word beside the label. Flag whichever is rarer. */\n    optional?: boolean;\n    /** Disables the field. */\n    disabled?: boolean;\n    /** The id of the textarea; the label points at it. @default generated */\n    id?: string;\n  }>(),\n  { rows: 4 },\n);\n\n/** The text. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst input = ref<HTMLTextAreaElement | null>(null);\nconst attrs = useFieldAttrs();\nfunction inputBind(field: { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined }) {\n  return {\n    id: field.id,\n    class: \"e-input e-textarea\",\n    rows: props.rows,\n    placeholder: props.placeholder,\n    value: model.value,\n    disabled: props.disabled,\n    required: props.required,\n    \"aria-invalid\": field.ariaInvalid,\n    ...attrs.input(field.ariaDescribedby),\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/form-control-has-label -->\n      <textarea ref=\"input\" v-bind=\"inputBind(field)\" @input=\"model = ($event.target as HTMLTextAreaElement).value\" />\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-textarea {\n    height: auto;\n    min-height: 6.5rem;\n    padding: var(--e-space-3) var(--e-space-4);\n    line-height: 1.5;\n    resize: vertical;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Textarea/ETextarea.vue.d.ts

@@ -11,15 +11,17 @@ type __VLS_Props = {
     placeholder?: string;
     /** Visible lines. */
     rows?: number;
-    /** A word beside the label. */
+    /** The `required` attribute and a word beside the label. */
     required?: boolean;
     /** A word beside the label. Flag whichever is rarer. */
     optional?: boolean;
+    /** Disables the field. */
     disabled?: boolean;
-    /** The id of the textarea; the label points at it. Generated when left out. */
+    /** The id of the textarea; the label points at it. @default generated */
     id?: string;
 };
 type __VLS_ModelProps = {
+    /** The text. */
     modelValue?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;

package/dist/components/Textarea/ETextarea.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ETextarea.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","EField","_mergeProps","_unref","_withCtx","_createElementVNode","EField_default","ETextarea_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","props","__props","model","useModel","input","ref","attrs","useFieldAttrs","inputBind","field","openBlock","createBlock","mergeProps","unref","withCtx","createElementVNode","_cache","$event"],"sources":["../../../src/components/Textarea/ETextarea.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport EField from \"../Field/EField.vue\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = withDefaults(\n  defineProps<{\n    /** The visible label, a mono kicker above the text well. */\n    label: string;\n    /** Keep the label for screen readers and remove it from the page. */\n    hideLabel?: boolean;\n    /** Help that stays under the text well. */\n    hint?: string;\n    /** What to fix. Replaces the hint, marks the textarea invalid and is announced. */\n    error?: string;\n    /** An example, never the label. */\n    placeholder?: string;\n    /** Visible lines. */\n    rows?: number;\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 textarea; the label points at it. Generated when left out. */\n    id?: string;\n  }>(),\n  { rows: 4 },\n);\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst input = ref<HTMLTextAreaElement | null>(null);\nconst attrs = useFieldAttrs();\nfunction inputBind(field: { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined }) {\n  return {\n    id: field.id,\n    class: \"e-input e-textarea\",\n    rows: props.rows,\n    placeholder: props.placeholder,\n    value: model.value,\n    disabled: props.disabled,\n    required: props.required,\n    \"aria-invalid\": field.ariaInvalid,\n    ...attrs.input(field.ariaDescribedby),\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/form-control-has-label -->\n      <textarea ref=\"input\" v-bind=\"inputBind(field)\" @input=\"model = ($event.target as HTMLTextAreaElement).value\" />\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-textarea {\n    height: auto;\n    min-height: 6.5rem;\n    padding: var(--e-space-3) var(--e-space-4);\n    line-height: 1.5;\n    resize: vertical;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EASA,IAAMa,IAAQC,GAyBRC,IAAQf,EAAmBc,GAAA,YAAgB,GAE3CG,IAAQC,EAAgC,IAAI,GAC5CC,IAAQC,EAAc;EAC5B,SAASC,EAAU,GAA6F;GAC9G,OAAO;IACL,IAAIC,EAAM;IACV,OAAO;IACP,MAAMT,EAAM;IACZ,aAAaA,EAAM;IACnB,OAAOE,EAAM;IACb,UAAUF,EAAM;IAChB,UAAUA,EAAM;IAChB,gBAAgBS,EAAM;IACtB,GAAGH,EAAM,MAAMG,EAAM,eAAe;GACtC;EACF;E,OACAV,EAAa;GACX;GACA,aAAaK,EAAM,OAAO,MAAM;EAClC,CAAC,I,UAIChB,EAAA,GAAAC,EAcSC,GAdTC,EACUC,EAaDc,CAAA,CAbM,CAAC,QAAO,GAAA;GACpB,IAAIL,EAAA;GACJ,OAAOA,EAAA;GACP,cAAYA,EAAA;GACZ,MAAMA,EAAA;GACN,OAAOA,EAAA;GACP,UAAUA,EAAA;GACV,UAAUA,EAAA;;GAEA,SAAOR,GAAE,MAAK,CAEvBC,EAAgH,YAAhHH,EAAgH;IAAlG,SAAA;IAAJ,KAAIa;GAAgB,GAAAI,EAAUC,CAAK,GAAA,EAAI,SAAK,AAAAO,EAAA,QAAA,MAAE,EAAA,QAASC,EAAO,OAA+B,M"}
+{"version":3,"file":"ETextarea.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","EField","_mergeProps","_unref","_withCtx","_createElementVNode","EField_default","ETextarea_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","props","__props","model","useModel","input","ref","attrs","useFieldAttrs","inputBind","field","openBlock","createBlock","mergeProps","unref","withCtx","createElementVNode","_cache","$event"],"sources":["../../../src/components/Textarea/ETextarea.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport EField from \"../Field/EField.vue\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = withDefaults(\n  defineProps<{\n    /** The visible label, a mono kicker above the text well. */\n    label: string;\n    /** Keep the label for screen readers and remove it from the page. */\n    hideLabel?: boolean;\n    /** Help that stays under the text well. */\n    hint?: string;\n    /** What to fix. Replaces the hint, marks the textarea invalid and is announced. */\n    error?: string;\n    /** An example, never the label. */\n    placeholder?: string;\n    /** Visible lines. */\n    rows?: number;\n    /** The `required` attribute and a word beside the label. */\n    required?: boolean;\n    /** A word beside the label. Flag whichever is rarer. */\n    optional?: boolean;\n    /** Disables the field. */\n    disabled?: boolean;\n    /** The id of the textarea; the label points at it. @default generated */\n    id?: string;\n  }>(),\n  { rows: 4 },\n);\n\n/** The text. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst input = ref<HTMLTextAreaElement | null>(null);\nconst attrs = useFieldAttrs();\nfunction inputBind(field: { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined }) {\n  return {\n    id: field.id,\n    class: \"e-input e-textarea\",\n    rows: props.rows,\n    placeholder: props.placeholder,\n    value: model.value,\n    disabled: props.disabled,\n    required: props.required,\n    \"aria-invalid\": field.ariaInvalid,\n    ...attrs.input(field.ariaDescribedby),\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/form-control-has-label -->\n      <textarea ref=\"input\" v-bind=\"inputBind(field)\" @input=\"model = ($event.target as HTMLTextAreaElement).value\" />\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-textarea {\n    height: auto;\n    min-height: 6.5rem;\n    padding: var(--e-space-3) var(--e-space-4);\n    line-height: 1.5;\n    resize: vertical;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EASA,IAAMa,IAAQC,GA2BRC,IAAQf,EAAmBc,GAAA,YAAgB,GAE3CG,IAAQC,EAAgC,IAAI,GAC5CC,IAAQC,EAAc;EAC5B,SAASC,EAAU,GAA6F;GAC9G,OAAO;IACL,IAAIC,EAAM;IACV,OAAO;IACP,MAAMT,EAAM;IACZ,aAAaA,EAAM;IACnB,OAAOE,EAAM;IACb,UAAUF,EAAM;IAChB,UAAUA,EAAM;IAChB,gBAAgBS,EAAM;IACtB,GAAGH,EAAM,MAAMG,EAAM,eAAe;GACtC;EACF;E,OACAV,EAAa;GACX;GACA,aAAaK,EAAM,OAAO,MAAM;EAClC,CAAC,I,UAIChB,EAAA,GAAAC,EAcSC,GAdTC,EACUC,EAaDc,CAAA,CAbM,CAAC,QAAO,GAAA;GACpB,IAAIL,EAAA;GACJ,OAAOA,EAAA;GACP,cAAYA,EAAA;GACZ,MAAMA,EAAA;GACN,OAAOA,EAAA;GACP,UAAUA,EAAA;GACV,UAAUA,EAAA;;GAEA,SAAOR,GAAE,MAAK,CAEvBC,EAAgH,YAAhHH,EAAgH;IAAlG,SAAA;IAAJ,KAAIa;GAAgB,GAAAI,EAAUC,CAAK,GAAA,EAAI,SAAK,AAAAO,EAAA,QAAA,MAAE,EAAA,QAASC,EAAO,OAA+B,M"}

package/dist/components/Toast/EToast.js.map

@@ -1 +1 @@
-{"version":3,"file":"EToast.js","names":["_sfc_main","EToast_vue_vue_type_script_setup_true_lang_default","EToast_default"],"sources":["../../../src/components/Toast/EToast.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getCurrentInstance } from \"vue\";\nimport EActions from \"../Actions/EActions.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EIconButton from \"../IconButton/EIconButton.vue\";\nimport ESurface from \"../Surface/ESurface.vue\";\nimport { useMessages } from \"../../config.js\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\nimport \"../Notice/notice.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** What happened, in a few words. */\n    title: string;\n    /** `info` is the default. `danger` is announced at once. */\n    tone?: \"info\" | \"success\" | \"warning\" | \"danger\";\n    /** Replaces the icon of the tone. */\n    icon?: IconProp;\n    /** Forces the dismiss button on or off. Left out, it shows when a `@close` listener is attached. */\n    closable?: boolean;\n  }>(),\n  { tone: \"info\", closable: undefined },\n);\n\nconst emit = defineEmits<{\n  /** The dismiss 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  /** A Button. At the end of the row when the toast is 36rem wide or more, under the text when narrower. */\n  action?(): unknown;\n}>();\n\nconst t = useMessages();\nconst instance = getCurrentInstance();\nconst TONE_ICON = { info: \"info\", success: \"check\", warning: \"alert\", danger: \"alert\" } as const;\nconst hasClose = () => props.closable ?? !!instance?.vnode.props?.onClose;\n</script>\n\n<template>\n  <ESurface\n    tone=\"float\"\n    class=\"e-toast\"\n    :class=\"[`e-toast--${tone}`, $slots.action && 'e-toast--actions']\"\n    :role=\"tone === 'danger' ? 'alert' : 'status'\"\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 e-toast-body\">\n        <p class=\"e-toast-title\">{{ title }}</p>\n        <p v-if=\"$slots.default\" class=\"e-toast-text\"><slot /></p>\n      </div>\n      <EActions v-if=\"$slots.action\" class=\"e-notice-actions\"><slot name=\"action\" /></EActions>\n      <span v-if=\"hasClose()\" class=\"e-notice-dismiss\">\n        <EIconButton icon=\"x\" :label=\"t('dismiss')\" @click=\"emit('close')\" />\n      </span>\n    </div>\n  </ESurface>\n</template>\n\n<style>\n@layer e.containers {\n  .e-toast {\n    --e-tone: var(--e-primary);\n\n    container-type: inline-size;\n    width: min(24rem, 100%);\n    padding: var(--e-space-3) var(--e-space-4);\n  }\n\n  .e-toast--actions {\n    width: min(40rem, 100%);\n  }\n\n  .e-toast--success {\n    --e-tone: var(--e-secondary);\n  }\n\n  .e-toast--warning {\n    --e-tone: var(--e-warning-strong);\n  }\n\n  .e-toast--danger {\n    --e-tone: var(--e-danger);\n  }\n\n  .e-toast-title {\n    margin: 0;\n    font: 500 var(--e-text-lg) / 24px var(--e-font-sans);\n  }\n\n  .e-toast-text {\n    margin: 0;\n    font: 400 var(--e-text-sm) / 1.45 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n\n  @media (forced-colors: active) {\n    .e-toast {\n      border: 1px solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EToast.js","names":["_sfc_main","EToast_vue_vue_type_script_setup_true_lang_default","EToast_default"],"sources":["../../../src/components/Toast/EToast.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getCurrentInstance } from \"vue\";\nimport EActions from \"../Actions/EActions.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EIconButton from \"../IconButton/EIconButton.vue\";\nimport ESurface from \"../Surface/ESurface.vue\";\nimport { useMessages } from \"../../config.js\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\nimport \"../Notice/notice.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** What happened, in a few words. */\n    title: string;\n    /** `info` is the default. `danger` is announced at once. */\n    tone?: \"info\" | \"success\" | \"warning\" | \"danger\";\n    /** Replaces the icon of the tone. */\n    icon?: IconProp;\n    /** Forces the dismiss button on or off. Left out, it shows when a `@close` listener is attached. */\n    closable?: boolean;\n  }>(),\n  { tone: \"info\", closable: undefined },\n);\n\nconst emit = defineEmits<{\n  /** The dismiss 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  /** A Button. At the end of the row when the toast is 36rem wide or more, under the text when narrower. */\n  action?(): unknown;\n}>();\n\nconst t = useMessages();\nconst instance = getCurrentInstance();\nconst TONE_ICON = { info: \"info\", success: \"check\", warning: \"alert\", danger: \"alert\" } as const;\nconst hasClose = () => props.closable ?? !!instance?.vnode.props?.onClose;\n</script>\n\n<template>\n  <ESurface\n    raised\n    class=\"e-toast\"\n    :class=\"[`e-toast--${tone}`, $slots.action && 'e-toast--actions']\"\n    :role=\"tone === 'danger' ? 'alert' : 'status'\"\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 e-toast-body\">\n        <p class=\"e-toast-title\">{{ title }}</p>\n        <p v-if=\"$slots.default\" class=\"e-toast-text\"><slot /></p>\n      </div>\n      <EActions v-if=\"$slots.action\" class=\"e-notice-actions\"><slot name=\"action\" /></EActions>\n      <span v-if=\"hasClose()\" class=\"e-notice-dismiss\">\n        <EIconButton icon=\"x\" :label=\"t('dismiss')\" @click=\"emit('close')\" />\n      </span>\n    </div>\n  </ESurface>\n</template>\n\n<style>\n@layer e.containers {\n  .e-toast {\n    --e-tone: var(--e-primary);\n\n    container-type: inline-size;\n    width: min(24rem, 100%);\n    padding: var(--e-space-3) var(--e-space-4);\n  }\n\n  .e-toast--actions {\n    width: min(40rem, 100%);\n  }\n\n  .e-toast--success {\n    --e-tone: var(--e-secondary);\n  }\n\n  .e-toast--warning {\n    --e-tone: var(--e-warning-strong);\n  }\n\n  .e-toast--danger {\n    --e-tone: var(--e-danger);\n  }\n\n  .e-toast-title {\n    margin: 0;\n    font: 500 var(--e-text-lg) / 24px var(--e-font-sans);\n  }\n\n  .e-toast-text {\n    margin: 0;\n    font: 400 var(--e-text-sm) / 1.45 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n\n  @media (forced-colors: active) {\n    .e-toast {\n      border: var(--e-stroke-card) solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Toast/EToast.vue_vue_type_script_setup_true_lang.js

@@ -2,9 +2,9 @@
 import { useMessages as e } from "../../config.js";
 import t from "../Actions/EActions.js";
 import n from "../Icon/EIcon.js";
-import r from "../Surface/ESurface.js";
-import i from "../IconButton/EIconButton.js";
+import r from "../IconButton/EIconButton.js";
 /* empty css               */
+import i from "../Surface/ESurface.js";
 import { createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, getCurrentInstance as d, normalizeClass as f, openBlock as p, renderSlot as m, toDisplayString as h, unref as g, withCtx as _ } from "vue";
 //#region src/components/Toast/EToast.vue?vue&type=script&setup=true&lang.ts
 var v = { class: "e-notice-grid" }, y = { class: "e-notice-icon" }, b = { class: "e-notice-body e-toast-body" }, x = { class: "e-toast-title" }, S = {
@@ -32,8 +32,8 @@ var v = { class: "e-notice-grid" }, y = { class: "e-notice-icon" }, b = { class:
 			warning: "alert",
 			danger: "alert"
 		}, A = () => T.closable ?? !!O?.vnode.props?.onClose;
-		return (e, d) => (p(), a(r, {
-			tone: "float",
+		return (e, d) => (p(), a(i, {
+			raised: "",
 			class: f(["e-toast", [`e-toast--${u.tone}`, e.$slots.action && "e-toast--actions"]]),
 			role: u.tone === "danger" ? "alert" : "status"
 		}, {
@@ -47,7 +47,7 @@ var v = { class: "e-notice-grid" }, y = { class: "e-notice-icon" }, b = { class:
 					default: _(() => [m(e.$slots, "action")]),
 					_: 3
 				})) : o("", !0),
-				A() ? (p(), s("span", C, [l(i, {
+				A() ? (p(), s("span", C, [l(r, {
 					icon: "x",
 					label: g(D)("dismiss"),
 					onClick: d[0] ||= (e) => E("close")

package/dist/components/Toast/EToast.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EToast.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createBlock","ESurface","_normalizeClass","_withCtx","_createElementVNode","_createVNode","EIcon","_toDisplayString","_createElementBlock","_renderSlot","_createCommentVNode","EActions","EIconButton","_unref","EActions_default","EIcon_default","ESurface_default","EIconButton_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","EToast_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","t","useMessages","instance","getCurrentInstance","TONE_ICON","hasClose","openBlock","createBlock","normalizeClass","_ctx","withCtx","createElementVNode","createVNode","toDisplayString","createElementBlock","renderSlot","createCommentVNode","unref","_cache"],"sources":["../../../src/components/Toast/EToast.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getCurrentInstance } from \"vue\";\nimport EActions from \"../Actions/EActions.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EIconButton from \"../IconButton/EIconButton.vue\";\nimport ESurface from \"../Surface/ESurface.vue\";\nimport { useMessages } from \"../../config.js\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\nimport \"../Notice/notice.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** What happened, in a few words. */\n    title: string;\n    /** `info` is the default. `danger` is announced at once. */\n    tone?: \"info\" | \"success\" | \"warning\" | \"danger\";\n    /** Replaces the icon of the tone. */\n    icon?: IconProp;\n    /** Forces the dismiss button on or off. Left out, it shows when a `@close` listener is attached. */\n    closable?: boolean;\n  }>(),\n  { tone: \"info\", closable: undefined },\n);\n\nconst emit = defineEmits<{\n  /** The dismiss 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  /** A Button. At the end of the row when the toast is 36rem wide or more, under the text when narrower. */\n  action?(): unknown;\n}>();\n\nconst t = useMessages();\nconst instance = getCurrentInstance();\nconst TONE_ICON = { info: \"info\", success: \"check\", warning: \"alert\", danger: \"alert\" } as const;\nconst hasClose = () => props.closable ?? !!instance?.vnode.props?.onClose;\n</script>\n\n<template>\n  <ESurface\n    tone=\"float\"\n    class=\"e-toast\"\n    :class=\"[`e-toast--${tone}`, $slots.action && 'e-toast--actions']\"\n    :role=\"tone === 'danger' ? 'alert' : 'status'\"\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 e-toast-body\">\n        <p class=\"e-toast-title\">{{ title }}</p>\n        <p v-if=\"$slots.default\" class=\"e-toast-text\"><slot /></p>\n      </div>\n      <EActions v-if=\"$slots.action\" class=\"e-notice-actions\"><slot name=\"action\" /></EActions>\n      <span v-if=\"hasClose()\" class=\"e-notice-dismiss\">\n        <EIconButton icon=\"x\" :label=\"t('dismiss')\" @click=\"emit('close')\" />\n      </span>\n    </div>\n  </ESurface>\n</template>\n\n<style>\n@layer e.containers {\n  .e-toast {\n    --e-tone: var(--e-primary);\n\n    container-type: inline-size;\n    width: min(24rem, 100%);\n    padding: var(--e-space-3) var(--e-space-4);\n  }\n\n  .e-toast--actions {\n    width: min(40rem, 100%);\n  }\n\n  .e-toast--success {\n    --e-tone: var(--e-secondary);\n  }\n\n  .e-toast--warning {\n    --e-tone: var(--e-warning-strong);\n  }\n\n  .e-toast--danger {\n    --e-tone: var(--e-danger);\n  }\n\n  .e-toast-title {\n    margin: 0;\n    font: 500 var(--e-text-lg) / 24px var(--e-font-sans);\n  }\n\n  .e-toast-text {\n    margin: 0;\n    font: 400 var(--e-text-sm) / 1.45 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n\n  @media (forced-colors: active) {\n    .e-toast {\n      border: 1px solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWA,IAAM4B,IAAQC,GAcRC,IAAOH,GAYPI,IAAIC,EAAY,GAChBC,IAAWC,EAAmB,GAC9BC,IAAY;GAAE,MAAM;GAAQ,SAAS;GAAS,SAAS;GAAS,QAAQ;EAAQ,GAChFC,UAAiBR,EAAM,YAAY,CAAC,CAACK,GAAU,MAAM,OAAO;E,kBAIhEhC,EAAA,GAAAC,EAiBWC,GAAA;GAhBT,MAAK;GACL,OAAKC,EAAA,CAAC,WAAS,CAAA,YACMyB,EAAA,QAAQ7B,EAAAA,OAAO,UAAM,kBAAA,CAAA,CAAA;GACzC,MAAM6B,EAAA,SAAI,WAAA,UAAA;;GAEX,SAAAxB,QAUM,CAVNC,EAUM,OAVNc,GAUM;IATJd,EAA4E,QAA5Ee,GAA4E,CAAhDd,EAAyCC,GAAA,EAAjC,MAAMqB,EAAA,QAAQM,EAAUN,EAAA,M;IAC5DvB,EAGM,OAHNgB,GAGM,CAFJhB,EAAwC,KAAxCiB,GAAwCd,EAAZoB,EAAA,KAAK,GAAA,CAAA,GACxB7B,EAAAA,OAAO,WAAhBC,EAAA,GAAAS,EAA0D,KAA1Dc,GAA0D,CAAZb,EAAQ6B,EAAA,QAAA,SAAA,C;IAExCxC,EAAAA,OAAO,UAAvBC,EAAA,GAAAC,EAAyFW,GAAA;;KAA1D,OAAM;;KAAmB,SAAAR,QAAsB,CAAtBM,EAAsB6B,EAAA,QAAA,QAAA,C;;;IAClEJ,EAAQ,KAApBnC,EAAA,GAAAS,EAEO,QAFPe,GAEO,CADLlB,EAAqEO,GAAA;KAAxD,MAAK;KAAK,OAAOC,EAAAgB,CAAA,CAAC,CAAA,SAAA;KAAc,SAAK,AAAAkB,EAAA,QAAA,MAAEnB,EAAI,OAAA"}
+{"version":3,"file":"EToast.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createBlock","ESurface","_normalizeClass","_withCtx","_createElementVNode","_createVNode","EIcon","_toDisplayString","_createElementBlock","_renderSlot","_createCommentVNode","EActions","EIconButton","_unref","EActions_default","EIcon_default","EIconButton_default","ESurface_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","EToast_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","t","useMessages","instance","getCurrentInstance","TONE_ICON","hasClose","openBlock","createBlock","normalizeClass","_ctx","withCtx","createElementVNode","createVNode","toDisplayString","createElementBlock","renderSlot","createCommentVNode","unref","_cache"],"sources":["../../../src/components/Toast/EToast.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getCurrentInstance } from \"vue\";\nimport EActions from \"../Actions/EActions.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EIconButton from \"../IconButton/EIconButton.vue\";\nimport ESurface from \"../Surface/ESurface.vue\";\nimport { useMessages } from \"../../config.js\";\nimport type { IconProp } from \"../../icons/types.js\";\nimport \"../../styles/base.css\";\nimport \"../Notice/notice.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** What happened, in a few words. */\n    title: string;\n    /** `info` is the default. `danger` is announced at once. */\n    tone?: \"info\" | \"success\" | \"warning\" | \"danger\";\n    /** Replaces the icon of the tone. */\n    icon?: IconProp;\n    /** Forces the dismiss button on or off. Left out, it shows when a `@close` listener is attached. */\n    closable?: boolean;\n  }>(),\n  { tone: \"info\", closable: undefined },\n);\n\nconst emit = defineEmits<{\n  /** The dismiss 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  /** A Button. At the end of the row when the toast is 36rem wide or more, under the text when narrower. */\n  action?(): unknown;\n}>();\n\nconst t = useMessages();\nconst instance = getCurrentInstance();\nconst TONE_ICON = { info: \"info\", success: \"check\", warning: \"alert\", danger: \"alert\" } as const;\nconst hasClose = () => props.closable ?? !!instance?.vnode.props?.onClose;\n</script>\n\n<template>\n  <ESurface\n    raised\n    class=\"e-toast\"\n    :class=\"[`e-toast--${tone}`, $slots.action && 'e-toast--actions']\"\n    :role=\"tone === 'danger' ? 'alert' : 'status'\"\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 e-toast-body\">\n        <p class=\"e-toast-title\">{{ title }}</p>\n        <p v-if=\"$slots.default\" class=\"e-toast-text\"><slot /></p>\n      </div>\n      <EActions v-if=\"$slots.action\" class=\"e-notice-actions\"><slot name=\"action\" /></EActions>\n      <span v-if=\"hasClose()\" class=\"e-notice-dismiss\">\n        <EIconButton icon=\"x\" :label=\"t('dismiss')\" @click=\"emit('close')\" />\n      </span>\n    </div>\n  </ESurface>\n</template>\n\n<style>\n@layer e.containers {\n  .e-toast {\n    --e-tone: var(--e-primary);\n\n    container-type: inline-size;\n    width: min(24rem, 100%);\n    padding: var(--e-space-3) var(--e-space-4);\n  }\n\n  .e-toast--actions {\n    width: min(40rem, 100%);\n  }\n\n  .e-toast--success {\n    --e-tone: var(--e-secondary);\n  }\n\n  .e-toast--warning {\n    --e-tone: var(--e-warning-strong);\n  }\n\n  .e-toast--danger {\n    --e-tone: var(--e-danger);\n  }\n\n  .e-toast-title {\n    margin: 0;\n    font: 500 var(--e-text-lg) / 24px var(--e-font-sans);\n  }\n\n  .e-toast-text {\n    margin: 0;\n    font: 400 var(--e-text-sm) / 1.45 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n\n  @media (forced-colors: active) {\n    .e-toast {\n      border: var(--e-stroke-card) solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWA,IAAM4B,IAAQC,GAcRC,IAAOH,GAYPI,IAAIC,EAAY,GAChBC,IAAWC,EAAmB,GAC9BC,IAAY;GAAE,MAAM;GAAQ,SAAS;GAAS,SAAS;GAAS,QAAQ;EAAQ,GAChFC,UAAiBR,EAAM,YAAY,CAAC,CAACK,GAAU,MAAM,OAAO;E,kBAIhEhC,EAAA,GAAAC,EAiBWC,GAAA;GAhBT,QAAA;GACA,OAAKC,EAAA,CAAC,WAAS,CAAA,YACMyB,EAAA,QAAQ7B,EAAAA,OAAO,UAAM,kBAAA,CAAA,CAAA;GACzC,MAAM6B,EAAA,SAAI,WAAA,UAAA;;GAEX,SAAAxB,QAUM,CAVNC,EAUM,OAVNc,GAUM;IATJd,EAA4E,QAA5Ee,GAA4E,CAAhDd,EAAyCC,GAAA,EAAjC,MAAMqB,EAAA,QAAQM,EAAUN,EAAA,M;IAC5DvB,EAGM,OAHNgB,GAGM,CAFJhB,EAAwC,KAAxCiB,GAAwCd,EAAZoB,EAAA,KAAK,GAAA,CAAA,GACxB7B,EAAAA,OAAO,WAAhBC,EAAA,GAAAS,EAA0D,KAA1Dc,GAA0D,CAAZb,EAAQ6B,EAAA,QAAA,SAAA,C;IAExCxC,EAAAA,OAAO,UAAvBC,EAAA,GAAAC,EAAyFW,GAAA;;KAA1D,OAAM;;KAAmB,SAAAR,QAAsB,CAAtBM,EAAsB6B,EAAA,QAAA,QAAA,C;;;IAClEJ,EAAQ,KAApBnC,EAAA,GAAAS,EAEO,QAFPe,GAEO,CADLlB,EAAqEO,GAAA;KAAxD,MAAK;KAAK,OAAOC,EAAAgB,CAAA,CAAC,CAAA,SAAA;KAAc,SAAK,AAAAkB,EAAA,QAAA,MAAEnB,EAAI,OAAA"}

package/dist/components/ToastProvider/EToastProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"EToastProvider.js","names":["_sfc_main","EToastProvider_vue_vue_type_script_setup_true_lang_default","EToastProvider_default"],"sources":["../../../src/components/ToastProvider/EToastProvider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { inject, onBeforeUnmount, provide, ref, watch, type FunctionalComponent, type VNodeChild } from \"vue\";\nimport { useEventListener } from \"@vueuse/core\";\nimport EToast from \"../Toast/EToast.vue\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport { createToasts, TOAST_KEY } from \"../../composables/useToast.js\";\nimport \"../../styles/base.css\";\n\ndefineSlots<{\n  /** The app. Call `useToast()` anywhere inside it. */\n  default?(): unknown;\n}>();\n\nconst t = useMessages();\nconst target = usePortalTarget();\n\nconst provided = inject(TOAST_KEY, null);\nconst store = provided ?? createToasts();\nif (!provided) {\n  provide(TOAST_KEY, store);\n  onBeforeUnmount(() => store.clear());\n}\n\nconst region = ref<HTMLElement>();\nlet hovering = false;\nlet focused = false;\nconst settle = () => (hovering || focused ? store.pause() : store.resume());\n\nuseEventListener(region, \"mouseenter\", () => {\n  hovering = true;\n  settle();\n});\nuseEventListener(region, \"mouseleave\", () => {\n  hovering = false;\n  settle();\n});\nuseEventListener(region, \"focusin\", () => {\n  focused = true;\n  settle();\n});\nuseEventListener(region, \"focusout\", (e: FocusEvent) => {\n  if (region.value?.contains(e.relatedTarget as Node | null)) return;\n  focused = false;\n  settle();\n});\n\nwatch(\n  () => store.items.length,\n  (n) => {\n    if (n) return;\n    hovering = false;\n    focused = false;\n    store.resume();\n  },\n);\n\nconst Render: FunctionalComponent<{ content: VNodeChild | (() => VNodeChild) }> = (p) =>\n  typeof p.content === \"function\" ? p.content() : p.content;\nRender.props = [\"content\"];\n</script>\n\n<template>\n  <slot />\n  <Teleport :to=\"target\">\n    <div ref=\"region\" class=\"e-root e-toast-region\" role=\"region\" :aria-label=\"t('toastRegion')\">\n      <EToast\n        v-for=\"item in store.items\"\n        :key=\"item.id\"\n        :tone=\"item.tone\"\n        :title=\"item.title\"\n        @close=\"store.dismiss(item.id)\"\n      >\n        <template v-if=\"item.message\" #default>{{ item.message }}</template>\n        <template v-if=\"item.action\" #action><Render :content=\"item.action\" /></template>\n      </EToast>\n    </div>\n  </Teleport>\n</template>\n\n<style>\n@layer e.containers {\n  .e-toast-region {\n    justify-items: end;\n    position: fixed;\n    inset-inline-end: max(16px, env(safe-area-inset-right, 0px));\n    bottom: max(16px, env(safe-area-inset-bottom, 0px));\n    z-index: var(--e-z-toast);\n    display: grid;\n    gap: var(--e-space-2);\n  }\n\n  .e-toast-region > .e-toast {\n    width: min(24rem, calc(100vw - 32px));\n  }\n\n  .e-toast-region > .e-toast--actions {\n    width: min(40rem, calc(100vw - 32px));\n  }\n\n  @media print {\n    .e-toast-region {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EToastProvider.js","names":["_sfc_main","EToastProvider_vue_vue_type_script_setup_true_lang_default","EToastProvider_default"],"sources":["../../../src/components/ToastProvider/EToastProvider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { inject, onBeforeUnmount, provide, ref, watch, type FunctionalComponent, type VNodeChild } from \"vue\";\nimport { useEventListener } from \"@vueuse/core\";\nimport EToast from \"../Toast/EToast.vue\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport { createToasts, TOAST_KEY } from \"../../composables/useToast.js\";\nimport \"../../styles/base.css\";\n\ndefineSlots<{\n  /** The app. Call `useToast()` anywhere inside it. */\n  default?(): unknown;\n}>();\n\nconst t = useMessages();\nconst target = usePortalTarget();\n\nconst provided = inject(TOAST_KEY, null);\nconst store = provided ?? createToasts();\nif (!provided) {\n  provide(TOAST_KEY, store);\n  onBeforeUnmount(() => store.clear());\n}\n\nconst region = ref<HTMLElement>();\nlet hovering = false;\nlet focused = false;\nconst settle = () => (hovering || focused ? store.pause() : store.resume());\n\nuseEventListener(region, \"mouseenter\", () => {\n  hovering = true;\n  settle();\n});\nuseEventListener(region, \"mouseleave\", () => {\n  hovering = false;\n  settle();\n});\nuseEventListener(region, \"focusin\", () => {\n  focused = true;\n  settle();\n});\nuseEventListener(region, \"focusout\", (e: FocusEvent) => {\n  if (region.value?.contains(e.relatedTarget as Node | null)) return;\n  focused = false;\n  settle();\n});\n\nwatch(\n  () => store.items.length,\n  (n) => {\n    if (n) return;\n    hovering = false;\n    focused = false;\n    store.resume();\n  },\n);\n\nconst Render: FunctionalComponent<{ content: VNodeChild | (() => VNodeChild) }> = (p) =>\n  typeof p.content === \"function\" ? p.content() : p.content;\nRender.props = [\"content\"];\n</script>\n\n<template>\n  <slot />\n  <Teleport :to=\"target\">\n    <div ref=\"region\" class=\"e-root e-toast-region\" role=\"region\" :aria-label=\"t('toastRegion')\">\n      <EToast\n        v-for=\"item in store.items\"\n        :key=\"item.id\"\n        :tone=\"item.tone\"\n        :title=\"item.title\"\n        @close=\"store.dismiss(item.id)\"\n      >\n        <template v-if=\"item.message\" #default>{{ item.message }}</template>\n        <template v-if=\"item.action\" #action><Render :content=\"item.action\" /></template>\n      </EToast>\n    </div>\n  </Teleport>\n</template>\n\n<style>\n@layer e.containers {\n  .e-toast-region {\n    justify-items: end;\n    position: fixed;\n    inset-inline-end: max(var(--e-space-4), env(safe-area-inset-right, 0px));\n    bottom: max(var(--e-space-4), env(safe-area-inset-bottom, 0px));\n    z-index: var(--e-z-toast);\n    display: grid;\n    gap: var(--e-space-2);\n  }\n\n  .e-toast-region > .e-toast {\n    width: min(24rem, calc(100vw - 2 * var(--e-space-4)));\n  }\n\n  .e-toast-region > .e-toast--actions {\n    width: min(40rem, calc(100vw - 2 * var(--e-space-4)));\n  }\n\n  @media print {\n    .e-toast-region {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/ToastProvider/EToastProvider.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EToastProvider.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_renderSlot","_createBlock","_Teleport","_unref","_createElementVNode","_renderList","EToast","_createSlots","_withCtx","_createTextVNode","_toDisplayString","_createVNode","EToast_default","_hoisted_1","EToastProvider_vue_vue_type_script_setup_true_lang_default","t","useMessages","target","usePortalTarget","provided","inject","TOAST_KEY","store","createToasts","provide","onBeforeUnmount","region","ref","hovering","focused","settle","useEventListener","watch","n","Render","p","openBlock","createElementBlock","Fragment","renderSlot","_ctx","createBlock","Teleport","unref","createElementVNode","renderList","item","createSlots","withCtx","createTextVNode","toDisplayString","createVNode"],"sources":["../../../src/components/ToastProvider/EToastProvider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { inject, onBeforeUnmount, provide, ref, watch, type FunctionalComponent, type VNodeChild } from \"vue\";\nimport { useEventListener } from \"@vueuse/core\";\nimport EToast from \"../Toast/EToast.vue\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport { createToasts, TOAST_KEY } from \"../../composables/useToast.js\";\nimport \"../../styles/base.css\";\n\ndefineSlots<{\n  /** The app. Call `useToast()` anywhere inside it. */\n  default?(): unknown;\n}>();\n\nconst t = useMessages();\nconst target = usePortalTarget();\n\nconst provided = inject(TOAST_KEY, null);\nconst store = provided ?? createToasts();\nif (!provided) {\n  provide(TOAST_KEY, store);\n  onBeforeUnmount(() => store.clear());\n}\n\nconst region = ref<HTMLElement>();\nlet hovering = false;\nlet focused = false;\nconst settle = () => (hovering || focused ? store.pause() : store.resume());\n\nuseEventListener(region, \"mouseenter\", () => {\n  hovering = true;\n  settle();\n});\nuseEventListener(region, \"mouseleave\", () => {\n  hovering = false;\n  settle();\n});\nuseEventListener(region, \"focusin\", () => {\n  focused = true;\n  settle();\n});\nuseEventListener(region, \"focusout\", (e: FocusEvent) => {\n  if (region.value?.contains(e.relatedTarget as Node | null)) return;\n  focused = false;\n  settle();\n});\n\nwatch(\n  () => store.items.length,\n  (n) => {\n    if (n) return;\n    hovering = false;\n    focused = false;\n    store.resume();\n  },\n);\n\nconst Render: FunctionalComponent<{ content: VNodeChild | (() => VNodeChild) }> = (p) =>\n  typeof p.content === \"function\" ? p.content() : p.content;\nRender.props = [\"content\"];\n</script>\n\n<template>\n  <slot />\n  <Teleport :to=\"target\">\n    <div ref=\"region\" class=\"e-root e-toast-region\" role=\"region\" :aria-label=\"t('toastRegion')\">\n      <EToast\n        v-for=\"item in store.items\"\n        :key=\"item.id\"\n        :tone=\"item.tone\"\n        :title=\"item.title\"\n        @close=\"store.dismiss(item.id)\"\n      >\n        <template v-if=\"item.message\" #default>{{ item.message }}</template>\n        <template v-if=\"item.action\" #action><Render :content=\"item.action\" /></template>\n      </EToast>\n    </div>\n  </Teleport>\n</template>\n\n<style>\n@layer e.containers {\n  .e-toast-region {\n    justify-items: end;\n    position: fixed;\n    inset-inline-end: max(16px, env(safe-area-inset-right, 0px));\n    bottom: max(16px, env(safe-area-inset-bottom, 0px));\n    z-index: var(--e-z-toast);\n    display: grid;\n    gap: var(--e-space-2);\n  }\n\n  .e-toast-region > .e-toast {\n    width: min(24rem, calc(100vw - 32px));\n  }\n\n  .e-toast-region > .e-toast--actions {\n    width: min(40rem, calc(100vw - 32px));\n  }\n\n  @media print {\n    .e-toast-region {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;EAaA,IAAMkB,IAAIC,EAAY,GAChBC,IAASC,EAAgB,GAEzBC,IAAWC,EAAOC,GAAW,IAAI,GACjCC,IAAQH,KAAYI,EAAa;EACvC,AAAKJ,MACHK,EAAQH,GAAWC,CAAK,GACxBG,QAAsBH,EAAM,MAAM,CAAC;EAGrC,IAAMI,IAASC,EAAiB,GAC5BC,IAAW,IACXC,IAAU,IACRC,UAAgBF,KAAYC,IAAUP,EAAM,MAAM,IAAIA,EAAM,OAAO;EAoBzE,AAlBAS,EAAiBL,GAAQ,oBAAoB;GAE3C,AADA,IAAW,IACXI,EAAO;EACT,CAAC,GACDC,EAAiBL,GAAQ,oBAAoB;GAE3C,AADA,IAAW,IACXI,EAAO;EACT,CAAC,GACDC,EAAiBL,GAAQ,iBAAiB;GAExC,AADA,IAAU,IACVI,EAAO;EACT,CAAC,GACDC,EAAiBL,GAAQ,aAAa,MAAkB;GACtD,AAAIA,EAAO,OAAO,SAAS,EAAE,aAA4B,MACzD,IAAU,IACVI,EAAO;EACT,CAAC,GAEDE,QACQV,EAAM,MAAM,SACjB,MAAM;GACL,AAAIW,MACJ,IAAW,IACX,IAAU,IACVX,EAAM,OAAO;EACf,CACF;EAEA,IAAMY,KAA6E,MACjF,OAAOC,EAAE,WAAY,aAAaA,EAAE,QAAQ,IAAIA,EAAE;E,OACpD,EAAO,QAAQ,CAAC,SAAS,I,2BAIvBnC,EAAQwC,EAAA,QAAA,SAAA,IACR3C,EAAA,GAAAI,EAaWC,GAAA,EAbA,IAAIC,EAAAc,CAAA,EAAM,GAAA,CACnBb,EAWM,OAAA;GAXG,SAAA;GAAJ,KAAIsB;GAAS,OAAM;GAAwB,MAAK;GAAU,cAAYvB,EAAAY,CAAA,CAAC,CAAA,aAAA;E,KAC1ElB,EAAA,EAAA,GAAAC,EASSC,GAAA,MAAAM,EARQF,EAAAmB,CAAA,CAAK,CAAC,QAAd,OADTzB,EAAA,GAAAI,EASSK,GAAA;GAPN,KAAKwC,EAAK;GACV,MAAMA,EAAK;GACX,OAAOA,EAAK;GACZ,UAAK,MAAE3C,EAAAmB,CAAA,CAAK,CAAC,QAAQwB,EAAK,EAAE;E,gBAEbA,EAAK,U;GAAU,MAAA;GAAQ,IAAAtC,QAAkB,CAAfC,EAAAC,EAAAoC,EAAK,OAAO,GAAA,CAAA,C;;E,YACtCA,EAAK,S;GAAS,MAAA;GAAO,IAAAtC,QAAiC,CAAjCG,EAAiCuB,GAAA,EAAxB,SAASY,EAAK,O"}
+{"version":3,"file":"EToastProvider.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_renderSlot","_createBlock","_Teleport","_unref","_createElementVNode","_renderList","EToast","_createSlots","_withCtx","_createTextVNode","_toDisplayString","_createVNode","EToast_default","_hoisted_1","EToastProvider_vue_vue_type_script_setup_true_lang_default","t","useMessages","target","usePortalTarget","provided","inject","TOAST_KEY","store","createToasts","provide","onBeforeUnmount","region","ref","hovering","focused","settle","useEventListener","watch","n","Render","p","openBlock","createElementBlock","Fragment","renderSlot","_ctx","createBlock","Teleport","unref","createElementVNode","renderList","item","createSlots","withCtx","createTextVNode","toDisplayString","createVNode"],"sources":["../../../src/components/ToastProvider/EToastProvider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { inject, onBeforeUnmount, provide, ref, watch, type FunctionalComponent, type VNodeChild } from \"vue\";\nimport { useEventListener } from \"@vueuse/core\";\nimport EToast from \"../Toast/EToast.vue\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport { createToasts, TOAST_KEY } from \"../../composables/useToast.js\";\nimport \"../../styles/base.css\";\n\ndefineSlots<{\n  /** The app. Call `useToast()` anywhere inside it. */\n  default?(): unknown;\n}>();\n\nconst t = useMessages();\nconst target = usePortalTarget();\n\nconst provided = inject(TOAST_KEY, null);\nconst store = provided ?? createToasts();\nif (!provided) {\n  provide(TOAST_KEY, store);\n  onBeforeUnmount(() => store.clear());\n}\n\nconst region = ref<HTMLElement>();\nlet hovering = false;\nlet focused = false;\nconst settle = () => (hovering || focused ? store.pause() : store.resume());\n\nuseEventListener(region, \"mouseenter\", () => {\n  hovering = true;\n  settle();\n});\nuseEventListener(region, \"mouseleave\", () => {\n  hovering = false;\n  settle();\n});\nuseEventListener(region, \"focusin\", () => {\n  focused = true;\n  settle();\n});\nuseEventListener(region, \"focusout\", (e: FocusEvent) => {\n  if (region.value?.contains(e.relatedTarget as Node | null)) return;\n  focused = false;\n  settle();\n});\n\nwatch(\n  () => store.items.length,\n  (n) => {\n    if (n) return;\n    hovering = false;\n    focused = false;\n    store.resume();\n  },\n);\n\nconst Render: FunctionalComponent<{ content: VNodeChild | (() => VNodeChild) }> = (p) =>\n  typeof p.content === \"function\" ? p.content() : p.content;\nRender.props = [\"content\"];\n</script>\n\n<template>\n  <slot />\n  <Teleport :to=\"target\">\n    <div ref=\"region\" class=\"e-root e-toast-region\" role=\"region\" :aria-label=\"t('toastRegion')\">\n      <EToast\n        v-for=\"item in store.items\"\n        :key=\"item.id\"\n        :tone=\"item.tone\"\n        :title=\"item.title\"\n        @close=\"store.dismiss(item.id)\"\n      >\n        <template v-if=\"item.message\" #default>{{ item.message }}</template>\n        <template v-if=\"item.action\" #action><Render :content=\"item.action\" /></template>\n      </EToast>\n    </div>\n  </Teleport>\n</template>\n\n<style>\n@layer e.containers {\n  .e-toast-region {\n    justify-items: end;\n    position: fixed;\n    inset-inline-end: max(var(--e-space-4), env(safe-area-inset-right, 0px));\n    bottom: max(var(--e-space-4), env(safe-area-inset-bottom, 0px));\n    z-index: var(--e-z-toast);\n    display: grid;\n    gap: var(--e-space-2);\n  }\n\n  .e-toast-region > .e-toast {\n    width: min(24rem, calc(100vw - 2 * var(--e-space-4)));\n  }\n\n  .e-toast-region > .e-toast--actions {\n    width: min(40rem, calc(100vw - 2 * var(--e-space-4)));\n  }\n\n  @media print {\n    .e-toast-region {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;EAaA,IAAMkB,IAAIC,EAAY,GAChBC,IAASC,EAAgB,GAEzBC,IAAWC,EAAOC,GAAW,IAAI,GACjCC,IAAQH,KAAYI,EAAa;EACvC,AAAKJ,MACHK,EAAQH,GAAWC,CAAK,GACxBG,QAAsBH,EAAM,MAAM,CAAC;EAGrC,IAAMI,IAASC,EAAiB,GAC5BC,IAAW,IACXC,IAAU,IACRC,UAAgBF,KAAYC,IAAUP,EAAM,MAAM,IAAIA,EAAM,OAAO;EAoBzE,AAlBAS,EAAiBL,GAAQ,oBAAoB;GAE3C,AADA,IAAW,IACXI,EAAO;EACT,CAAC,GACDC,EAAiBL,GAAQ,oBAAoB;GAE3C,AADA,IAAW,IACXI,EAAO;EACT,CAAC,GACDC,EAAiBL,GAAQ,iBAAiB;GAExC,AADA,IAAU,IACVI,EAAO;EACT,CAAC,GACDC,EAAiBL,GAAQ,aAAa,MAAkB;GACtD,AAAIA,EAAO,OAAO,SAAS,EAAE,aAA4B,MACzD,IAAU,IACVI,EAAO;EACT,CAAC,GAEDE,QACQV,EAAM,MAAM,SACjB,MAAM;GACL,AAAIW,MACJ,IAAW,IACX,IAAU,IACVX,EAAM,OAAO;EACf,CACF;EAEA,IAAMY,KAA6E,MACjF,OAAOC,EAAE,WAAY,aAAaA,EAAE,QAAQ,IAAIA,EAAE;E,OACpD,EAAO,QAAQ,CAAC,SAAS,I,2BAIvBnC,EAAQwC,EAAA,QAAA,SAAA,IACR3C,EAAA,GAAAI,EAaWC,GAAA,EAbA,IAAIC,EAAAc,CAAA,EAAM,GAAA,CACnBb,EAWM,OAAA;GAXG,SAAA;GAAJ,KAAIsB;GAAS,OAAM;GAAwB,MAAK;GAAU,cAAYvB,EAAAY,CAAA,CAAC,CAAA,aAAA;E,KAC1ElB,EAAA,EAAA,GAAAC,EASSC,GAAA,MAAAM,EARQF,EAAAmB,CAAA,CAAK,CAAC,QAAd,OADTzB,EAAA,GAAAI,EASSK,GAAA;GAPN,KAAKwC,EAAK;GACV,MAAMA,EAAK;GACX,OAAOA,EAAK;GACZ,UAAK,MAAE3C,EAAAmB,CAAA,CAAK,CAAC,QAAQwB,EAAK,EAAE;E,gBAEbA,EAAK,U;GAAU,MAAA;GAAQ,IAAAtC,QAAkB,CAAfC,EAAAC,EAAAoC,EAAK,OAAO,GAAA,CAAA,C;;E,YACtCA,EAAK,S;GAAS,MAAA;GAAO,IAAAtC,QAAiC,CAAjCG,EAAiCuB,GAAA,EAAxB,SAASY,EAAK,O"}

package/dist/components/Tooltip/ETooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"ETooltip.js","names":["_sfc_main","ETooltip_vue_vue_type_script_setup_true_lang_default","ETooltip_default"],"sources":["../../../src/components/Tooltip/ETooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger } from \"reka-ui\";\nimport { usePortalTarget } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\ndefineOptions({ inheritAttrs: false });\n\ndefineProps<{\n  /** What the tooltip says: a name for the control, never anything you must read or click. */\n  label: string;\n}>();\n\ndefineSlots<{\n  /** One focusable element: an icon button, a link. It becomes the trigger and is described by the bubble. */\n  default(): unknown;\n}>();\n\nconst portal = usePortalTarget();\nconst open = defineModel<boolean>(\"open\", { default: false });\n\nlet hold: ReturnType<typeof setTimeout> | undefined;\nfunction touchStart(e: PointerEvent) {\n  if (e.pointerType !== \"touch\") return;\n  clearTimeout(hold);\n  requestAnimationFrame(() => (open.value = true));\n}\nfunction touchEnd(e: PointerEvent) {\n  if (e.pointerType !== \"touch\") return;\n  clearTimeout(hold);\n  hold = setTimeout(() => (open.value = false), 1500);\n}\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"400\" :skip-delay-duration=\"300\">\n    <TooltipRoot v-model:open=\"open\">\n      <TooltipTrigger as-child @pointerdown=\"touchStart\" @pointerup=\"touchEnd\" @pointercancel=\"touchEnd\">\n        <slot />\n      </TooltipTrigger>\n      <TooltipPortal :to=\"portal\">\n        <TooltipContent class=\"e-tip-bubble e-root\" side=\"top\" align=\"center\" :side-offset=\"8\" v-bind=\"$attrs\">\n          {{ label }}\n        </TooltipContent>\n      </TooltipPortal>\n    </TooltipRoot>\n  </TooltipProvider>\n</template>\n\n<style>\n@layer e.containers {\n  .e-tip-bubble {\n    z-index: var(--e-z-tooltip);\n    width: max-content;\n    max-width: 16rem;\n    padding: 6px 10px;\n    border-radius: var(--e-radius-sm);\n    background: var(--e-ink);\n    color: var(--e-surface);\n    font: 400 var(--e-text-sm) / 1.35 var(--e-font-sans);\n    text-align: center;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ETooltip.js","names":["_sfc_main","ETooltip_vue_vue_type_script_setup_true_lang_default","ETooltip_default"],"sources":["../../../src/components/Tooltip/ETooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger } from \"reka-ui\";\nimport { usePortalTarget } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\ndefineOptions({ inheritAttrs: false });\n\ndefineProps<{\n  /** What the tooltip says: a name for the control, never anything you must read or click. */\n  label: string;\n}>();\n\ndefineSlots<{\n  /** One focusable element: an icon button, a link. It becomes the trigger and is described by the bubble. */\n  default(): unknown;\n}>();\n\nconst portal = usePortalTarget();\n/** Whether the bubble shows. Hover, focus and Escape update it. */\nconst open = defineModel<boolean>(\"open\", { default: false });\n\nlet hold: ReturnType<typeof setTimeout> | undefined;\nfunction touchStart(e: PointerEvent) {\n  if (e.pointerType !== \"touch\") return;\n  clearTimeout(hold);\n  requestAnimationFrame(() => (open.value = true));\n}\nfunction touchEnd(e: PointerEvent) {\n  if (e.pointerType !== \"touch\") return;\n  clearTimeout(hold);\n  hold = setTimeout(() => (open.value = false), 1500);\n}\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"400\" :skip-delay-duration=\"300\">\n    <TooltipRoot v-model:open=\"open\">\n      <TooltipTrigger as-child @pointerdown=\"touchStart\" @pointerup=\"touchEnd\" @pointercancel=\"touchEnd\">\n        <slot />\n      </TooltipTrigger>\n      <TooltipPortal :to=\"portal\">\n        <TooltipContent class=\"e-tip-bubble e-root\" side=\"top\" align=\"center\" :side-offset=\"8\" v-bind=\"$attrs\">\n          {{ label }}\n        </TooltipContent>\n      </TooltipPortal>\n    </TooltipRoot>\n  </TooltipProvider>\n</template>\n\n<style>\n@layer e.containers {\n  .e-tip-bubble {\n    z-index: var(--e-z-tooltip);\n    width: max-content;\n    max-width: 16rem;\n    padding: var(--e-space-2) var(--e-space-3);\n    border-radius: var(--e-radius-sm);\n    background: var(--e-ink);\n    color: var(--e-surface);\n    font: 400 var(--e-text-sm) / 1.35 var(--e-font-sans);\n    text-align: center;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Tooltip/ETooltip.vue.d.ts

@@ -7,6 +7,7 @@ type __VLS_Slots = {
     default(): unknown;
 };
 type __VLS_ModelProps = {
+    /** Whether the bubble shows. Hover, focus and Escape update it. */
     "open"?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;

package/dist/components/Tooltip/ETooltip.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ETooltip.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_renderSlot","_mergeProps","_createTextVNode","_toDisplayString","ETooltip_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","portal","usePortalTarget","open","useModel","__props","hold","touchStart","touchEnd","openBlock","createBlock","unref","TooltipProvider","withCtx","createVNode","TooltipRoot","_cache","$event","TooltipTrigger","renderSlot","_ctx","TooltipPortal","TooltipContent","mergeProps","createTextVNode","toDisplayString"],"sources":["../../../src/components/Tooltip/ETooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger } from \"reka-ui\";\nimport { usePortalTarget } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\ndefineOptions({ inheritAttrs: false });\n\ndefineProps<{\n  /** What the tooltip says: a name for the control, never anything you must read or click. */\n  label: string;\n}>();\n\ndefineSlots<{\n  /** One focusable element: an icon button, a link. It becomes the trigger and is described by the bubble. */\n  default(): unknown;\n}>();\n\nconst portal = usePortalTarget();\nconst open = defineModel<boolean>(\"open\", { default: false });\n\nlet hold: ReturnType<typeof setTimeout> | undefined;\nfunction touchStart(e: PointerEvent) {\n  if (e.pointerType !== \"touch\") return;\n  clearTimeout(hold);\n  requestAnimationFrame(() => (open.value = true));\n}\nfunction touchEnd(e: PointerEvent) {\n  if (e.pointerType !== \"touch\") return;\n  clearTimeout(hold);\n  hold = setTimeout(() => (open.value = false), 1500);\n}\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"400\" :skip-delay-duration=\"300\">\n    <TooltipRoot v-model:open=\"open\">\n      <TooltipTrigger as-child @pointerdown=\"touchStart\" @pointerup=\"touchEnd\" @pointercancel=\"touchEnd\">\n        <slot />\n      </TooltipTrigger>\n      <TooltipPortal :to=\"portal\">\n        <TooltipContent class=\"e-tip-bubble e-root\" side=\"top\" align=\"center\" :side-offset=\"8\" v-bind=\"$attrs\">\n          {{ label }}\n        </TooltipContent>\n      </TooltipPortal>\n    </TooltipRoot>\n  </TooltipProvider>\n</template>\n\n<style>\n@layer e.containers {\n  .e-tip-bubble {\n    z-index: var(--e-z-tooltip);\n    width: max-content;\n    max-width: 16rem;\n    padding: 6px 10px;\n    border-radius: var(--e-radius-sm);\n    background: var(--e-ink);\n    color: var(--e-surface);\n    font: 400 var(--e-text-sm) / 1.35 var(--e-font-sans);\n    text-align: center;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;EAiBA,IAAMc,IAASC,EAAgB,GACzBC,IAAOf,EAAoBiB,GAAC,MAA0B,GAExDC;EACJ,SAASC,EAAW,GAAiB;GACnC,AAAI,EAAE,gBAAgB,YACtB,aAAaD,CAAI,GACjB,4BAA6B,EAAK,QAAQ,EAAK;EACjD;EACA,SAASE,EAAS,GAAiB;GACjC,AAAI,EAAE,gBAAgB,YACtB,aAAaF,CAAI,GACjB,IAAO,iBAAkB,EAAK,QAAQ,IAAQ,IAAI;EACpD;E,kBAIEjB,EAAA,GAAAC,EAWkBC,EAAAqB,CAAA,GAAA;GAXA,kBAAgB;GAAM,uBAAqB;;GAC3D,SAAApB,QASc,CATdC,EAScF,EAAAwB,CAAA,GAAA;IATO,MAAMZ,EAAA;IAAA,iBAAA,AAAAa,EAAA,QAAA,MAAA,EAAI,QAAAC;;IAC7B,SAAAzB,QAEiB,CAFjBC,EAEiBF,EAAA2B,CAAA,GAAA;KAFD,YAAA;KAAU,eAAaX;KAAa,aAAWC;KAAW,iBAAeA;;KACvF,SAAAhB,QAAQ,CAARE,EAAQ0B,EAAA,QAAA,SAAA,C;;I,IAEV3B,EAIgBF,EAAA8B,CAAA,GAAA,EAJA,IAAI9B,EAAAU,CAAA,EAAM,GAAA;KACxB,SAAAT,QAEiB,CAFjBC,EAEiBF,EAAA+B,CAAA,GAFjB3B,EAEiB;MAFD,OAAM;MAAsB,MAAK;MAAM,OAAM;MAAU,eAAa;KAAWR,GAAAA,EAAAA,MAAM,GAAA;MACnG,SAAAK,QAAW,CAARI,EAAAC,EAAAQ,EAAA,KAAK,GAAA,CAAA,C"}
+{"version":3,"file":"ETooltip.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_renderSlot","_mergeProps","_createTextVNode","_toDisplayString","ETooltip_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","portal","usePortalTarget","open","useModel","__props","hold","touchStart","touchEnd","openBlock","createBlock","unref","TooltipProvider","withCtx","createVNode","TooltipRoot","_cache","$event","TooltipTrigger","renderSlot","_ctx","TooltipPortal","TooltipContent","mergeProps","createTextVNode","toDisplayString"],"sources":["../../../src/components/Tooltip/ETooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger } from \"reka-ui\";\nimport { usePortalTarget } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\ndefineOptions({ inheritAttrs: false });\n\ndefineProps<{\n  /** What the tooltip says: a name for the control, never anything you must read or click. */\n  label: string;\n}>();\n\ndefineSlots<{\n  /** One focusable element: an icon button, a link. It becomes the trigger and is described by the bubble. */\n  default(): unknown;\n}>();\n\nconst portal = usePortalTarget();\n/** Whether the bubble shows. Hover, focus and Escape update it. */\nconst open = defineModel<boolean>(\"open\", { default: false });\n\nlet hold: ReturnType<typeof setTimeout> | undefined;\nfunction touchStart(e: PointerEvent) {\n  if (e.pointerType !== \"touch\") return;\n  clearTimeout(hold);\n  requestAnimationFrame(() => (open.value = true));\n}\nfunction touchEnd(e: PointerEvent) {\n  if (e.pointerType !== \"touch\") return;\n  clearTimeout(hold);\n  hold = setTimeout(() => (open.value = false), 1500);\n}\n</script>\n\n<template>\n  <TooltipProvider :delay-duration=\"400\" :skip-delay-duration=\"300\">\n    <TooltipRoot v-model:open=\"open\">\n      <TooltipTrigger as-child @pointerdown=\"touchStart\" @pointerup=\"touchEnd\" @pointercancel=\"touchEnd\">\n        <slot />\n      </TooltipTrigger>\n      <TooltipPortal :to=\"portal\">\n        <TooltipContent class=\"e-tip-bubble e-root\" side=\"top\" align=\"center\" :side-offset=\"8\" v-bind=\"$attrs\">\n          {{ label }}\n        </TooltipContent>\n      </TooltipPortal>\n    </TooltipRoot>\n  </TooltipProvider>\n</template>\n\n<style>\n@layer e.containers {\n  .e-tip-bubble {\n    z-index: var(--e-z-tooltip);\n    width: max-content;\n    max-width: 16rem;\n    padding: var(--e-space-2) var(--e-space-3);\n    border-radius: var(--e-radius-sm);\n    background: var(--e-ink);\n    color: var(--e-surface);\n    font: 400 var(--e-text-sm) / 1.35 var(--e-font-sans);\n    text-align: center;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;EAiBA,IAAMc,IAASC,EAAgB,GAEzBC,IAAOf,EAAoBiB,GAAC,MAA0B,GAExDC;EACJ,SAASC,EAAW,GAAiB;GACnC,AAAI,EAAE,gBAAgB,YACtB,aAAaD,CAAI,GACjB,4BAA6B,EAAK,QAAQ,EAAK;EACjD;EACA,SAASE,EAAS,GAAiB;GACjC,AAAI,EAAE,gBAAgB,YACtB,aAAaF,CAAI,GACjB,IAAO,iBAAkB,EAAK,QAAQ,IAAQ,IAAI;EACpD;E,kBAIEjB,EAAA,GAAAC,EAWkBC,EAAAqB,CAAA,GAAA;GAXA,kBAAgB;GAAM,uBAAqB;;GAC3D,SAAApB,QASc,CATdC,EAScF,EAAAwB,CAAA,GAAA;IATO,MAAMZ,EAAA;IAAA,iBAAA,AAAAa,EAAA,QAAA,MAAA,EAAI,QAAAC;;IAC7B,SAAAzB,QAEiB,CAFjBC,EAEiBF,EAAA2B,CAAA,GAAA;KAFD,YAAA;KAAU,eAAaX;KAAa,aAAWC;KAAW,iBAAeA;;KACvF,SAAAhB,QAAQ,CAARE,EAAQ0B,EAAA,QAAA,SAAA,C;;I,IAEV3B,EAIgBF,EAAA8B,CAAA,GAAA,EAJA,IAAI9B,EAAAU,CAAA,EAAM,GAAA;KACxB,SAAAT,QAEiB,CAFjBC,EAEiBF,EAAA+B,CAAA,GAFjB3B,EAEiB;MAFD,OAAM;MAAsB,MAAK;MAAM,OAAM;MAAU,eAAa;KAAWR,GAAAA,EAAAA,MAAM,GAAA;MACnG,SAAAK,QAAW,CAARI,EAAAC,EAAAQ,EAAA,KAAK,GAAA,CAAA,C"}

package/dist/components/Upload/EUpload.js.map

@@ -1 +1 @@
-{"version":3,"file":"EUpload.js","names":["_sfc_main","EUpload_vue_vue_type_script_setup_true_lang_default","EUpload_default"],"sources":["../../../src/components/Upload/EUpload.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EField from \"../Field/EField.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the dropzone. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** Accepted extensions, such as `.pdf,.jpg`. Shown under the prompt. */\n  accept?: string;\n  multiple?: boolean;\n  /** The name submitted with a form. */\n  name?: string;\n  /** Say what is accepted and how large before the person tries. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the input invalid and is announced. */\n  error?: string;\n  /** A word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  /** Ignores drops and clicks and dims the edge. */\n  disabled?: boolean;\n  /** The id of the file input; the label points at it. Generated when left out. */\n  id?: string;\n}>();\n\nconst emit = defineEmits<{\n  /** The chosen or dropped files, the same list as the model. */\n  files: [files: File[]];\n}>();\n\nconst model = defineModel<File[]>({ default: () => [] });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst over = ref(false);\nconst input = ref<HTMLInputElement | null>(null);\nconst acceptHint = computed(() => props.accept?.replace(/\\./g, \"\").replace(/,/g, \", \").toUpperCase());\n\nfunction take(list: FileList | null | undefined) {\n  const files = Array.from(list ?? []);\n  model.value = files;\n  emit(\"files\", files);\n}\nfunction onDragOver(e: DragEvent) {\n  e.preventDefault();\n  if (!props.disabled) over.value = true;\n}\nfunction onDrop(e: DragEvent) {\n  e.preventDefault();\n  over.value = false;\n  if (!props.disabled) take(e.dataTransfer?.files);\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      <div>\n        <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n        <label\n          :for=\"field.id\"\n          class=\"e-drop\"\n          :class=\"{ 'e-drop--over': over, 'e-drop--disabled': disabled }\"\n          @dragover=\"onDragOver\"\n          @dragleave=\"over = false\"\n          @drop=\"onDrop\"\n        >\n          <EIcon name=\"upload\" />\n          <span class=\"e-drop-main\">\n            {{ t(\"dragHere\") }}\n            <span class=\"e-drop-pick\">{{ t(\"chooseOne\") }}</span>\n          </span>\n          <span v-if=\"acceptHint\" class=\"e-drop-hint\">{{ acceptHint }}</span>\n        </label>\n        <input\n          :id=\"field.id\"\n          ref=\"input\"\n          type=\"file\"\n          class=\"e-drop-input\"\n          :name=\"name\"\n          :accept=\"accept\"\n          :multiple=\"multiple\"\n          :disabled=\"disabled\"\n          :required=\"required\"\n          :aria-invalid=\"field.ariaInvalid\"\n          v-bind=\"attrs.input(field.ariaDescribedby)\"\n          @change=\"take(($event.target as HTMLInputElement).files)\"\n        />\n        <ul v-if=\"model.length\" class=\"e-files\">\n          <li v-for=\"f in model\" :key=\"f.name\">\n            <EIcon name=\"file\" />\n            <span class=\"e-file-name\">{{ f.name }}</span>\n            <span class=\"e-file-size\">{{ Math.max(1, Math.round(f.size / 1024)) }} KB</span>\n          </li>\n        </ul>\n      </div>\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-drop {\n    display: grid;\n    justify-items: center;\n    gap: var(--e-space-1);\n    padding: var(--e-space-6) var(--e-space-4);\n    border: var(--e-stroke-edge) dashed var(--e-border-strong);\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    text-align: center;\n    cursor: pointer;\n    transition:\n      background-color var(--e-duration-tap) var(--e-easing-out),\n      border-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-drop:hover,\n  .e-drop--over {\n    background: var(--e-surface-tint);\n    border-color: var(--e-ink);\n  }\n\n  .e-drop-main {\n    font: 400 var(--e-text-md)/1.4 var(--e-font-sans);\n  }\n\n  .e-drop-pick {\n    color: var(--e-primary);\n    font-weight: 500;\n    text-decoration: underline;\n    text-underline-offset: 3px;\n  }\n\n  .e-drop-hint {\n    font: 500 var(--e-text-xs)/1.2 var(--e-font-mono);\n    letter-spacing: 0.06em;\n    color: var(--e-muted);\n  }\n\n  .e-drop-input {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n  }\n\n  .e-drop-input:focus-visible + .e-files,\n  .e-field:focus-within .e-drop {\n    outline: var(--e-stroke-focus) solid var(--e-focus-field);\n    outline-offset: var(--e-focus-gap-field);\n  }\n\n  .e-files {\n    display: grid;\n    gap: 0;\n    margin: var(--e-space-2) 0 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .e-files li {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    padding: var(--e-space-2) 0;\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n    font: 400 var(--e-text-md)/1.3 var(--e-font-sans);\n  }\n\n  .e-file-name {\n    flex: 1;\n    min-width: 0;\n    overflow-wrap: anywhere;\n  }\n\n  .e-file-size {\n    font: 500 var(--e-text-xs)/1 var(--e-font-mono);\n    color: var(--e-muted);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-drop {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EUpload.js","names":["_sfc_main","EUpload_vue_vue_type_script_setup_true_lang_default","EUpload_default"],"sources":["../../../src/components/Upload/EUpload.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EField from \"../Field/EField.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the dropzone. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** Accepted extensions, such as `.pdf,.jpg`. Passed to the input and shown under the prompt as \"PDF, JPG\". */\n  accept?: string;\n  /** Allows choosing more than one file. */\n  multiple?: boolean;\n  /** The name submitted with a form. */\n  name?: string;\n  /** Say what is accepted and how large before the person tries. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the input invalid and is announced. */\n  error?: string;\n  /** The `required` attribute and a word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  /** Ignores drops and clicks and dims the edge. */\n  disabled?: boolean;\n  /** The id of the file input; the label points at it. @default generated */\n  id?: string;\n}>();\n\nconst emit = defineEmits<{\n  /** The chosen or dropped files, the same list as the model. */\n  files: [files: File[]];\n}>();\n\n/** The chosen files. */\nconst model = defineModel<File[]>({ default: () => [] });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst over = ref(false);\nconst input = ref<HTMLInputElement | null>(null);\nconst acceptHint = computed(() => props.accept?.replace(/\\./g, \"\").replace(/,/g, \", \").toUpperCase());\n\nfunction take(list: FileList | null | undefined) {\n  const files = Array.from(list ?? []);\n  model.value = files;\n  emit(\"files\", files);\n}\nfunction onDragOver(e: DragEvent) {\n  e.preventDefault();\n  if (!props.disabled) over.value = true;\n}\nfunction onDrop(e: DragEvent) {\n  e.preventDefault();\n  over.value = false;\n  if (!props.disabled) take(e.dataTransfer?.files);\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      <div>\n        <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n        <label\n          :for=\"field.id\"\n          class=\"e-drop\"\n          :class=\"{ 'e-drop--over': over, 'e-drop--disabled': disabled }\"\n          @dragover=\"onDragOver\"\n          @dragleave=\"over = false\"\n          @drop=\"onDrop\"\n        >\n          <EIcon name=\"upload\" />\n          <span class=\"e-drop-main\">\n            {{ t(\"dragHere\") }}\n            <span class=\"e-drop-pick\">{{ t(\"chooseOne\") }}</span>\n          </span>\n          <span v-if=\"acceptHint\" class=\"e-drop-hint\">{{ acceptHint }}</span>\n        </label>\n        <input\n          :id=\"field.id\"\n          ref=\"input\"\n          type=\"file\"\n          class=\"e-drop-input\"\n          :name=\"name\"\n          :accept=\"accept\"\n          :multiple=\"multiple\"\n          :disabled=\"disabled\"\n          :required=\"required\"\n          :aria-invalid=\"field.ariaInvalid\"\n          v-bind=\"attrs.input(field.ariaDescribedby)\"\n          @change=\"take(($event.target as HTMLInputElement).files)\"\n        />\n        <ul v-if=\"model.length\" class=\"e-files\">\n          <li v-for=\"f in model\" :key=\"f.name\">\n            <EIcon name=\"file\" />\n            <span class=\"e-file-name\">{{ f.name }}</span>\n            <span class=\"e-file-size\">{{ Math.max(1, Math.round(f.size / 1024)) }} KB</span>\n          </li>\n        </ul>\n      </div>\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-drop {\n    display: grid;\n    justify-items: center;\n    gap: var(--e-space-1);\n    padding: var(--e-space-6) var(--e-space-4);\n    border: var(--e-stroke-edge) dashed var(--e-border-strong);\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    text-align: center;\n    cursor: pointer;\n    transition:\n      background-color var(--e-duration-tap) var(--e-easing-out),\n      border-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-drop:hover {\n    background: var(--e-surface-hover);\n    border-color: var(--e-ink);\n  }\n\n  .e-drop--over {\n    background: var(--e-secondary-soft);\n    border-color: var(--e-secondary);\n  }\n\n  .e-drop-main {\n    font: 400 var(--e-text-md)/1.4 var(--e-font-sans);\n  }\n\n  .e-drop-pick {\n    color: var(--e-primary);\n    font-weight: 500;\n    text-decoration: underline;\n    text-underline-offset: 3px;\n  }\n\n  .e-drop-hint {\n    font: 500 var(--e-text-xs)/1.2 var(--e-font-mono);\n    letter-spacing: 0.06em;\n    color: var(--e-muted);\n  }\n\n  .e-drop-input {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n  }\n\n  .e-drop-input:focus-visible + .e-files,\n  .e-field:focus-within .e-drop {\n    outline: var(--e-stroke-focus) solid var(--e-focus-field);\n    outline-offset: var(--e-focus-gap-field);\n  }\n\n  .e-files {\n    display: grid;\n    gap: 0;\n    margin: var(--e-space-2) 0 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .e-files li {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    padding: var(--e-space-2) 0;\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n    font: 400 var(--e-text-md)/1.3 var(--e-font-sans);\n  }\n\n  .e-file-name {\n    flex: 1;\n    min-width: 0;\n    overflow-wrap: anywhere;\n  }\n\n  .e-file-size {\n    font: 500 var(--e-text-xs)/1 var(--e-font-mono);\n    color: var(--e-muted);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-drop {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-drop:hover,\n    .e-drop--over {\n      border-style: solid;\n      border-color: Highlight;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Upload/EUpload.vue.d.ts

@@ -3,8 +3,9 @@ type __VLS_Props = {
     label: string;
     /** Keep the label for screen readers and remove it from the page. */
     hideLabel?: boolean;
-    /** Accepted extensions, such as `.pdf,.jpg`. Shown under the prompt. */
+    /** Accepted extensions, such as `.pdf,.jpg`. Passed to the input and shown under the prompt as "PDF, JPG". */
     accept?: string;
+    /** Allows choosing more than one file. */
     multiple?: boolean;
     /** The name submitted with a form. */
     name?: string;
@@ -12,16 +13,17 @@ type __VLS_Props = {
     hint?: string;
     /** What to fix. Replaces the hint, marks the input invalid and is announced. */
     error?: string;
-    /** A word beside the label. */
+    /** The `required` attribute and a word beside the label. */
     required?: boolean;
     /** A word beside the label. Flag whichever is rarer. */
     optional?: boolean;
     /** Ignores drops and clicks and dims the edge. */
     disabled?: boolean;
-    /** The id of the file input; the label points at it. Generated when left out. */
+    /** The id of the file input; the label points at it. @default generated */
     id?: string;
 };
 type __VLS_ModelProps = {
+    /** The chosen files. */
     modelValue?: File[];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;

package/dist/components/Upload/EUpload.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EUpload.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","EField","_mergeProps","_unref","_withCtx","_createElementVNode","_normalizeClass","_createVNode","EIcon","_createTextVNode","_toDisplayString","_createElementBlock","_createCommentVNode","_Fragment","_renderList","EIcon_default","EField_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","EUpload_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","__emit","props","__props","emit","model","useModel","t","useMessages","attrs","useFieldAttrs","over","ref","input","acceptHint","computed","take","files","list","onDragOver","onDrop","openBlock","createBlock","mergeProps","unref","withCtx","createElementVNode","field","normalizeClass","_cache","createVNode","createTextVNode","toDisplayString","createElementBlock","createCommentVNode","$event","Fragment","renderList","f"],"sources":["../../../src/components/Upload/EUpload.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EField from \"../Field/EField.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the dropzone. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** Accepted extensions, such as `.pdf,.jpg`. Shown under the prompt. */\n  accept?: string;\n  multiple?: boolean;\n  /** The name submitted with a form. */\n  name?: string;\n  /** Say what is accepted and how large before the person tries. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the input invalid and is announced. */\n  error?: string;\n  /** A word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  /** Ignores drops and clicks and dims the edge. */\n  disabled?: boolean;\n  /** The id of the file input; the label points at it. Generated when left out. */\n  id?: string;\n}>();\n\nconst emit = defineEmits<{\n  /** The chosen or dropped files, the same list as the model. */\n  files: [files: File[]];\n}>();\n\nconst model = defineModel<File[]>({ default: () => [] });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst over = ref(false);\nconst input = ref<HTMLInputElement | null>(null);\nconst acceptHint = computed(() => props.accept?.replace(/\\./g, \"\").replace(/,/g, \", \").toUpperCase());\n\nfunction take(list: FileList | null | undefined) {\n  const files = Array.from(list ?? []);\n  model.value = files;\n  emit(\"files\", files);\n}\nfunction onDragOver(e: DragEvent) {\n  e.preventDefault();\n  if (!props.disabled) over.value = true;\n}\nfunction onDrop(e: DragEvent) {\n  e.preventDefault();\n  over.value = false;\n  if (!props.disabled) take(e.dataTransfer?.files);\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      <div>\n        <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n        <label\n          :for=\"field.id\"\n          class=\"e-drop\"\n          :class=\"{ 'e-drop--over': over, 'e-drop--disabled': disabled }\"\n          @dragover=\"onDragOver\"\n          @dragleave=\"over = false\"\n          @drop=\"onDrop\"\n        >\n          <EIcon name=\"upload\" />\n          <span class=\"e-drop-main\">\n            {{ t(\"dragHere\") }}\n            <span class=\"e-drop-pick\">{{ t(\"chooseOne\") }}</span>\n          </span>\n          <span v-if=\"acceptHint\" class=\"e-drop-hint\">{{ acceptHint }}</span>\n        </label>\n        <input\n          :id=\"field.id\"\n          ref=\"input\"\n          type=\"file\"\n          class=\"e-drop-input\"\n          :name=\"name\"\n          :accept=\"accept\"\n          :multiple=\"multiple\"\n          :disabled=\"disabled\"\n          :required=\"required\"\n          :aria-invalid=\"field.ariaInvalid\"\n          v-bind=\"attrs.input(field.ariaDescribedby)\"\n          @change=\"take(($event.target as HTMLInputElement).files)\"\n        />\n        <ul v-if=\"model.length\" class=\"e-files\">\n          <li v-for=\"f in model\" :key=\"f.name\">\n            <EIcon name=\"file\" />\n            <span class=\"e-file-name\">{{ f.name }}</span>\n            <span class=\"e-file-size\">{{ Math.max(1, Math.round(f.size / 1024)) }} KB</span>\n          </li>\n        </ul>\n      </div>\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-drop {\n    display: grid;\n    justify-items: center;\n    gap: var(--e-space-1);\n    padding: var(--e-space-6) var(--e-space-4);\n    border: var(--e-stroke-edge) dashed var(--e-border-strong);\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    text-align: center;\n    cursor: pointer;\n    transition:\n      background-color var(--e-duration-tap) var(--e-easing-out),\n      border-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-drop:hover,\n  .e-drop--over {\n    background: var(--e-surface-tint);\n    border-color: var(--e-ink);\n  }\n\n  .e-drop-main {\n    font: 400 var(--e-text-md)/1.4 var(--e-font-sans);\n  }\n\n  .e-drop-pick {\n    color: var(--e-primary);\n    font-weight: 500;\n    text-decoration: underline;\n    text-underline-offset: 3px;\n  }\n\n  .e-drop-hint {\n    font: 500 var(--e-text-xs)/1.2 var(--e-font-mono);\n    letter-spacing: 0.06em;\n    color: var(--e-muted);\n  }\n\n  .e-drop-input {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n  }\n\n  .e-drop-input:focus-visible + .e-files,\n  .e-field:focus-within .e-drop {\n    outline: var(--e-stroke-focus) solid var(--e-focus-field);\n    outline-offset: var(--e-focus-gap-field);\n  }\n\n  .e-files {\n    display: grid;\n    gap: 0;\n    margin: var(--e-space-2) 0 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .e-files li {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    padding: var(--e-space-2) 0;\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n    font: 400 var(--e-text-md)/1.3 var(--e-font-sans);\n  }\n\n  .e-file-name {\n    flex: 1;\n    min-width: 0;\n    overflow-wrap: anywhere;\n  }\n\n  .e-file-size {\n    font: 500 var(--e-text-xs)/1 var(--e-font-mono);\n    color: var(--e-muted);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-drop {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAUA,IAAMgC,IAAQC,GAwBRC,IAAOH,GAKPI,IAAQnC,EAAmBiC,GAAA,YAAsB,GAEjDI,IAAIC,EAAY,GAChBC,IAAQC,EAAc,GACtBC,IAAOC,EAAI,EAAK,GAChBC,IAAQD,EAA6B,IAAI,GACzCE,IAAaC,QAAeb,EAAM,QAAQ,QAAQ,OAAO,EAAE,CAAC,CAAC,QAAQ,MAAM,IAAI,CAAC,CAAC,YAAY,CAAC;EAEpG,SAASc,EAAK,GAAmC;GAC/C,IAAMC,IAAQ,MAAM,KAAKC,KAAQ,CAAC,CAAC;GAEnC,AADA,EAAM,QAAQD,GACdb,EAAK,SAASa,CAAK;EACrB;EACA,SAASE,EAAW,GAAc;GAEhC,AADA,EAAE,eAAe,GACZjB,EAAM,aAAU,EAAK,QAAQ;EACpC;EACA,SAASkB,EAAO,GAAc;GAG5B,AAFA,EAAE,eAAe,GACjB,EAAK,QAAQ,IACRlB,EAAM,YAAUc,EAAK,EAAE,cAAc,KAAK;EACjD;E,OAEAhB,EAAa;GACX;GACA,aAAaa,EAAM,OAAO,MAAM;EAClC,CAAC,I,UAIC1C,EAAA,GAAAC,EAmDSC,GAnDTC,EACUC,EAkDDkC,CAAA,CAlDM,CAAC,QAAO,GAAA;GACpB,IAAIN,EAAA;GACJ,OAAOA,EAAA;GACP,cAAYA,EAAA;GACZ,MAAMA,EAAA;GACN,OAAOA,EAAA;GACP,UAAUA,EAAA;GACV,UAAUA,EAAA;;GAEA,SAAO3B,GAAE,MAAK,CACvBC,EAsCM,OAAA,MAAA;IApCJA,EAcQ,SAAA;KAbL,KAAKkD,EAAM;KACZ,OAAKjD,EAAA,CAAC,UAAQ;MAAA,gBACYiC,EAAA;MAAI,oBAAsBR,EAAA;KAAQ,CAAA,CAAA;KAC3D,YAAUgB;KACV,aAAS,AAAAU,EAAA,QAAA,MAAE,EAAA,QAAI;KACT;;KAEPlD,EAAuBC,GAAA,EAAhB,MAAK,SAAQ,CAAA;KACpBH,EAGO,QAHPa,GAGO,CAFFT,EAAAC,EAAAP,EAAAgC,CAAA,CAAC,CAAA,UAAA,CAAA,IAAe,KACnB,CAAA,GAAA9B,EAAqD,QAArDc,GAAqDT,EAAxBP,EAAAgC,CAAA,CAAC,CAAA,WAAA,CAAA,GAAA,CAAA,C;KAEpBO,EAAA,SAAZ3C,EAAA,GAAAY,EAAmE,QAAnES,GAAmEV,EAApBgC,EAAA,KAAU,GAAA,CAAA,K;;IAE3DrC,EAaE,SAbFH,EAaE;KAZC,IAAIqD,EAAM;KACP,SAAA;KAAJ,KAAId;KACJ,MAAK;KACL,OAAM;KACL,MAAMV,EAAA;KACN,QAAQA,EAAA;KACR,UAAUA,EAAA;KACV,UAAUA,EAAA;KACV,UAAUA,EAAA;KACV,gBAAcwB,EAAM;IACb,GAAApD,EAAAkC,CAAA,CAAK,CAAC,MAAMkB,EAAM,eAAe,GAAA,EACxC,UAAM,AAAAE,EAAA,QAAA,MAAEb,EAAMmB,EAAO,OAA4B,KAAK,E;IAE/C9B,EAAA,MAAM,UAAhBlC,EAAA,GAAAY,EAMK,MANLW,GAMK,EALHvB,EAAA,EAAA,GAAAY,EAIKE,GAAA,MAAAC,EAJWmB,EAAA,QAAL,OAAXlC,EAAA,GAAAY,EAIK,MAAA,EAJmB,KAAKuD,EAAE,K;KAC7B3D,EAAqBC,GAAA,EAAd,MAAK,OAAM,CAAA;KAClBH,EAA6C,QAA7CkB,GAA6Cb,EAAhBwD,EAAE,IAAI,GAAA,CAAA;KACnC7D,EAAgF,QAAhFmB,GAAgFd,EAAnD,KAAK,IAAG,GAAI,KAAK,MAAMwD,EAAE,OAAI,IAAA,CAAA,CAAA,IAAY,OAAG,CAAA"}
+{"version":3,"file":"EUpload.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","EField","_mergeProps","_unref","_withCtx","_createElementVNode","_normalizeClass","_createVNode","EIcon","_createTextVNode","_toDisplayString","_createElementBlock","_createCommentVNode","_Fragment","_renderList","EIcon_default","EField_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","EUpload_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","__emit","props","__props","emit","model","useModel","t","useMessages","attrs","useFieldAttrs","over","ref","input","acceptHint","computed","take","files","list","onDragOver","onDrop","openBlock","createBlock","mergeProps","unref","withCtx","createElementVNode","field","normalizeClass","_cache","createVNode","createTextVNode","toDisplayString","createElementBlock","createCommentVNode","$event","Fragment","renderList","f"],"sources":["../../../src/components/Upload/EUpload.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EField from \"../Field/EField.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the dropzone. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** Accepted extensions, such as `.pdf,.jpg`. Passed to the input and shown under the prompt as \"PDF, JPG\". */\n  accept?: string;\n  /** Allows choosing more than one file. */\n  multiple?: boolean;\n  /** The name submitted with a form. */\n  name?: string;\n  /** Say what is accepted and how large before the person tries. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the input invalid and is announced. */\n  error?: string;\n  /** The `required` attribute and a word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  /** Ignores drops and clicks and dims the edge. */\n  disabled?: boolean;\n  /** The id of the file input; the label points at it. @default generated */\n  id?: string;\n}>();\n\nconst emit = defineEmits<{\n  /** The chosen or dropped files, the same list as the model. */\n  files: [files: File[]];\n}>();\n\n/** The chosen files. */\nconst model = defineModel<File[]>({ default: () => [] });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst over = ref(false);\nconst input = ref<HTMLInputElement | null>(null);\nconst acceptHint = computed(() => props.accept?.replace(/\\./g, \"\").replace(/,/g, \", \").toUpperCase());\n\nfunction take(list: FileList | null | undefined) {\n  const files = Array.from(list ?? []);\n  model.value = files;\n  emit(\"files\", files);\n}\nfunction onDragOver(e: DragEvent) {\n  e.preventDefault();\n  if (!props.disabled) over.value = true;\n}\nfunction onDrop(e: DragEvent) {\n  e.preventDefault();\n  over.value = false;\n  if (!props.disabled) take(e.dataTransfer?.files);\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      <div>\n        <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n        <label\n          :for=\"field.id\"\n          class=\"e-drop\"\n          :class=\"{ 'e-drop--over': over, 'e-drop--disabled': disabled }\"\n          @dragover=\"onDragOver\"\n          @dragleave=\"over = false\"\n          @drop=\"onDrop\"\n        >\n          <EIcon name=\"upload\" />\n          <span class=\"e-drop-main\">\n            {{ t(\"dragHere\") }}\n            <span class=\"e-drop-pick\">{{ t(\"chooseOne\") }}</span>\n          </span>\n          <span v-if=\"acceptHint\" class=\"e-drop-hint\">{{ acceptHint }}</span>\n        </label>\n        <input\n          :id=\"field.id\"\n          ref=\"input\"\n          type=\"file\"\n          class=\"e-drop-input\"\n          :name=\"name\"\n          :accept=\"accept\"\n          :multiple=\"multiple\"\n          :disabled=\"disabled\"\n          :required=\"required\"\n          :aria-invalid=\"field.ariaInvalid\"\n          v-bind=\"attrs.input(field.ariaDescribedby)\"\n          @change=\"take(($event.target as HTMLInputElement).files)\"\n        />\n        <ul v-if=\"model.length\" class=\"e-files\">\n          <li v-for=\"f in model\" :key=\"f.name\">\n            <EIcon name=\"file\" />\n            <span class=\"e-file-name\">{{ f.name }}</span>\n            <span class=\"e-file-size\">{{ Math.max(1, Math.round(f.size / 1024)) }} KB</span>\n          </li>\n        </ul>\n      </div>\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-drop {\n    display: grid;\n    justify-items: center;\n    gap: var(--e-space-1);\n    padding: var(--e-space-6) var(--e-space-4);\n    border: var(--e-stroke-edge) dashed var(--e-border-strong);\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    text-align: center;\n    cursor: pointer;\n    transition:\n      background-color var(--e-duration-tap) var(--e-easing-out),\n      border-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-drop:hover {\n    background: var(--e-surface-hover);\n    border-color: var(--e-ink);\n  }\n\n  .e-drop--over {\n    background: var(--e-secondary-soft);\n    border-color: var(--e-secondary);\n  }\n\n  .e-drop-main {\n    font: 400 var(--e-text-md)/1.4 var(--e-font-sans);\n  }\n\n  .e-drop-pick {\n    color: var(--e-primary);\n    font-weight: 500;\n    text-decoration: underline;\n    text-underline-offset: 3px;\n  }\n\n  .e-drop-hint {\n    font: 500 var(--e-text-xs)/1.2 var(--e-font-mono);\n    letter-spacing: 0.06em;\n    color: var(--e-muted);\n  }\n\n  .e-drop-input {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n  }\n\n  .e-drop-input:focus-visible + .e-files,\n  .e-field:focus-within .e-drop {\n    outline: var(--e-stroke-focus) solid var(--e-focus-field);\n    outline-offset: var(--e-focus-gap-field);\n  }\n\n  .e-files {\n    display: grid;\n    gap: 0;\n    margin: var(--e-space-2) 0 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .e-files li {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    padding: var(--e-space-2) 0;\n    border-top: var(--e-stroke-hair) solid var(--e-border);\n    font: 400 var(--e-text-md)/1.3 var(--e-font-sans);\n  }\n\n  .e-file-name {\n    flex: 1;\n    min-width: 0;\n    overflow-wrap: anywhere;\n  }\n\n  .e-file-size {\n    font: 500 var(--e-text-xs)/1 var(--e-font-mono);\n    color: var(--e-muted);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-drop {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-drop:hover,\n    .e-drop--over {\n      border-style: solid;\n      border-color: Highlight;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAUA,IAAMgC,IAAQC,GAyBRC,IAAOH,GAMPI,IAAQnC,EAAmBiC,GAAA,YAAsB,GAEjDI,IAAIC,EAAY,GAChBC,IAAQC,EAAc,GACtBC,IAAOC,EAAI,EAAK,GAChBC,IAAQD,EAA6B,IAAI,GACzCE,IAAaC,QAAeb,EAAM,QAAQ,QAAQ,OAAO,EAAE,CAAC,CAAC,QAAQ,MAAM,IAAI,CAAC,CAAC,YAAY,CAAC;EAEpG,SAASc,EAAK,GAAmC;GAC/C,IAAMC,IAAQ,MAAM,KAAKC,KAAQ,CAAC,CAAC;GAEnC,AADA,EAAM,QAAQD,GACdb,EAAK,SAASa,CAAK;EACrB;EACA,SAASE,EAAW,GAAc;GAEhC,AADA,EAAE,eAAe,GACZjB,EAAM,aAAU,EAAK,QAAQ;EACpC;EACA,SAASkB,EAAO,GAAc;GAG5B,AAFA,EAAE,eAAe,GACjB,EAAK,QAAQ,IACRlB,EAAM,YAAUc,EAAK,EAAE,cAAc,KAAK;EACjD;E,OAEAhB,EAAa;GACX;GACA,aAAaa,EAAM,OAAO,MAAM;EAClC,CAAC,I,UAIC1C,EAAA,GAAAC,EAmDSC,GAnDTC,EACUC,EAkDDkC,CAAA,CAlDM,CAAC,QAAO,GAAA;GACpB,IAAIN,EAAA;GACJ,OAAOA,EAAA;GACP,cAAYA,EAAA;GACZ,MAAMA,EAAA;GACN,OAAOA,EAAA;GACP,UAAUA,EAAA;GACV,UAAUA,EAAA;;GAEA,SAAO3B,GAAE,MAAK,CACvBC,EAsCM,OAAA,MAAA;IApCJA,EAcQ,SAAA;KAbL,KAAKkD,EAAM;KACZ,OAAKjD,EAAA,CAAC,UAAQ;MAAA,gBACYiC,EAAA;MAAI,oBAAsBR,EAAA;KAAQ,CAAA,CAAA;KAC3D,YAAUgB;KACV,aAAS,AAAAU,EAAA,QAAA,MAAE,EAAA,QAAI;KACT;;KAEPlD,EAAuBC,GAAA,EAAhB,MAAK,SAAQ,CAAA;KACpBH,EAGO,QAHPa,GAGO,CAFFT,EAAAC,EAAAP,EAAAgC,CAAA,CAAC,CAAA,UAAA,CAAA,IAAe,KACnB,CAAA,GAAA9B,EAAqD,QAArDc,GAAqDT,EAAxBP,EAAAgC,CAAA,CAAC,CAAA,WAAA,CAAA,GAAA,CAAA,C;KAEpBO,EAAA,SAAZ3C,EAAA,GAAAY,EAAmE,QAAnES,GAAmEV,EAApBgC,EAAA,KAAU,GAAA,CAAA,K;;IAE3DrC,EAaE,SAbFH,EAaE;KAZC,IAAIqD,EAAM;KACP,SAAA;KAAJ,KAAId;KACJ,MAAK;KACL,OAAM;KACL,MAAMV,EAAA;KACN,QAAQA,EAAA;KACR,UAAUA,EAAA;KACV,UAAUA,EAAA;KACV,UAAUA,EAAA;KACV,gBAAcwB,EAAM;IACb,GAAApD,EAAAkC,CAAA,CAAK,CAAC,MAAMkB,EAAM,eAAe,GAAA,EACxC,UAAM,AAAAE,EAAA,QAAA,MAAEb,EAAMmB,EAAO,OAA4B,KAAK,E;IAE/C9B,EAAA,MAAM,UAAhBlC,EAAA,GAAAY,EAMK,MANLW,GAMK,EALHvB,EAAA,EAAA,GAAAY,EAIKE,GAAA,MAAAC,EAJWmB,EAAA,QAAL,OAAXlC,EAAA,GAAAY,EAIK,MAAA,EAJmB,KAAKuD,EAAE,K;KAC7B3D,EAAqBC,GAAA,EAAd,MAAK,OAAM,CAAA;KAClBH,EAA6C,QAA7CkB,GAA6Cb,EAAhBwD,EAAE,IAAI,GAAA,CAAA;KACnC7D,EAAgF,QAAhFmB,GAAgFd,EAAnD,KAAK,IAAG,GAAI,KAAK,MAAMwD,EAAE,OAAI,IAAA,CAAA,CAAA,IAAY,OAAG,CAAA"}

package/dist/fonts.css

@@ -1 +1 @@
-@import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&family=Spline+Sans+Mono:wght@500;600&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;500;600&family=Geist+Mono:wght@500;600&display=swap");