@eos-ui/vue 0.1.0 → 0.2.0

package/dist/components/SignatureField/ESignatureField.js.map

@@ -1 +1 @@
-{"version":3,"file":"ESignatureField.js","names":["_sfc_main","ESignatureField_vue_vue_type_script_setup_true_lang_default","ESignatureField_default"],"sources":["../../../src/components/SignatureField/ESignatureField.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface SignatureValue {\n  /** How the person signed. */\n  method: \"type\" | \"draw\";\n  /** The typed name. Kept when switching to Draw. */\n  name: string;\n  /** The drawn signature as a PNG data URL. Empty unless the method is `draw`. */\n  image: string;\n  /** Whether the person ticked the agreement. */\n  agreed: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EFieldMessage from \"../Field/EFieldMessage.vue\";\nimport ESegmented from \"../Segmented/ESegmented.vue\";\nimport ETextField from \"../TextField/ETextField.vue\";\nimport ECheckbox from \"../Checkbox/ECheckbox.vue\";\nimport ESignaturePad from \"../SignaturePad/ESignaturePad.vue\";\nimport { useConfig, useMessages } from \"../../config.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** Names the group and heads it. Say what the form is. Default \"Signature\". */\n    label?: string;\n    /** `type` the default, `draw`, or `both` which adds a Type and Draw switch. A drawn signature cannot be made from a keyboard, so `both` is the usual choice. */\n    mode?: \"type\" | \"draw\" | \"both\";\n    /** The sentence the person agrees to. Default \"I agree and want to sign this form.\" */\n    agreement?: string;\n    /** The date shown with the signature. Today when left out. */\n    date?: Date;\n    /** Help that is announced with the group. */\n    hint?: string;\n    /** What to fix. Replaces the hint and is announced with the group. */\n    error?: string;\n    disabled?: boolean;\n    /** The name submitted with a form: the typed name, or the drawn image as a data URL. */\n    name?: string;\n    /** The id of the typed-name input. Generated when left out. */\n    id?: string;\n  }>(),\n  { mode: \"type\" },\n);\n\nconst model = defineModel<SignatureValue>({\n  default: () => ({ method: \"type\", name: \"\", image: \"\", agreed: false }),\n});\n\nconst t = useMessages();\nconst config = useConfig();\nconst id = useUid(() => props.id);\nconst hintId = computed(() => `${id.value}-sign-hint`);\n\nconst method = computed<\"type\" | \"draw\">(() => (props.mode === \"both\" ? model.value.method : props.mode));\nconst dateText = computed(() =>\n  new Intl.DateTimeFormat(config.locale, { year: \"numeric\", month: \"long\", day: \"numeric\" }).format(\n    props.date ?? new Date(),\n  ),\n);\n\nfunction update(patch: Partial<SignatureValue>) {\n  const next = { ...model.value, method: method.value, ...patch };\n  model.value = { ...next, image: next.method === \"draw\" ? next.image : \"\" };\n}\n</script>\n\n<template>\n  <fieldset\n    class=\"e-sign\"\n    :disabled=\"disabled\"\n    :aria-describedby=\"error || hint ? hintId : undefined\"\n    :aria-invalid=\"error ? 'true' : undefined\"\n  >\n    <legend class=\"e-kicker e-sign-legend\">{{ label || t(\"signature\") }}</legend>\n    <ESegmented\n      v-if=\"mode === 'both'\"\n      :label=\"t('signature')\"\n      :model-value=\"method\"\n      :options=\"[\n        { value: 'type', label: t('signType'), icon: 'edit' },\n        { value: 'draw', label: t('signDraw'), icon: 'signature' },\n      ]\"\n      @update:model-value=\"update({ method: $event as 'type' | 'draw', image: '' })\"\n    />\n    <template v-if=\"method === 'type'\">\n      <ETextField\n        :id=\"id\"\n        :model-value=\"model.name\"\n        :label=\"t('typeName')\"\n        :placeholder=\"t('fullName')\"\n        autocomplete=\"name\"\n        required\n        :hint=\"t('signHint')\"\n        @update:model-value=\"update({ name: $event })\"\n      />\n      <div class=\"e-sign-line\" aria-live=\"polite\">\n        <span v-if=\"model.name\" class=\"e-sign-name\">{{ model.name }}</span>\n        <span v-else class=\"e-sign-empty\">{{ t(\"signAppears\") }}</span>\n        <span class=\"e-sign-date\">{{ dateText }}</span>\n      </div>\n    </template>\n    <template v-else>\n      <ESignaturePad :model-value=\"model.image\" :disabled=\"disabled\" @update:model-value=\"update({ image: $event })\" />\n      <p class=\"e-sign-date e-sign-date--solo\">{{ dateText }}</p>\n    </template>\n    <ECheckbox\n      :model-value=\"model.agreed\"\n      :label=\"agreement || t('agreeSign')\"\n      :disabled=\"disabled\"\n      @update:model-value=\"update({ agreed: $event })\"\n    />\n    <EFieldMessage :id=\"hintId\" :error=\"error\" :hint=\"hint\" />\n    <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"method === 'draw' ? model.image : model.name\" />\n  </fieldset>\n</template>\n\n<style>\n@layer e.composites {\n  .e-sign {\n    display: grid;\n    gap: var(--e-space-3);\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n\n  .e-sign-legend {\n    padding: 0;\n    margin-bottom: var(--e-space-2);\n  }\n\n  .e-sign-line {\n    display: flex;\n    align-items: flex-end;\n    justify-content: space-between;\n    gap: var(--e-space-3);\n    min-height: 52px;\n    padding: var(--e-space-2) var(--e-space-4);\n    border-bottom: 2px solid var(--e-ink);\n    background: var(--e-surface-tint);\n    border-radius: var(--e-radius-md) var(--e-radius-md) 0 0;\n  }\n\n  .e-sign-name {\n    font:\n      italic 500 28px/1.1 \"Segoe Script\",\n      \"Snell Roundhand\",\n      \"Brush Script MT\",\n      cursive;\n    min-width: 0;\n    overflow-wrap: anywhere;\n  }\n\n  .e-sign-empty {\n    font: 400 var(--e-text-md)/1.4 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n\n  .e-sign-date {\n    flex: none;\n    font: 500 var(--e-text-xs)/1.2 var(--e-font-mono);\n    color: var(--e-muted);\n  }\n\n  .e-sign-date--solo {\n    margin: 0;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ESignatureField.js","names":["_sfc_main","ESignatureField_vue_vue_type_script_setup_true_lang_default","ESignatureField_default"],"sources":["../../../src/components/SignatureField/ESignatureField.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface SignatureValue {\n  /** How the person signed. */\n  method: \"type\" | \"draw\";\n  /** The typed name. Kept when switching to Draw. */\n  name: string;\n  /** The drawn signature as a PNG data URL. Empty unless the method is `draw`. */\n  image: string;\n  /** Whether the person ticked the agreement. */\n  agreed: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EFieldMessage from \"../Field/EFieldMessage.vue\";\nimport ESegmented from \"../Segmented/ESegmented.vue\";\nimport ETextField from \"../TextField/ETextField.vue\";\nimport ECheckbox from \"../Checkbox/ECheckbox.vue\";\nimport ESignaturePad from \"../SignaturePad/ESignaturePad.vue\";\nimport { useConfig, useMessages } from \"../../config.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** Names the group and heads it. Say what the form is. @default \"Signature\" */\n    label?: string;\n    /** `type` the default, `draw`, or `both` which adds a Type and Draw switch. A drawn signature cannot be made from a keyboard, so `both` is the usual choice. */\n    mode?: \"type\" | \"draw\" | \"both\";\n    /** The sentence the person agrees to. @default \"I agree and want to sign this form.\" */\n    agreement?: string;\n    /** The date shown with the signature, in the configured locale. @default today */\n    date?: Date;\n    /** Help that is announced with the group. */\n    hint?: string;\n    /** What to fix. Replaces the hint, marks the group invalid and is announced with the group. */\n    error?: string;\n    /** Disables the fields and the agreement. */\n    disabled?: boolean;\n    /** The name submitted with a form: the typed name, or the drawn image as a data URL. */\n    name?: string;\n    /** The id of the typed-name input. @default generated */\n    id?: string;\n  }>(),\n  { mode: \"type\" },\n);\n\n/** `image` is a PNG data URL, empty unless `method` is `draw`. */\nconst model = defineModel<SignatureValue>({\n  default: () => ({ method: \"type\", name: \"\", image: \"\", agreed: false }),\n});\n\nconst t = useMessages();\nconst config = useConfig();\nconst id = useUid(() => props.id);\nconst hintId = computed(() => `${id.value}-sign-hint`);\n\nconst method = computed<\"type\" | \"draw\">(() => (props.mode === \"both\" ? model.value.method : props.mode));\nconst dateText = computed(() =>\n  new Intl.DateTimeFormat(config.locale, { year: \"numeric\", month: \"long\", day: \"numeric\" }).format(\n    props.date ?? new Date(),\n  ),\n);\n\nfunction update(patch: Partial<SignatureValue>) {\n  const next = { ...model.value, method: method.value, ...patch };\n  model.value = { ...next, image: next.method === \"draw\" ? next.image : \"\" };\n}\n</script>\n\n<template>\n  <fieldset\n    class=\"e-sign\"\n    :disabled=\"disabled\"\n    :aria-describedby=\"error || hint ? hintId : undefined\"\n    :aria-invalid=\"error ? 'true' : undefined\"\n  >\n    <legend class=\"e-kicker e-sign-legend\">{{ label || t(\"signature\") }}</legend>\n    <ESegmented\n      v-if=\"mode === 'both'\"\n      :label=\"t('signature')\"\n      :model-value=\"method\"\n      :options=\"[\n        { value: 'type', label: t('signType'), icon: 'edit' },\n        { value: 'draw', label: t('signDraw'), icon: 'signature' },\n      ]\"\n      @update:model-value=\"update({ method: $event as 'type' | 'draw', image: '' })\"\n    />\n    <template v-if=\"method === 'type'\">\n      <ETextField\n        :id=\"id\"\n        :model-value=\"model.name\"\n        :label=\"t('typeName')\"\n        :placeholder=\"t('fullName')\"\n        autocomplete=\"name\"\n        required\n        :hint=\"t('signHint')\"\n        @update:model-value=\"update({ name: $event })\"\n      />\n      <div class=\"e-sign-line\" aria-live=\"polite\">\n        <span v-if=\"model.name\" class=\"e-sign-name\">{{ model.name }}</span>\n        <span v-else class=\"e-sign-empty\">{{ t(\"signAppears\") }}</span>\n        <span class=\"e-sign-date\">{{ dateText }}</span>\n      </div>\n    </template>\n    <template v-else>\n      <ESignaturePad :model-value=\"model.image\" :disabled=\"disabled\" @update:model-value=\"update({ image: $event })\" />\n      <p class=\"e-sign-date e-sign-date--solo\">{{ dateText }}</p>\n    </template>\n    <ECheckbox\n      :model-value=\"model.agreed\"\n      :label=\"agreement || t('agreeSign')\"\n      :disabled=\"disabled\"\n      @update:model-value=\"update({ agreed: $event })\"\n    />\n    <EFieldMessage :id=\"hintId\" :error=\"error\" :hint=\"hint\" />\n    <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"method === 'draw' ? model.image : model.name\" />\n  </fieldset>\n</template>\n\n<style>\n@layer e.composites {\n  .e-sign {\n    display: grid;\n    gap: var(--e-space-3);\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n\n  .e-sign-legend {\n    padding: 0;\n    margin-bottom: var(--e-space-2);\n  }\n\n  .e-sign-line {\n    display: flex;\n    align-items: flex-end;\n    justify-content: space-between;\n    gap: var(--e-space-3);\n    min-height: calc(var(--e-control-height) + var(--e-space-1));\n    padding: var(--e-space-2) var(--e-space-4);\n    border-bottom: var(--e-stroke-edge) solid var(--e-secondary);\n    background: var(--e-secondary-soft);\n    border-radius: var(--e-radius-md) var(--e-radius-md) 0 0;\n  }\n\n  .e-sign-name {\n    font:\n      italic 500 28px/1.1 \"Segoe Script\",\n      \"Snell Roundhand\",\n      \"Brush Script MT\",\n      cursive;\n    min-width: 0;\n    overflow-wrap: anywhere;\n  }\n\n  .e-sign-empty {\n    font: 400 var(--e-text-md)/1.4 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n\n  .e-sign-date {\n    flex: none;\n    font: 500 var(--e-text-xs)/1.2 var(--e-font-mono);\n    color: var(--e-muted);\n  }\n\n  .e-sign-date--solo {\n    margin: 0;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/SignatureField/ESignatureField.vue.d.ts

@@ -11,46 +11,50 @@ export interface SignatureValue {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import('vue').DefineComponent<{
-    /** Names the group and heads it. Say what the form is. Default "Signature". */
+    /** Names the group and heads it. Say what the form is. @default "Signature" */
     label?: string;
     /** `type` the default, `draw`, or `both` which adds a Type and Draw switch. A drawn signature cannot be made from a keyboard, so `both` is the usual choice. */
     mode?: "type" | "draw" | "both";
-    /** The sentence the person agrees to. Default "I agree and want to sign this form." */
+    /** The sentence the person agrees to. @default "I agree and want to sign this form." */
     agreement?: string;
-    /** The date shown with the signature. Today when left out. */
+    /** The date shown with the signature, in the configured locale. @default today */
     date?: Date;
     /** Help that is announced with the group. */
     hint?: string;
-    /** What to fix. Replaces the hint and is announced with the group. */
+    /** What to fix. Replaces the hint, marks the group invalid and is announced with the group. */
     error?: string;
+    /** Disables the fields and the agreement. */
     disabled?: boolean;
     /** The name submitted with a form: the typed name, or the drawn image as a data URL. */
     name?: string;
-    /** The id of the typed-name input. Generated when left out. */
+    /** The id of the typed-name input. @default generated */
     id?: string;
 } & {
+    /** `image` is a PNG data URL, empty unless `method` is `draw`. */
     modelValue?: SignatureValue;
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: SignatureValue) => any;
 }, string, import('vue').PublicProps, Readonly<{
-    /** Names the group and heads it. Say what the form is. Default "Signature". */
+    /** Names the group and heads it. Say what the form is. @default "Signature" */
     label?: string;
     /** `type` the default, `draw`, or `both` which adds a Type and Draw switch. A drawn signature cannot be made from a keyboard, so `both` is the usual choice. */
     mode?: "type" | "draw" | "both";
-    /** The sentence the person agrees to. Default "I agree and want to sign this form." */
+    /** The sentence the person agrees to. @default "I agree and want to sign this form." */
     agreement?: string;
-    /** The date shown with the signature. Today when left out. */
+    /** The date shown with the signature, in the configured locale. @default today */
     date?: Date;
     /** Help that is announced with the group. */
     hint?: string;
-    /** What to fix. Replaces the hint and is announced with the group. */
+    /** What to fix. Replaces the hint, marks the group invalid and is announced with the group. */
     error?: string;
+    /** Disables the fields and the agreement. */
     disabled?: boolean;
     /** The name submitted with a form: the typed name, or the drawn image as a data URL. */
     name?: string;
-    /** The id of the typed-name input. Generated when left out. */
+    /** The id of the typed-name input. @default generated */
     id?: string;
 } & {
+    /** `image` is a PNG data URL, empty unless `method` is `draw`. */
     modelValue?: SignatureValue;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: SignatureValue) => any) | undefined;

package/dist/components/SignatureField/ESignatureField.vue_vue_type_script_setup_true_lang.js

@@ -2,8 +2,8 @@
 import { useConfig as e, useMessages as t } from "../../config.js";
 import { useUid as n } from "../../composables/useUid.js";
 import r from "../Field/EFieldMessage.js";
-import i from "../TextField/ETextField.js";
-import a from "../Checkbox/ECheckbox.js";
+import i from "../Checkbox/ECheckbox.js";
+import a from "../TextField/ETextField.js";
 import o from "../Segmented/ESegmented.js";
 import s from "../SignaturePad/ESignaturePad.js";
 import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createVNode as m, defineComponent as h, mergeModels as g, openBlock as _, toDisplayString as v, unref as y, useModel as b } from "vue";
@@ -89,7 +89,7 @@ var x = [
 				"model-value",
 				"options"
 			])) : d("", !0),
-			P.value === "type" ? (_(), f(c, { key: 1 }, [m(i, {
+			P.value === "type" ? (_(), f(c, { key: 1 }, [m(a, {
 				id: y(M),
 				"model-value": k.value.name,
 				label: y(A)("typeName"),
@@ -109,7 +109,7 @@ var x = [
 				disabled: h.disabled,
 				"onUpdate:modelValue": t[2] ||= (e) => I({ image: e })
 			}, null, 8, ["model-value", "disabled"]), p("p", D, v(F.value), 1)], 64)),
-			m(a, {
+			m(i, {
 				"model-value": k.value.agreed,
 				label: h.agreement || y(A)("agreeSign"),
 				disabled: h.disabled,

package/dist/components/SignatureField/ESignatureField.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ESignatureField.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_createElementVNode","_toDisplayString","_unref","_createBlock","ESegmented","_createCommentVNode","_Fragment","_createVNode","ETextField","ESignaturePad","ECheckbox","EFieldMessage","EFieldMessage_default","ETextField_default","ECheckbox_default","ESegmented_default","ESignaturePad_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","ESignatureField_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","props","__props","model","useModel","t","useMessages","config","useConfig","id","useUid","hintId","computed","method","dateText","update","next","patch","openBlock","createElementBlock","createElementVNode","toDisplayString","unref","createBlock","_cache","$event","createCommentVNode","Fragment","createVNode"],"sources":["../../../src/components/SignatureField/ESignatureField.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface SignatureValue {\n  /** How the person signed. */\n  method: \"type\" | \"draw\";\n  /** The typed name. Kept when switching to Draw. */\n  name: string;\n  /** The drawn signature as a PNG data URL. Empty unless the method is `draw`. */\n  image: string;\n  /** Whether the person ticked the agreement. */\n  agreed: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EFieldMessage from \"../Field/EFieldMessage.vue\";\nimport ESegmented from \"../Segmented/ESegmented.vue\";\nimport ETextField from \"../TextField/ETextField.vue\";\nimport ECheckbox from \"../Checkbox/ECheckbox.vue\";\nimport ESignaturePad from \"../SignaturePad/ESignaturePad.vue\";\nimport { useConfig, useMessages } from \"../../config.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** Names the group and heads it. Say what the form is. Default \"Signature\". */\n    label?: string;\n    /** `type` the default, `draw`, or `both` which adds a Type and Draw switch. A drawn signature cannot be made from a keyboard, so `both` is the usual choice. */\n    mode?: \"type\" | \"draw\" | \"both\";\n    /** The sentence the person agrees to. Default \"I agree and want to sign this form.\" */\n    agreement?: string;\n    /** The date shown with the signature. Today when left out. */\n    date?: Date;\n    /** Help that is announced with the group. */\n    hint?: string;\n    /** What to fix. Replaces the hint and is announced with the group. */\n    error?: string;\n    disabled?: boolean;\n    /** The name submitted with a form: the typed name, or the drawn image as a data URL. */\n    name?: string;\n    /** The id of the typed-name input. Generated when left out. */\n    id?: string;\n  }>(),\n  { mode: \"type\" },\n);\n\nconst model = defineModel<SignatureValue>({\n  default: () => ({ method: \"type\", name: \"\", image: \"\", agreed: false }),\n});\n\nconst t = useMessages();\nconst config = useConfig();\nconst id = useUid(() => props.id);\nconst hintId = computed(() => `${id.value}-sign-hint`);\n\nconst method = computed<\"type\" | \"draw\">(() => (props.mode === \"both\" ? model.value.method : props.mode));\nconst dateText = computed(() =>\n  new Intl.DateTimeFormat(config.locale, { year: \"numeric\", month: \"long\", day: \"numeric\" }).format(\n    props.date ?? new Date(),\n  ),\n);\n\nfunction update(patch: Partial<SignatureValue>) {\n  const next = { ...model.value, method: method.value, ...patch };\n  model.value = { ...next, image: next.method === \"draw\" ? next.image : \"\" };\n}\n</script>\n\n<template>\n  <fieldset\n    class=\"e-sign\"\n    :disabled=\"disabled\"\n    :aria-describedby=\"error || hint ? hintId : undefined\"\n    :aria-invalid=\"error ? 'true' : undefined\"\n  >\n    <legend class=\"e-kicker e-sign-legend\">{{ label || t(\"signature\") }}</legend>\n    <ESegmented\n      v-if=\"mode === 'both'\"\n      :label=\"t('signature')\"\n      :model-value=\"method\"\n      :options=\"[\n        { value: 'type', label: t('signType'), icon: 'edit' },\n        { value: 'draw', label: t('signDraw'), icon: 'signature' },\n      ]\"\n      @update:model-value=\"update({ method: $event as 'type' | 'draw', image: '' })\"\n    />\n    <template v-if=\"method === 'type'\">\n      <ETextField\n        :id=\"id\"\n        :model-value=\"model.name\"\n        :label=\"t('typeName')\"\n        :placeholder=\"t('fullName')\"\n        autocomplete=\"name\"\n        required\n        :hint=\"t('signHint')\"\n        @update:model-value=\"update({ name: $event })\"\n      />\n      <div class=\"e-sign-line\" aria-live=\"polite\">\n        <span v-if=\"model.name\" class=\"e-sign-name\">{{ model.name }}</span>\n        <span v-else class=\"e-sign-empty\">{{ t(\"signAppears\") }}</span>\n        <span class=\"e-sign-date\">{{ dateText }}</span>\n      </div>\n    </template>\n    <template v-else>\n      <ESignaturePad :model-value=\"model.image\" :disabled=\"disabled\" @update:model-value=\"update({ image: $event })\" />\n      <p class=\"e-sign-date e-sign-date--solo\">{{ dateText }}</p>\n    </template>\n    <ECheckbox\n      :model-value=\"model.agreed\"\n      :label=\"agreement || t('agreeSign')\"\n      :disabled=\"disabled\"\n      @update:model-value=\"update({ agreed: $event })\"\n    />\n    <EFieldMessage :id=\"hintId\" :error=\"error\" :hint=\"hint\" />\n    <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"method === 'draw' ? model.image : model.name\" />\n  </fieldset>\n</template>\n\n<style>\n@layer e.composites {\n  .e-sign {\n    display: grid;\n    gap: var(--e-space-3);\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n\n  .e-sign-legend {\n    padding: 0;\n    margin-bottom: var(--e-space-2);\n  }\n\n  .e-sign-line {\n    display: flex;\n    align-items: flex-end;\n    justify-content: space-between;\n    gap: var(--e-space-3);\n    min-height: 52px;\n    padding: var(--e-space-2) var(--e-space-4);\n    border-bottom: 2px solid var(--e-ink);\n    background: var(--e-surface-tint);\n    border-radius: var(--e-radius-md) var(--e-radius-md) 0 0;\n  }\n\n  .e-sign-name {\n    font:\n      italic 500 28px/1.1 \"Segoe Script\",\n      \"Snell Roundhand\",\n      \"Brush Script MT\",\n      cursive;\n    min-width: 0;\n    overflow-wrap: anywhere;\n  }\n\n  .e-sign-empty {\n    font: 400 var(--e-text-md)/1.4 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n\n  .e-sign-date {\n    flex: none;\n    font: 500 var(--e-text-xs)/1.2 var(--e-font-mono);\n    color: var(--e-muted);\n  }\n\n  .e-sign-date--solo {\n    margin: 0;\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"ESignatureField.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_createElementVNode","_toDisplayString","_unref","_createBlock","ESegmented","_createCommentVNode","_Fragment","_createVNode","ETextField","ESignaturePad","ECheckbox","EFieldMessage","EFieldMessage_default","ECheckbox_default","ETextField_default","ESegmented_default","ESignaturePad_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","ESignatureField_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","props","__props","model","useModel","t","useMessages","config","useConfig","id","useUid","hintId","computed","method","dateText","update","next","patch","openBlock","createElementBlock","createElementVNode","toDisplayString","unref","createBlock","_cache","$event","createCommentVNode","Fragment","createVNode"],"sources":["../../../src/components/SignatureField/ESignatureField.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface SignatureValue {\n  /** How the person signed. */\n  method: \"type\" | \"draw\";\n  /** The typed name. Kept when switching to Draw. */\n  name: string;\n  /** The drawn signature as a PNG data URL. Empty unless the method is `draw`. */\n  image: string;\n  /** Whether the person ticked the agreement. */\n  agreed: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EFieldMessage from \"../Field/EFieldMessage.vue\";\nimport ESegmented from \"../Segmented/ESegmented.vue\";\nimport ETextField from \"../TextField/ETextField.vue\";\nimport ECheckbox from \"../Checkbox/ECheckbox.vue\";\nimport ESignaturePad from \"../SignaturePad/ESignaturePad.vue\";\nimport { useConfig, useMessages } from \"../../config.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** Names the group and heads it. Say what the form is. @default \"Signature\" */\n    label?: string;\n    /** `type` the default, `draw`, or `both` which adds a Type and Draw switch. A drawn signature cannot be made from a keyboard, so `both` is the usual choice. */\n    mode?: \"type\" | \"draw\" | \"both\";\n    /** The sentence the person agrees to. @default \"I agree and want to sign this form.\" */\n    agreement?: string;\n    /** The date shown with the signature, in the configured locale. @default today */\n    date?: Date;\n    /** Help that is announced with the group. */\n    hint?: string;\n    /** What to fix. Replaces the hint, marks the group invalid and is announced with the group. */\n    error?: string;\n    /** Disables the fields and the agreement. */\n    disabled?: boolean;\n    /** The name submitted with a form: the typed name, or the drawn image as a data URL. */\n    name?: string;\n    /** The id of the typed-name input. @default generated */\n    id?: string;\n  }>(),\n  { mode: \"type\" },\n);\n\n/** `image` is a PNG data URL, empty unless `method` is `draw`. */\nconst model = defineModel<SignatureValue>({\n  default: () => ({ method: \"type\", name: \"\", image: \"\", agreed: false }),\n});\n\nconst t = useMessages();\nconst config = useConfig();\nconst id = useUid(() => props.id);\nconst hintId = computed(() => `${id.value}-sign-hint`);\n\nconst method = computed<\"type\" | \"draw\">(() => (props.mode === \"both\" ? model.value.method : props.mode));\nconst dateText = computed(() =>\n  new Intl.DateTimeFormat(config.locale, { year: \"numeric\", month: \"long\", day: \"numeric\" }).format(\n    props.date ?? new Date(),\n  ),\n);\n\nfunction update(patch: Partial<SignatureValue>) {\n  const next = { ...model.value, method: method.value, ...patch };\n  model.value = { ...next, image: next.method === \"draw\" ? next.image : \"\" };\n}\n</script>\n\n<template>\n  <fieldset\n    class=\"e-sign\"\n    :disabled=\"disabled\"\n    :aria-describedby=\"error || hint ? hintId : undefined\"\n    :aria-invalid=\"error ? 'true' : undefined\"\n  >\n    <legend class=\"e-kicker e-sign-legend\">{{ label || t(\"signature\") }}</legend>\n    <ESegmented\n      v-if=\"mode === 'both'\"\n      :label=\"t('signature')\"\n      :model-value=\"method\"\n      :options=\"[\n        { value: 'type', label: t('signType'), icon: 'edit' },\n        { value: 'draw', label: t('signDraw'), icon: 'signature' },\n      ]\"\n      @update:model-value=\"update({ method: $event as 'type' | 'draw', image: '' })\"\n    />\n    <template v-if=\"method === 'type'\">\n      <ETextField\n        :id=\"id\"\n        :model-value=\"model.name\"\n        :label=\"t('typeName')\"\n        :placeholder=\"t('fullName')\"\n        autocomplete=\"name\"\n        required\n        :hint=\"t('signHint')\"\n        @update:model-value=\"update({ name: $event })\"\n      />\n      <div class=\"e-sign-line\" aria-live=\"polite\">\n        <span v-if=\"model.name\" class=\"e-sign-name\">{{ model.name }}</span>\n        <span v-else class=\"e-sign-empty\">{{ t(\"signAppears\") }}</span>\n        <span class=\"e-sign-date\">{{ dateText }}</span>\n      </div>\n    </template>\n    <template v-else>\n      <ESignaturePad :model-value=\"model.image\" :disabled=\"disabled\" @update:model-value=\"update({ image: $event })\" />\n      <p class=\"e-sign-date e-sign-date--solo\">{{ dateText }}</p>\n    </template>\n    <ECheckbox\n      :model-value=\"model.agreed\"\n      :label=\"agreement || t('agreeSign')\"\n      :disabled=\"disabled\"\n      @update:model-value=\"update({ agreed: $event })\"\n    />\n    <EFieldMessage :id=\"hintId\" :error=\"error\" :hint=\"hint\" />\n    <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"method === 'draw' ? model.image : model.name\" />\n  </fieldset>\n</template>\n\n<style>\n@layer e.composites {\n  .e-sign {\n    display: grid;\n    gap: var(--e-space-3);\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n\n  .e-sign-legend {\n    padding: 0;\n    margin-bottom: var(--e-space-2);\n  }\n\n  .e-sign-line {\n    display: flex;\n    align-items: flex-end;\n    justify-content: space-between;\n    gap: var(--e-space-3);\n    min-height: calc(var(--e-control-height) + var(--e-space-1));\n    padding: var(--e-space-2) var(--e-space-4);\n    border-bottom: var(--e-stroke-edge) solid var(--e-secondary);\n    background: var(--e-secondary-soft);\n    border-radius: var(--e-radius-md) var(--e-radius-md) 0 0;\n  }\n\n  .e-sign-name {\n    font:\n      italic 500 28px/1.1 \"Segoe Script\",\n      \"Snell Roundhand\",\n      \"Brush Script MT\",\n      cursive;\n    min-width: 0;\n    overflow-wrap: anywhere;\n  }\n\n  .e-sign-empty {\n    font: 400 var(--e-text-md)/1.4 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n\n  .e-sign-date {\n    flex: none;\n    font: 500 var(--e-text-xs)/1.2 var(--e-font-mono);\n    color: var(--e-muted);\n  }\n\n  .e-sign-date--solo {\n    margin: 0;\n  }\n}\n</style>\n"],"mappings":"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"}

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

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

package/dist/components/SignaturePad/ESignaturePad.vue.d.ts

@@ -1,12 +1,14 @@
 type __VLS_Props = {
     /** The height of the drawing area in pixels. */
     height?: number;
+    /** Ignores drawing and disables Clear. */
     disabled?: boolean;
-    /** The id of the canvas. Generated when left out. */
+    /** The id of the canvas. @default generated */
     id?: string;
 };
 declare function clear(): void;
 type __VLS_ModelProps = {
+    /** A PNG data URL (black on transparent); empty while clear. Set `""` to clear. */
     modelValue?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;

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

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

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 type __VLS_Props = {
-    /** The element to render, `div` by default. */
+    /** The element to render, `div` by default; such as `ul` (with `li` children). */
     as?: string;
-    /** A space token number (1, 2, 3, 4, 6, 8), or any CSS length as a string. */
+    /** A space token number (1, 2, 3, 4, 6, 8) becomes `var(--e-space-N)`; a string is used as given, so any CSS length works. */
     gap?: number | string;
     /** Aligns the children across the column: `center` or `end`. Stretched by default. */
     align?: "center" | "end";

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

@@ -1 +1 @@
-{"version":3,"file":"EStack.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_normalizeStyle","_withCtx","_renderSlot","EStack_vue_vue_type_script_setup_true_lang_default","props","__props","gapValue","computed","openBlock","createBlock","resolveDynamicComponent","normalizeClass","normalizeStyle","withCtx","renderSlot","_ctx"],"sources":["../../../src/components/Stack/EStack.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The element to render, `div` by default. */\n    as?: string;\n    /** A space token number (1, 2, 3, 4, 6, 8), or any CSS length as a string. */\n    gap?: number | string;\n    /** Aligns the children across the column: `center` or `end`. Stretched by default. */\n    align?: \"center\" | \"end\";\n  }>(),\n  { as: \"div\", gap: 4 },\n);\n\ndefineSlots<{\n  /** The children, one under another. */\n  default(): unknown;\n}>();\n\nconst gapValue = computed(() => (typeof props.gap === \"number\" ? `var(--e-space-${props.gap})` : props.gap));\n</script>\n\n<template>\n  <component :is=\"as\" class=\"e-stack\" :class=\"align && `e-stack--${align}`\" :style=\"{ '--e-gap': gapValue }\">\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-stack {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    align-content: start;\n    gap: var(--e-gap, var(--e-space-3));\n    min-width: 0;\n  }\n\n  .e-stack--center {\n    justify-items: center;\n  }\n\n  .e-stack--end {\n    justify-items: end;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;EAIA,IAAMQ,IAAQC,GAiBRC,IAAWC,QAAgB,OAAOH,EAAM,OAAQ,WAAW,iBAAiBA,EAAM,IAAI,KAAKA,EAAM,GAAI;E,kBAIzGR,EAAA,GAAAC,EAEYC,EAFIO,EAAA,EAAE,GAAA;GAAE,OAAKN,EAAA,CAAC,WAAkBM,EAAA,SAAK,YAAgBA,EAAA,OAAK,CAAA;GAAK,OAAKL,EAAA,EAAA,WAAeM,EAAA,MAAQ,CAAA;;GACrG,SAAAL,QAAQ,CAARC,EAAQa,EAAA,QAAA,SAAA,C"}
+{"version":3,"file":"EStack.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_normalizeStyle","_withCtx","_renderSlot","EStack_vue_vue_type_script_setup_true_lang_default","props","__props","gapValue","computed","openBlock","createBlock","resolveDynamicComponent","normalizeClass","normalizeStyle","withCtx","renderSlot","_ctx"],"sources":["../../../src/components/Stack/EStack.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The element to render, `div` by default; such as `ul` (with `li` children). */\n    as?: string;\n    /** A space token number (1, 2, 3, 4, 6, 8) becomes `var(--e-space-N)`; a string is used as given, so any CSS length works. */\n    gap?: number | string;\n    /** Aligns the children across the column: `center` or `end`. Stretched by default. */\n    align?: \"center\" | \"end\";\n  }>(),\n  { as: \"div\", gap: 4 },\n);\n\ndefineSlots<{\n  /** The children, one under another. */\n  default(): unknown;\n}>();\n\nconst gapValue = computed(() => (typeof props.gap === \"number\" ? `var(--e-space-${props.gap})` : props.gap));\n</script>\n\n<template>\n  <component :is=\"as\" class=\"e-stack\" :class=\"align && `e-stack--${align}`\" :style=\"{ '--e-gap': gapValue }\">\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-stack {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    align-content: start;\n    gap: var(--e-gap, var(--e-space-3));\n    min-width: 0;\n  }\n\n  .e-stack--center {\n    justify-items: center;\n  }\n\n  .e-stack--end {\n    justify-items: end;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;EAIA,IAAMQ,IAAQC,GAiBRC,IAAWC,QAAgB,OAAOH,EAAM,OAAQ,WAAW,iBAAiBA,EAAM,IAAI,KAAKA,EAAM,GAAI;E,kBAIzGR,EAAA,GAAAC,EAEYC,EAFIO,EAAA,EAAE,GAAA;GAAE,OAAKN,EAAA,CAAC,WAAkBM,EAAA,SAAK,YAAgBA,EAAA,OAAK,CAAA;GAAK,OAAKL,EAAA,EAAA,WAAeM,EAAA,MAAQ,CAAA;;GACrG,SAAAL,QAAQ,CAARC,EAAQa,EAAA,QAAA,SAAA,C"}

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

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

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

@@ -1,24 +1,30 @@
 import { IconProp } from '../../icons/types.js';
-export type StampTone = "success" | "info" | "warning" | "danger";
+export type StampTone = "neutral" | "ink" | "success" | "info" | "warning" | "danger";
 export type StampStatus = "paid" | "due" | "overdue" | "action" | "scheduled" | "confirmed" | "cancelled" | "signed" | "pending" | "complete";
 type __VLS_Props = {
-    /** A preset: sets the tone, the word and the glyph. */
+    /** A preset: sets the tone and the word (message `status.<name>`). */
     status?: StampStatus;
-    /** Overrides the preset's tone. Without a status, defaults to `info`. */
+    /** Overrides the preset's tone. Without a status it is `neutral` (ink; `ink` is the same). `success`: paid, confirmed. `info`: due, scheduled. `warning`: needs attention. `danger`: overdue, failed. @default "ink" */
     tone?: StampTone;
-    /** The word. Overrides the preset's. */
+    /** The word. Overrides the preset's; the default slot overrides both. @default preset's word, else Status */
     label?: string;
-    /** Overrides the preset's glyph. */
+    /** A glyph before the word. None by default. */
     icon?: IconProp;
     /** A date or day count, set after the word. */
     detail?: string;
-    /** Smaller, for rows. */
-    small?: boolean;
-    /** `solid` is a filled badge with light text (the default); `subtle` is a soft tint with a tone-coloured outline and text. */
-    variant?: "solid" | "subtle";
+    /** `sm` is shorter, for rows and tables. @default "md" */
+    size?: "sm" | "md";
 };
-declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    variant: "solid" | "subtle";
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+type __VLS_Slots = {
+    /** The word, instead of `label` or the preset's. Write sentence case; the stamp sets it in capitals. */
+    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<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

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