@eos-ui/vue 0.3.0 → 0.4.0

package/dist/components/SearchBar/ESearchBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ESearchBar.js","names":["_sfc_main","ESearchBar_vue_vue_type_script_setup_true_lang_default","ESearchBar_default"],"sources":["../../../src/components/SearchBar/ESearchBar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EButton from \"../Button/EButton.vue\";\nimport { ref } from \"vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nwithDefaults(\n  defineProps<{\n    /** Names the box and the search landmark; there is no visible label. @default \"Search\" */\n    label?: string;\n    /** Say what can be searched, briefly. @default \"Search\" */\n    placeholder?: string;\n    /** The text on the button. @default \"Search\" */\n    action?: string;\n    /** Leaves out the button, for a box that filters or searches as you type. Enter still submits. */\n    hideAction?: boolean;\n    /** The clear button, shown when there is text. On by default. */\n    clearable?: boolean;\n    /** The name submitted with a form. @default \"q\" */\n    name?: string;\n    /** Disables the box and button. Say why in an `ENotice`. */\n    disabled?: boolean;\n  }>(),\n  { clearable: true },\n);\n\nconst emit = defineEmits<{\n  /** The person pressed Enter or the button. */\n  submit: [value: string];\n}>();\n\n/** The text. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst box = ref<HTMLInputElement | null>(null);\n\nfunction clear() {\n  model.value = \"\";\n  box.value?.focus();\n}\n\ndefineExpose({\n  input: box,\n  focus: () => box.value?.focus(),\n});\n</script>\n\n<template>\n  <form\n    class=\"e-search\"\n    v-bind=\"attrs.wrapper()\"\n    role=\"search\"\n    :aria-label=\"label || t('search')\"\n    @submit.prevent=\"emit('submit', model)\"\n  >\n    <span class=\"e-search-lead\"><EIcon name=\"search\" /></span>\n    <input\n      ref=\"box\"\n      v-bind=\"attrs.input()\"\n      class=\"e-input\"\n      :name=\"name || 'q'\"\n      :aria-label=\"label || t('search')\"\n      :placeholder=\"placeholder || t('search')\"\n      :value=\"model\"\n      :disabled=\"disabled\"\n      @input=\"model = ($event.target as HTMLInputElement).value\"\n    />\n    <button\n      v-if=\"clearable && model && !disabled\"\n      type=\"button\"\n      class=\"e-search-clear\"\n      :aria-label=\"t('clear')\"\n      @mousedown.prevent\n      @click=\"clear\"\n    >\n      <EIcon name=\"x\" />\n    </button>\n    <EButton v-if=\"!hideAction\" type=\"submit\" :disabled=\"disabled\">{{ action || t(\"search\") }}</EButton>\n  </form>\n</template>\n\n<style>\n@layer e.controls {\n  .e-search {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-1);\n    height: var(--e-control-height);\n    padding: 0 var(--e-space-1) 0 var(--e-space-2);\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    transition: border-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-search:hover {\n    border-color: var(--e-ink);\n\n    --e-bc: var(--e-ink);\n  }\n\n  .e-search .e-btn {\n    position: relative;\n    height: calc(var(--e-control-height) - 6px);\n    padding: 0 var(--e-space-3);\n    font-size: var(--e-text-md);\n  }\n\n  .e-search .e-btn::after {\n    content: \"\";\n    position: absolute;\n    inset: -3px;\n  }\n\n  .e-search-clear {\n    display: inline-grid;\n    place-items: center;\n    position: relative;\n    flex: none;\n    width: calc(var(--e-control-height) - 9px);\n    height: calc(var(--e-control-height) - 9px);\n    padding: 0;\n    border: 0;\n    border-radius: var(--e-radius-sm);\n    background: transparent;\n    color: var(--e-ink);\n    cursor: pointer;\n    transition: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-search-clear::after {\n    content: \"\";\n    position: absolute;\n    inset: -5px;\n  }\n\n  .e-search-clear:hover {\n    background: var(--e-wash-hover);\n    box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-wash-ring);\n  }\n\n  .e-search-clear:active {\n    background: var(--e-wash-press);\n    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-ink);\n  }\n\n  .e-search-clear:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: calc(-1 * var(--e-stroke-focus));\n  }\n\n  .e-search-lead {\n    display: grid;\n    place-items: center;\n    flex: none;\n    width: var(--e-space-8);\n    color: var(--e-muted);\n  }\n\n  .e-search .e-input {\n    flex: 1;\n    text-overflow: ellipsis;\n    height: 100%;\n    border: 0;\n    outline: 0;\n    background: transparent;\n    box-shadow: none;\n    font-size: var(--e-text-md);\n    padding-inline: var(--e-space-2);\n  }\n\n  .e-search .e-input:hover,\n  .e-search .e-input:focus {\n    border: 0;\n    background: transparent;\n  }\n\n  .e-search .e-input:focus-visible {\n    outline: none;\n  }\n\n  .e-search:focus-within {\n    border-color: var(--e-focus-field);\n\n    --e-bc: var(--e-focus-field);\n\n    outline: var(--e-stroke-focus) solid var(--e-focus-field);\n    outline-offset: var(--e-focus-gap-field);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-search {\n      transition: none;\n    }\n  }\n\n  @media print {\n    .e-search {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ESearchBar.js","names":["_sfc_main","ESearchBar_vue_vue_type_script_setup_true_lang_default","ESearchBar_default"],"sources":["../../../src/components/SearchBar/ESearchBar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EButton from \"../Button/EButton.vue\";\nimport { ref } from \"vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nwithDefaults(\n  defineProps<{\n    /** Names the box and the search landmark; there is no visible label. @default \"Search\" */\n    label?: string;\n    /** Say what can be searched, briefly. @default \"Search\" */\n    placeholder?: string;\n    /** The text on the button. @default \"Search\" */\n    action?: string;\n    /** Leaves out the button, for a box that filters or searches as you type. Enter still submits. */\n    hideAction?: boolean;\n    /** The clear button, shown when there is text. On by default. */\n    clearable?: boolean;\n    /** The name submitted with a form. @default \"q\" */\n    name?: string;\n    /** Disables the box and button. Say why in an `ENotice`. */\n    disabled?: boolean;\n  }>(),\n  { clearable: true },\n);\n\nconst emit = defineEmits<{\n  /** The person pressed Enter or the button. */\n  submit: [value: string];\n}>();\n\n/** The text. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst box = ref<HTMLInputElement | null>(null);\n\nfunction clear() {\n  model.value = \"\";\n  box.value?.focus();\n}\n\ndefineExpose({\n  input: box,\n  focus: () => box.value?.focus(),\n});\n</script>\n\n<template>\n  <form\n    class=\"e-search\"\n    v-bind=\"attrs.wrapper()\"\n    role=\"search\"\n    :aria-label=\"label || t('search')\"\n    @submit.prevent=\"emit('submit', model)\"\n  >\n    <span class=\"e-search-lead\"><EIcon name=\"search\" /></span>\n    <input\n      ref=\"box\"\n      v-bind=\"attrs.input()\"\n      class=\"e-input\"\n      :name=\"name || 'q'\"\n      :aria-label=\"label || t('search')\"\n      :placeholder=\"placeholder || t('search')\"\n      :value=\"model\"\n      :disabled=\"disabled\"\n      @input=\"model = ($event.target as HTMLInputElement).value\"\n    />\n    <button\n      v-if=\"clearable && model && !disabled\"\n      type=\"button\"\n      class=\"e-search-clear\"\n      :aria-label=\"t('clear')\"\n      @mousedown.prevent\n      @click=\"clear\"\n    >\n      <EIcon name=\"x\" />\n    </button>\n    <EButton v-if=\"!hideAction\" type=\"submit\" :disabled=\"disabled\">{{ action || t(\"search\") }}</EButton>\n  </form>\n</template>\n\n<style>\n@layer e.controls {\n  .e-search {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-1);\n    height: var(--e-control-height);\n    padding: 0 var(--e-space-1) 0 var(--e-space-2);\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    transition: border-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-search:hover {\n    border-color: var(--e-ink);\n\n  }\n\n  .e-search .e-btn {\n    position: relative;\n    height: calc(var(--e-control-height) - 6px - var(--e-lift));\n    padding: 0 var(--e-space-3);\n    font-size: var(--e-text-md);\n  }\n\n  .e-search .e-btn::after {\n    content: \"\";\n    position: absolute;\n    inset: -3px;\n  }\n\n  .e-search-clear {\n    display: inline-grid;\n    place-items: center;\n    position: relative;\n    flex: none;\n    width: calc(var(--e-control-height) - 9px);\n    height: calc(var(--e-control-height) - 9px);\n    padding: 0;\n    border: 0;\n    border-radius: var(--e-radius-sm);\n    background: transparent;\n    color: var(--e-ink);\n    cursor: pointer;\n    transition: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-search-clear::after {\n    content: \"\";\n    position: absolute;\n    inset: -5px;\n  }\n\n  .e-search-clear:hover {\n    background: var(--e-wash-hover);\n    box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-wash-ring);\n  }\n\n  .e-search-clear:active {\n    background: var(--e-wash-press);\n    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-ink);\n  }\n\n  .e-search-clear:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: calc(-1 * var(--e-stroke-focus));\n  }\n\n  .e-search-lead {\n    display: grid;\n    place-items: center;\n    flex: none;\n    width: var(--e-space-8);\n    color: var(--e-muted);\n  }\n\n  .e-search .e-input {\n    flex: 1;\n    text-overflow: ellipsis;\n    height: 100%;\n    border: 0;\n    outline: 0;\n    background: transparent;\n    box-shadow: none;\n    font-size: var(--e-text-md);\n    padding-inline: var(--e-space-2);\n  }\n\n  .e-search .e-input:hover,\n  .e-search .e-input:focus {\n    border: 0;\n    background: transparent;\n  }\n\n  .e-search .e-input:focus-visible {\n    outline: none;\n  }\n\n  .e-search:focus-within {\n    border-color: var(--e-focus-field);\n    outline: var(--e-stroke-focus) solid var(--e-focus-field);\n    outline-offset: var(--e-focus-gap-field);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-search {\n      transition: none;\n    }\n  }\n\n  @media print {\n    .e-search {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/SearchBar/ESearchBar.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ESearchBar.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_mergeProps","_unref","_withModifiers","_createElementVNode","_createVNode","EIcon","_createCommentVNode","_createBlock","EButton","_withCtx","_createTextVNode","_toDisplayString","EIcon_default","EButton_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","ESearchBar_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","__emit","emit","model","useModel","__props","t","useMessages","attrs","useFieldAttrs","box","ref","clear","openBlock","createElementBlock","mergeProps","unref","_cache","withModifiers","createElementVNode","createVNode","$event","createCommentVNode","createBlock","withCtx","createTextVNode","toDisplayString"],"sources":["../../../src/components/SearchBar/ESearchBar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EButton from \"../Button/EButton.vue\";\nimport { ref } from \"vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nwithDefaults(\n  defineProps<{\n    /** Names the box and the search landmark; there is no visible label. @default \"Search\" */\n    label?: string;\n    /** Say what can be searched, briefly. @default \"Search\" */\n    placeholder?: string;\n    /** The text on the button. @default \"Search\" */\n    action?: string;\n    /** Leaves out the button, for a box that filters or searches as you type. Enter still submits. */\n    hideAction?: boolean;\n    /** The clear button, shown when there is text. On by default. */\n    clearable?: boolean;\n    /** The name submitted with a form. @default \"q\" */\n    name?: string;\n    /** Disables the box and button. Say why in an `ENotice`. */\n    disabled?: boolean;\n  }>(),\n  { clearable: true },\n);\n\nconst emit = defineEmits<{\n  /** The person pressed Enter or the button. */\n  submit: [value: string];\n}>();\n\n/** The text. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst box = ref<HTMLInputElement | null>(null);\n\nfunction clear() {\n  model.value = \"\";\n  box.value?.focus();\n}\n\ndefineExpose({\n  input: box,\n  focus: () => box.value?.focus(),\n});\n</script>\n\n<template>\n  <form\n    class=\"e-search\"\n    v-bind=\"attrs.wrapper()\"\n    role=\"search\"\n    :aria-label=\"label || t('search')\"\n    @submit.prevent=\"emit('submit', model)\"\n  >\n    <span class=\"e-search-lead\"><EIcon name=\"search\" /></span>\n    <input\n      ref=\"box\"\n      v-bind=\"attrs.input()\"\n      class=\"e-input\"\n      :name=\"name || 'q'\"\n      :aria-label=\"label || t('search')\"\n      :placeholder=\"placeholder || t('search')\"\n      :value=\"model\"\n      :disabled=\"disabled\"\n      @input=\"model = ($event.target as HTMLInputElement).value\"\n    />\n    <button\n      v-if=\"clearable && model && !disabled\"\n      type=\"button\"\n      class=\"e-search-clear\"\n      :aria-label=\"t('clear')\"\n      @mousedown.prevent\n      @click=\"clear\"\n    >\n      <EIcon name=\"x\" />\n    </button>\n    <EButton v-if=\"!hideAction\" type=\"submit\" :disabled=\"disabled\">{{ action || t(\"search\") }}</EButton>\n  </form>\n</template>\n\n<style>\n@layer e.controls {\n  .e-search {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-1);\n    height: var(--e-control-height);\n    padding: 0 var(--e-space-1) 0 var(--e-space-2);\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    transition: border-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-search:hover {\n    border-color: var(--e-ink);\n\n    --e-bc: var(--e-ink);\n  }\n\n  .e-search .e-btn {\n    position: relative;\n    height: calc(var(--e-control-height) - 6px);\n    padding: 0 var(--e-space-3);\n    font-size: var(--e-text-md);\n  }\n\n  .e-search .e-btn::after {\n    content: \"\";\n    position: absolute;\n    inset: -3px;\n  }\n\n  .e-search-clear {\n    display: inline-grid;\n    place-items: center;\n    position: relative;\n    flex: none;\n    width: calc(var(--e-control-height) - 9px);\n    height: calc(var(--e-control-height) - 9px);\n    padding: 0;\n    border: 0;\n    border-radius: var(--e-radius-sm);\n    background: transparent;\n    color: var(--e-ink);\n    cursor: pointer;\n    transition: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-search-clear::after {\n    content: \"\";\n    position: absolute;\n    inset: -5px;\n  }\n\n  .e-search-clear:hover {\n    background: var(--e-wash-hover);\n    box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-wash-ring);\n  }\n\n  .e-search-clear:active {\n    background: var(--e-wash-press);\n    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-ink);\n  }\n\n  .e-search-clear:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: calc(-1 * var(--e-stroke-focus));\n  }\n\n  .e-search-lead {\n    display: grid;\n    place-items: center;\n    flex: none;\n    width: var(--e-space-8);\n    color: var(--e-muted);\n  }\n\n  .e-search .e-input {\n    flex: 1;\n    text-overflow: ellipsis;\n    height: 100%;\n    border: 0;\n    outline: 0;\n    background: transparent;\n    box-shadow: none;\n    font-size: var(--e-text-md);\n    padding-inline: var(--e-space-2);\n  }\n\n  .e-search .e-input:hover,\n  .e-search .e-input:focus {\n    border: 0;\n    background: transparent;\n  }\n\n  .e-search .e-input:focus-visible {\n    outline: none;\n  }\n\n  .e-search:focus-within {\n    border-color: var(--e-focus-field);\n\n    --e-bc: var(--e-focus-field);\n\n    outline: var(--e-stroke-focus) solid var(--e-focus-field);\n    outline-offset: var(--e-focus-gap-field);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-search {\n      transition: none;\n    }\n  }\n\n  @media print {\n    .e-search {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+BA,IAAM0B,IAAOD,GAMPE,IAAQ3B,EAAmB6B,GAAA,YAAgB,GAE3CC,IAAIC,EAAY,GAChBC,IAAQC,EAAc,GACtBC,IAAMC,EAA6B,IAAI;EAE7C,SAASC,IAAQ;GAEf,AADA,EAAM,QAAQ,IACdF,EAAI,OAAO,MAAM;EACnB;E,OAEAV,EAAa;GACX,OAAOU;GACP,aAAaA,EAAI,OAAO,MAAM;EAChC,CAAC,I,UAICjC,EAAA,GAAAC,EA8BO,QA9BPC,EA8BO,EA7BL,OAAM,WAAU,GACRC,EAAA4B,CAAA,CAAK,CAAC,QAAO,GAAA;GACrB,MAAK;GACJ,cAAYH,EAAA,SAASzB,EAAA0B,CAAA,CAAC,CAAA,QAAA;GACtB,UAAM,AAAAW,EAAA,OAAApC,GAAA,MAAUqB,EAAI,UAAWC,EAAA,KAAK,GAAA,CAAA,SAAA,CAAA;;GAErCrB,EAA0D,QAA1DY,GAA0D,CAA9BX,EAAuBC,GAAA,EAAhB,MAAK,SAAQ,CAAA,C;GAChDF,EAUE,SAVFH,EAUE;IATI,SAAA;IAAJ,KAAI+B;GACI,GAAA9B,EAAA4B,CAAA,CAAK,CAAC,MAAK,GAAA;IACnB,OAAM;IACL,MAAMH,EAAA,QAAI;IACV,cAAYA,EAAA,SAASzB,EAAA0B,CAAA,CAAC,CAAA,QAAA;IACtB,aAAaD,EAAA,eAAezB,EAAA0B,CAAA,CAAC,CAAA,QAAA;IAC7B,OAAOH,EAAA;IACP,UAAUE,EAAA;IACV,SAAK,AAAAY,EAAA,QAAA,MAAE,EAAA,QAASI,EAAO,OAA4B;;GAG9ChB,EAAA,aAAaF,EAAA,SAAK,CAAKE,EAAA,YAD/B5B,EAAA,GAAAC,EASS,UAAA;;IAPP,MAAK;IACL,OAAM;IACL,cAAYE,EAAA0B,CAAA,CAAC,CAAA,OAAA;IACb,aAAS,AAAAW,EAAA,OAAApC,QAAV,CAAA,GAAkB,CAAA,SAAA,CAAA;IACjB,SAAO+B;G,IAER7B,EAAkBC,GAAA,EAAX,MAAK,IAAG,CAAA,C;GAEDqB,EAAA,a,aAAhB5B,EAAA,GAAAS,EAAoGC,GAAA;;IAAxE,MAAK;IAAU,UAAUkB,EAAA;;IAAU,SAAAjB,QAA2B,CAAxBC,EAAAC,EAAAe,EAAA,UAAUzB,EAAA0B,CAAA,CAAC,CAAA,QAAA,CAAA,GAAA,CAAA,C"}
+{"version":3,"file":"ESearchBar.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_mergeProps","_unref","_withModifiers","_createElementVNode","_createVNode","EIcon","_createCommentVNode","_createBlock","EButton","_withCtx","_createTextVNode","_toDisplayString","EIcon_default","EButton_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","ESearchBar_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","__emit","emit","model","useModel","__props","t","useMessages","attrs","useFieldAttrs","box","ref","clear","openBlock","createElementBlock","mergeProps","unref","_cache","withModifiers","createElementVNode","createVNode","$event","createCommentVNode","createBlock","withCtx","createTextVNode","toDisplayString"],"sources":["../../../src/components/SearchBar/ESearchBar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EButton from \"../Button/EButton.vue\";\nimport { ref } from \"vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nwithDefaults(\n  defineProps<{\n    /** Names the box and the search landmark; there is no visible label. @default \"Search\" */\n    label?: string;\n    /** Say what can be searched, briefly. @default \"Search\" */\n    placeholder?: string;\n    /** The text on the button. @default \"Search\" */\n    action?: string;\n    /** Leaves out the button, for a box that filters or searches as you type. Enter still submits. */\n    hideAction?: boolean;\n    /** The clear button, shown when there is text. On by default. */\n    clearable?: boolean;\n    /** The name submitted with a form. @default \"q\" */\n    name?: string;\n    /** Disables the box and button. Say why in an `ENotice`. */\n    disabled?: boolean;\n  }>(),\n  { clearable: true },\n);\n\nconst emit = defineEmits<{\n  /** The person pressed Enter or the button. */\n  submit: [value: string];\n}>();\n\n/** The text. */\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst box = ref<HTMLInputElement | null>(null);\n\nfunction clear() {\n  model.value = \"\";\n  box.value?.focus();\n}\n\ndefineExpose({\n  input: box,\n  focus: () => box.value?.focus(),\n});\n</script>\n\n<template>\n  <form\n    class=\"e-search\"\n    v-bind=\"attrs.wrapper()\"\n    role=\"search\"\n    :aria-label=\"label || t('search')\"\n    @submit.prevent=\"emit('submit', model)\"\n  >\n    <span class=\"e-search-lead\"><EIcon name=\"search\" /></span>\n    <input\n      ref=\"box\"\n      v-bind=\"attrs.input()\"\n      class=\"e-input\"\n      :name=\"name || 'q'\"\n      :aria-label=\"label || t('search')\"\n      :placeholder=\"placeholder || t('search')\"\n      :value=\"model\"\n      :disabled=\"disabled\"\n      @input=\"model = ($event.target as HTMLInputElement).value\"\n    />\n    <button\n      v-if=\"clearable && model && !disabled\"\n      type=\"button\"\n      class=\"e-search-clear\"\n      :aria-label=\"t('clear')\"\n      @mousedown.prevent\n      @click=\"clear\"\n    >\n      <EIcon name=\"x\" />\n    </button>\n    <EButton v-if=\"!hideAction\" type=\"submit\" :disabled=\"disabled\">{{ action || t(\"search\") }}</EButton>\n  </form>\n</template>\n\n<style>\n@layer e.controls {\n  .e-search {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-1);\n    height: var(--e-control-height);\n    padding: 0 var(--e-space-1) 0 var(--e-space-2);\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    transition: border-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-search:hover {\n    border-color: var(--e-ink);\n\n  }\n\n  .e-search .e-btn {\n    position: relative;\n    height: calc(var(--e-control-height) - 6px - var(--e-lift));\n    padding: 0 var(--e-space-3);\n    font-size: var(--e-text-md);\n  }\n\n  .e-search .e-btn::after {\n    content: \"\";\n    position: absolute;\n    inset: -3px;\n  }\n\n  .e-search-clear {\n    display: inline-grid;\n    place-items: center;\n    position: relative;\n    flex: none;\n    width: calc(var(--e-control-height) - 9px);\n    height: calc(var(--e-control-height) - 9px);\n    padding: 0;\n    border: 0;\n    border-radius: var(--e-radius-sm);\n    background: transparent;\n    color: var(--e-ink);\n    cursor: pointer;\n    transition: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-search-clear::after {\n    content: \"\";\n    position: absolute;\n    inset: -5px;\n  }\n\n  .e-search-clear:hover {\n    background: var(--e-wash-hover);\n    box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-wash-ring);\n  }\n\n  .e-search-clear:active {\n    background: var(--e-wash-press);\n    box-shadow: inset 0 0 0 var(--e-stroke-edge) var(--e-ink);\n  }\n\n  .e-search-clear:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: calc(-1 * var(--e-stroke-focus));\n  }\n\n  .e-search-lead {\n    display: grid;\n    place-items: center;\n    flex: none;\n    width: var(--e-space-8);\n    color: var(--e-muted);\n  }\n\n  .e-search .e-input {\n    flex: 1;\n    text-overflow: ellipsis;\n    height: 100%;\n    border: 0;\n    outline: 0;\n    background: transparent;\n    box-shadow: none;\n    font-size: var(--e-text-md);\n    padding-inline: var(--e-space-2);\n  }\n\n  .e-search .e-input:hover,\n  .e-search .e-input:focus {\n    border: 0;\n    background: transparent;\n  }\n\n  .e-search .e-input:focus-visible {\n    outline: none;\n  }\n\n  .e-search:focus-within {\n    border-color: var(--e-focus-field);\n    outline: var(--e-stroke-focus) solid var(--e-focus-field);\n    outline-offset: var(--e-focus-gap-field);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-search {\n      transition: none;\n    }\n  }\n\n  @media print {\n    .e-search {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+BA,IAAM0B,IAAOD,GAMPE,IAAQ3B,EAAmB6B,GAAA,YAAgB,GAE3CC,IAAIC,EAAY,GAChBC,IAAQC,EAAc,GACtBC,IAAMC,EAA6B,IAAI;EAE7C,SAASC,IAAQ;GAEf,AADA,EAAM,QAAQ,IACdF,EAAI,OAAO,MAAM;EACnB;E,OAEAV,EAAa;GACX,OAAOU;GACP,aAAaA,EAAI,OAAO,MAAM;EAChC,CAAC,I,UAICjC,EAAA,GAAAC,EA8BO,QA9BPC,EA8BO,EA7BL,OAAM,WAAU,GACRC,EAAA4B,CAAA,CAAK,CAAC,QAAO,GAAA;GACrB,MAAK;GACJ,cAAYH,EAAA,SAASzB,EAAA0B,CAAA,CAAC,CAAA,QAAA;GACtB,UAAM,AAAAW,EAAA,OAAApC,GAAA,MAAUqB,EAAI,UAAWC,EAAA,KAAK,GAAA,CAAA,SAAA,CAAA;;GAErCrB,EAA0D,QAA1DY,GAA0D,CAA9BX,EAAuBC,GAAA,EAAhB,MAAK,SAAQ,CAAA,C;GAChDF,EAUE,SAVFH,EAUE;IATI,SAAA;IAAJ,KAAI+B;GACI,GAAA9B,EAAA4B,CAAA,CAAK,CAAC,MAAK,GAAA;IACnB,OAAM;IACL,MAAMH,EAAA,QAAI;IACV,cAAYA,EAAA,SAASzB,EAAA0B,CAAA,CAAC,CAAA,QAAA;IACtB,aAAaD,EAAA,eAAezB,EAAA0B,CAAA,CAAC,CAAA,QAAA;IAC7B,OAAOH,EAAA;IACP,UAAUE,EAAA;IACV,SAAK,AAAAY,EAAA,QAAA,MAAE,EAAA,QAASI,EAAO,OAA4B;;GAG9ChB,EAAA,aAAaF,EAAA,SAAK,CAAKE,EAAA,YAD/B5B,EAAA,GAAAC,EASS,UAAA;;IAPP,MAAK;IACL,OAAM;IACL,cAAYE,EAAA0B,CAAA,CAAC,CAAA,OAAA;IACb,aAAS,AAAAW,EAAA,OAAApC,QAAV,CAAA,GAAkB,CAAA,SAAA,CAAA;IACjB,SAAO+B;G,IAER7B,EAAkBC,GAAA,EAAX,MAAK,IAAG,CAAA,C;GAEDqB,EAAA,a,aAAhB5B,EAAA,GAAAS,EAAoGC,GAAA;;IAAxE,MAAK;IAAU,UAAUkB,EAAA;;IAAU,SAAAjB,QAA2B,CAAxBC,EAAAC,EAAAe,EAAA,UAAUzB,EAAA0B,CAAA,CAAC,CAAA,QAAA,CAAA,GAAA,CAAA,C"}

package/dist/components/SearchResults/ESearchResults.js.map

@@ -1 +1 @@
-{"version":3,"file":"ESearchResults.js","names":["_sfc_main","ESearchResults_vue_vue_type_script_setup_true_lang_default","ESearchResults_default"],"sources":["../../../src/components/SearchResults/ESearchResults.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, type Component } from \"vue\";\nimport EMatchHighlight from \"../Combobox/matchHighlight.js\";\nimport \"../../styles/base.css\";\nimport \"../Select/panel.css\";\n\nexport interface SearchResultItem {\n  /** The title of the result. */\n  label: string;\n  /** A muted line under the title, such as the section it belongs to. */\n  description?: string;\n  /** Where it goes. */\n  href?: string;\n  /** A router location, passed to `linkComponent` as `to` (for `RouterLink`). */\n  to?: unknown;\n}\n\nconst props = withDefaults(\n  defineProps<{\n    /** The results, best first: `{ label, description?, href?, to? }`. With no `href` or `to` a link goes to `#`. */\n    items: SearchResultItem[];\n    /** The accessible name of the list, such as \"Search results\". */\n    label: string;\n    /** Shown when there are no results, such as `Nothing found for \"tax\"`. Leave it out to show nothing at all, for example before anyone has typed. */\n    emptyText?: string;\n    /** The text that was searched for: its first match in each title and description is marked, as in `ECombobox` options. */\n    query?: string;\n    /** What renders each link: `\"a\"` by default, or `RouterLink` (or any component that takes `href` or `to` and a default slot). Give items `to`; it receives `to` or `href` and the class `e-opt`. */\n    linkComponent?: string | Component;\n  }>(),\n  { linkComponent: \"a\" },\n);\n\nconst emit = defineEmits<{\n  /** The person opened a result, by click or Enter. Call `event.preventDefault()` to handle the navigation yourself. */\n  select: [item: SearchResultItem, event: MouseEvent];\n  /** ArrowUp was pressed on the first result: move focus back to your search box. */\n  edge: [];\n}>();\n\nconst root = ref<HTMLElement | null>(null);\nconst needle = computed(() => (props.query ?? \"\").trim().toLowerCase());\n\nconst linkAttrs = (item: SearchResultItem) => (item.to !== undefined ? { to: item.to } : { href: item.href ?? \"#\" });\n\nconst links = () => [...(root.value?.querySelectorAll<HTMLElement>(\".e-opt\") ?? [])];\n\nfunction focusFirst() {\n  links()[0]?.focus();\n}\n\nfunction focus() {\n  const all = links();\n  (all.find((l) => l.contains(document.activeElement)) ?? all[0])?.focus();\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n  if (e.key !== \"ArrowDown\" && e.key !== \"ArrowUp\") return;\n  const all = links();\n  const at = all.findIndex((l) => l === document.activeElement || l.contains(document.activeElement));\n  e.preventDefault();\n  if (e.key === \"ArrowDown\") all[Math.min(at + 1, all.length - 1)]?.focus();\n  else if (at <= 0) emit(\"edge\");\n  else all[at - 1]?.focus();\n}\n\nfunction onClick(item: SearchResultItem, e: MouseEvent) {\n  if (e.button !== 0 || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;\n  emit(\"select\", item, e);\n}\n\ndefineExpose({ focus, focusFirst });\n</script>\n\n<template>\n  <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n  <div v-if=\"items.length || emptyText\" ref=\"root\" class=\"e-results\" @keydown=\"onKeydown\">\n    <ul v-if=\"items.length\" class=\"e-results-list\" :aria-label=\"label\">\n      <li v-for=\"(item, i) in items\" :key=\"i\">\n        <component :is=\"linkComponent\" class=\"e-opt\" v-bind=\"linkAttrs(item)\" @click=\"onClick(item, $event)\">\n          <span class=\"e-opt-text\">\n            <span class=\"e-opt-label\"><EMatchHighlight :text=\"item.label\" :query=\"needle\" /></span>\n            <span v-if=\"item.description\" class=\"e-opt-desc\">\n              <EMatchHighlight :text=\"item.description\" :query=\"needle\" />\n            </span>\n          </span>\n        </component>\n      </li>\n    </ul>\n    <p v-else class=\"e-opt-status\">{{ emptyText }}</p>\n  </div>\n</template>\n\n<style>\n@layer e.controls {\n  .e-results {\n    max-height: min(24rem, 50vh);\n    min-height: 3rem;\n    overflow-y: auto;\n    padding: var(--e-space-1);\n    border-radius: var(--e-radius-md);\n    box-shadow: var(--e-edge);\n    outline: var(--e-stroke-card) solid var(--e-border-strong);\n    outline-offset: 0;\n    color: var(--e-ink);\n  }\n\n  .e-results-list {\n    display: grid;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .e-results .e-opt {\n    color: inherit;\n    text-decoration: none;\n  }\n\n  .e-results .e-opt:hover,\n  .e-results .e-opt:focus-visible {\n    background: var(--e-surface-hover);\n    box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-border-strong);\n    outline: var(--e-stroke-hair) solid var(--e-border-strong);\n    outline-offset: calc(-1 * var(--e-stroke-hair));\n  }\n\n  .e-results .e-opt:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: calc(-1 * var(--e-stroke-focus));\n  }\n\n  @media (forced-colors: active) {\n    .e-results .e-opt:hover,\n    .e-results .e-opt:focus-visible {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ESearchResults.js","names":["_sfc_main","ESearchResults_vue_vue_type_script_setup_true_lang_default","ESearchResults_default"],"sources":["../../../src/components/SearchResults/ESearchResults.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, type Component } from \"vue\";\nimport EMatchHighlight from \"../Combobox/matchHighlight.js\";\nimport \"../../styles/base.css\";\nimport \"../Select/panel.css\";\n\nexport interface SearchResultItem {\n  /** The title of the result. */\n  label: string;\n  /** A muted line under the title, such as the section it belongs to. */\n  description?: string;\n  /** Where it goes. */\n  href?: string;\n  /** A router location, passed to `linkComponent` as `to` (for `RouterLink`). */\n  to?: unknown;\n}\n\nconst props = withDefaults(\n  defineProps<{\n    /** The results, best first: `{ label, description?, href?, to? }`. With no `href` or `to` a link goes to `#`. */\n    items: SearchResultItem[];\n    /** The accessible name of the list, such as \"Search results\". */\n    label: string;\n    /** Shown when there are no results, such as `Nothing found for \"tax\"`. Leave it out to show nothing at all, for example before anyone has typed. */\n    emptyText?: string;\n    /** The text that was searched for: its first match in each title and description is marked, as in `ECombobox` options. */\n    query?: string;\n    /** What renders each link: `\"a\"` by default, or `RouterLink` (or any component that takes `href` or `to` and a default slot). Give items `to`; it receives `to` or `href` and the class `e-opt`. */\n    linkComponent?: string | Component;\n  }>(),\n  { linkComponent: \"a\" },\n);\n\nconst emit = defineEmits<{\n  /** The person opened a result, by click or Enter. Call `event.preventDefault()` to handle the navigation yourself. */\n  select: [item: SearchResultItem, event: MouseEvent];\n  /** ArrowUp was pressed on the first result: move focus back to your search box. */\n  edge: [];\n}>();\n\nconst root = ref<HTMLElement | null>(null);\nconst needle = computed(() => (props.query ?? \"\").trim().toLowerCase());\n\nconst linkAttrs = (item: SearchResultItem) => (item.to !== undefined ? { to: item.to } : { href: item.href ?? \"#\" });\n\nconst links = () => [...(root.value?.querySelectorAll<HTMLElement>(\".e-opt\") ?? [])];\n\nfunction focusFirst() {\n  links()[0]?.focus();\n}\n\nfunction focus() {\n  const all = links();\n  (all.find((l) => l.contains(document.activeElement)) ?? all[0])?.focus();\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n  if (e.key !== \"ArrowDown\" && e.key !== \"ArrowUp\") return;\n  const all = links();\n  const at = all.findIndex((l) => l === document.activeElement || l.contains(document.activeElement));\n  e.preventDefault();\n  if (e.key === \"ArrowDown\") all[Math.min(at + 1, all.length - 1)]?.focus();\n  else if (at <= 0) emit(\"edge\");\n  else all[at - 1]?.focus();\n}\n\nfunction onClick(item: SearchResultItem, e: MouseEvent) {\n  if (e.button !== 0 || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;\n  emit(\"select\", item, e);\n}\n\ndefineExpose({ focus, focusFirst });\n</script>\n\n<template>\n  <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n  <div v-if=\"items.length || emptyText\" ref=\"root\" class=\"e-results\" @keydown=\"onKeydown\">\n    <ul v-if=\"items.length\" class=\"e-results-list\" :aria-label=\"label\">\n      <li v-for=\"(item, i) in items\" :key=\"i\">\n        <component :is=\"linkComponent\" class=\"e-opt\" v-bind=\"linkAttrs(item)\" @click=\"onClick(item, $event)\">\n          <span class=\"e-opt-text\">\n            <span class=\"e-opt-label\"><EMatchHighlight :text=\"item.label\" :query=\"needle\" /></span>\n            <span v-if=\"item.description\" class=\"e-opt-desc\">\n              <EMatchHighlight :text=\"item.description\" :query=\"needle\" />\n            </span>\n          </span>\n        </component>\n      </li>\n    </ul>\n    <p v-else class=\"e-opt-status\">{{ emptyText }}</p>\n  </div>\n</template>\n\n<style>\n@layer e.controls {\n  .e-results {\n    max-height: min(24rem, 50vh);\n    min-height: 3rem;\n    overflow-y: auto;\n    padding: var(--e-space-1);\n    border-radius: var(--e-radius-md);\n    box-shadow: var(--e-edge);\n    color: var(--e-ink);\n  }\n\n  .e-results-list {\n    display: grid;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .e-results .e-opt {\n    color: inherit;\n    text-decoration: none;\n  }\n\n  .e-results .e-opt:hover,\n  .e-results .e-opt:focus-visible {\n    background: var(--e-surface-hover);\n    box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-border-strong);\n  }\n\n  .e-results .e-opt:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: calc(-1 * var(--e-stroke-focus));\n  }\n\n  @media (forced-colors: active) {\n    .e-results .e-opt:hover,\n    .e-results .e-opt:focus-visible {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/SearchResults/ESearchResults.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ESearchResults.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_renderList","_createBlock","_resolveDynamicComponent","_mergeProps","_withCtx","_createElementVNode","_createVNode","_unref","EMatchHighlight","_createCommentVNode","_toDisplayString","matchHighlight_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","ESearchResults_vue_vue_type_script_setup_true_lang_default","__expose","__emit","props","__props","emit","root","ref","needle","computed","linkAttrs","item","links","focusFirst","focus","all","l","onKeydown","at","onClick","e","openBlock","createElementBlock","Fragment","renderList","i","createBlock","resolveDynamicComponent","mergeProps","$event","withCtx","createElementVNode","createVNode","unref","createCommentVNode","toDisplayString"],"sources":["../../../src/components/SearchResults/ESearchResults.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, type Component } from \"vue\";\nimport EMatchHighlight from \"../Combobox/matchHighlight.js\";\nimport \"../../styles/base.css\";\nimport \"../Select/panel.css\";\n\nexport interface SearchResultItem {\n  /** The title of the result. */\n  label: string;\n  /** A muted line under the title, such as the section it belongs to. */\n  description?: string;\n  /** Where it goes. */\n  href?: string;\n  /** A router location, passed to `linkComponent` as `to` (for `RouterLink`). */\n  to?: unknown;\n}\n\nconst props = withDefaults(\n  defineProps<{\n    /** The results, best first: `{ label, description?, href?, to? }`. With no `href` or `to` a link goes to `#`. */\n    items: SearchResultItem[];\n    /** The accessible name of the list, such as \"Search results\". */\n    label: string;\n    /** Shown when there are no results, such as `Nothing found for \"tax\"`. Leave it out to show nothing at all, for example before anyone has typed. */\n    emptyText?: string;\n    /** The text that was searched for: its first match in each title and description is marked, as in `ECombobox` options. */\n    query?: string;\n    /** What renders each link: `\"a\"` by default, or `RouterLink` (or any component that takes `href` or `to` and a default slot). Give items `to`; it receives `to` or `href` and the class `e-opt`. */\n    linkComponent?: string | Component;\n  }>(),\n  { linkComponent: \"a\" },\n);\n\nconst emit = defineEmits<{\n  /** The person opened a result, by click or Enter. Call `event.preventDefault()` to handle the navigation yourself. */\n  select: [item: SearchResultItem, event: MouseEvent];\n  /** ArrowUp was pressed on the first result: move focus back to your search box. */\n  edge: [];\n}>();\n\nconst root = ref<HTMLElement | null>(null);\nconst needle = computed(() => (props.query ?? \"\").trim().toLowerCase());\n\nconst linkAttrs = (item: SearchResultItem) => (item.to !== undefined ? { to: item.to } : { href: item.href ?? \"#\" });\n\nconst links = () => [...(root.value?.querySelectorAll<HTMLElement>(\".e-opt\") ?? [])];\n\nfunction focusFirst() {\n  links()[0]?.focus();\n}\n\nfunction focus() {\n  const all = links();\n  (all.find((l) => l.contains(document.activeElement)) ?? all[0])?.focus();\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n  if (e.key !== \"ArrowDown\" && e.key !== \"ArrowUp\") return;\n  const all = links();\n  const at = all.findIndex((l) => l === document.activeElement || l.contains(document.activeElement));\n  e.preventDefault();\n  if (e.key === \"ArrowDown\") all[Math.min(at + 1, all.length - 1)]?.focus();\n  else if (at <= 0) emit(\"edge\");\n  else all[at - 1]?.focus();\n}\n\nfunction onClick(item: SearchResultItem, e: MouseEvent) {\n  if (e.button !== 0 || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;\n  emit(\"select\", item, e);\n}\n\ndefineExpose({ focus, focusFirst });\n</script>\n\n<template>\n  <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n  <div v-if=\"items.length || emptyText\" ref=\"root\" class=\"e-results\" @keydown=\"onKeydown\">\n    <ul v-if=\"items.length\" class=\"e-results-list\" :aria-label=\"label\">\n      <li v-for=\"(item, i) in items\" :key=\"i\">\n        <component :is=\"linkComponent\" class=\"e-opt\" v-bind=\"linkAttrs(item)\" @click=\"onClick(item, $event)\">\n          <span class=\"e-opt-text\">\n            <span class=\"e-opt-label\"><EMatchHighlight :text=\"item.label\" :query=\"needle\" /></span>\n            <span v-if=\"item.description\" class=\"e-opt-desc\">\n              <EMatchHighlight :text=\"item.description\" :query=\"needle\" />\n            </span>\n          </span>\n        </component>\n      </li>\n    </ul>\n    <p v-else class=\"e-opt-status\">{{ emptyText }}</p>\n  </div>\n</template>\n\n<style>\n@layer e.controls {\n  .e-results {\n    max-height: min(24rem, 50vh);\n    min-height: 3rem;\n    overflow-y: auto;\n    padding: var(--e-space-1);\n    border-radius: var(--e-radius-md);\n    box-shadow: var(--e-edge);\n    outline: var(--e-stroke-card) solid var(--e-border-strong);\n    outline-offset: 0;\n    color: var(--e-ink);\n  }\n\n  .e-results-list {\n    display: grid;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .e-results .e-opt {\n    color: inherit;\n    text-decoration: none;\n  }\n\n  .e-results .e-opt:hover,\n  .e-results .e-opt:focus-visible {\n    background: var(--e-surface-hover);\n    box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-border-strong);\n    outline: var(--e-stroke-hair) solid var(--e-border-strong);\n    outline-offset: calc(-1 * var(--e-stroke-hair));\n  }\n\n  .e-results .e-opt:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: calc(-1 * var(--e-stroke-focus));\n  }\n\n  @media (forced-colors: active) {\n    .e-results .e-opt:hover,\n    .e-results .e-opt:focus-visible {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAiBA,IAAMuB,IAAQC,GAgBRC,IAAOH,GAOPI,IAAOC,EAAwB,IAAI,GACnCC,IAASC,SAAgBN,EAAM,SAAS,GAAA,CAAI,KAAK,CAAC,CAAC,YAAY,CAAC,GAEhEO,KAAa,MAA4BC,EAAK,OAAO,KAAA,IAA8B,EAAE,MAAMA,EAAK,QAAQ,IAAI,IAA3C,EAAE,IAAIA,EAAK,GAAG,GAE/EC,UAAc,CAAC,GAAIN,EAAK,OAAO,iBAA8B,QAAQ,KAAK,CAAC,CAAE;EAEnF,SAASO,IAAa;GACpB,EAAM,CAAC,CAAC,EAAE,EAAE,MAAM;EACpB;EAEA,SAASC,IAAQ;GACf,IAAMC,IAAMH,EAAM;GAClB,CAACG,EAAI,MAAM,MAAMC,EAAE,SAAS,SAAS,aAAa,CAAC,KAAKD,EAAI,GAAA,EAAK,MAAM;EACzE;EAEA,SAASE,EAAU,GAAkB;GACnC,IAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,WAAW;GAClD,IAAMF,IAAMH,EAAM,GACZM,IAAKH,EAAI,WAAW,MAAMC,MAAM,SAAS,iBAAiBA,EAAE,SAAS,SAAS,aAAa,CAAC;GAElG,AADA,EAAE,eAAe,GACb,EAAE,QAAQ,cAAaD,EAAI,KAAK,IAAIG,IAAK,GAAGH,EAAI,SAAS,CAAC,EAAE,EAAE,MAAM,IAC/DG,KAAM,IAAGb,EAAK,MAAM,IACxBU,EAAIG,IAAK,EAAE,EAAE,MAAM;EAC1B;EAEA,SAASC,EAAQ,GAAwB,GAAe;GACtD,AAAIC,EAAE,WAAW,KAAKA,EAAE,WAAWA,EAAE,WAAWA,EAAE,YAAYA,EAAE,UAChEf,EAAK,UAAUM,GAAMS,CAAC;EACxB;E,OAEAnB,EAAa;GAAE;GAAO;EAAW,CAAC,I,SAKrBG,EAAA,MAAM,UAAUA,EAAA,aAA3BxB,EAAA,GAAAC,EAcM,OAAA;;GAdoC,SAAA;GAAJ,KAAIyB;GAAO,OAAM;GAAsB;E,IACjEF,EAAA,MAAM,UAAhBxB,EAAA,GAAAC,EAWK,MAAA;;GAXmB,OAAM;GAAkB,cAAYuB,EAAA;E,KAC1DxB,EAAA,EAAA,GAAAC,EASKC,GAAA,MAAAC,EATmBqB,EAAA,QAAZ,GAAM,OAAlBxB,EAAA,GAAAC,EASK,MAAA,EAT2B,KAAK4C,EAAC,GAAA,EACpC7C,EAAA,GAAAI,EAOYC,EAPImB,EAAA,aAAa,GAA7BlB,EAOY,EAPmB,OAAM,QAAO,GAAA,EAAA,SAAA,GAAA,GAASwB,EAAUC,CAAI,GAAA,EAAI,UAAK,MAAEQ,EAAQR,GAAMkB,CAAM,E;GAChG,SAAA1C,QAKO,CALPC,EAKO,QALPQ,GAKO,CAJLR,EAAuF,QAAvFS,GAAuF,CAA7DR,EAAsDC,EAAAC,CAAA,GAAA;IAApC,MAAMoB,EAAK;IAAQ,OAAOH,EAAA;G,kCAC1DG,EAAK,eAAjB/B,EAAA,GAAAC,EAEO,QAFPiB,GAEO,CADLT,EAA4DC,EAAAC,CAAA,GAAA;IAA1C,MAAMoB,EAAK;IAAc,OAAOH,EAAA;;;E,8CAM5D5B,EAAA,GAAAC,EAAkD,KAAlDkB,GAAkDN,EAAhBW,EAAA,SAAS,GAAA,CAAA,E"}
+{"version":3,"file":"ESearchResults.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_renderList","_createBlock","_resolveDynamicComponent","_mergeProps","_withCtx","_createElementVNode","_createVNode","_unref","EMatchHighlight","_createCommentVNode","_toDisplayString","matchHighlight_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","ESearchResults_vue_vue_type_script_setup_true_lang_default","__expose","__emit","props","__props","emit","root","ref","needle","computed","linkAttrs","item","links","focusFirst","focus","all","l","onKeydown","at","onClick","e","openBlock","createElementBlock","Fragment","renderList","i","createBlock","resolveDynamicComponent","mergeProps","$event","withCtx","createElementVNode","createVNode","unref","createCommentVNode","toDisplayString"],"sources":["../../../src/components/SearchResults/ESearchResults.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, type Component } from \"vue\";\nimport EMatchHighlight from \"../Combobox/matchHighlight.js\";\nimport \"../../styles/base.css\";\nimport \"../Select/panel.css\";\n\nexport interface SearchResultItem {\n  /** The title of the result. */\n  label: string;\n  /** A muted line under the title, such as the section it belongs to. */\n  description?: string;\n  /** Where it goes. */\n  href?: string;\n  /** A router location, passed to `linkComponent` as `to` (for `RouterLink`). */\n  to?: unknown;\n}\n\nconst props = withDefaults(\n  defineProps<{\n    /** The results, best first: `{ label, description?, href?, to? }`. With no `href` or `to` a link goes to `#`. */\n    items: SearchResultItem[];\n    /** The accessible name of the list, such as \"Search results\". */\n    label: string;\n    /** Shown when there are no results, such as `Nothing found for \"tax\"`. Leave it out to show nothing at all, for example before anyone has typed. */\n    emptyText?: string;\n    /** The text that was searched for: its first match in each title and description is marked, as in `ECombobox` options. */\n    query?: string;\n    /** What renders each link: `\"a\"` by default, or `RouterLink` (or any component that takes `href` or `to` and a default slot). Give items `to`; it receives `to` or `href` and the class `e-opt`. */\n    linkComponent?: string | Component;\n  }>(),\n  { linkComponent: \"a\" },\n);\n\nconst emit = defineEmits<{\n  /** The person opened a result, by click or Enter. Call `event.preventDefault()` to handle the navigation yourself. */\n  select: [item: SearchResultItem, event: MouseEvent];\n  /** ArrowUp was pressed on the first result: move focus back to your search box. */\n  edge: [];\n}>();\n\nconst root = ref<HTMLElement | null>(null);\nconst needle = computed(() => (props.query ?? \"\").trim().toLowerCase());\n\nconst linkAttrs = (item: SearchResultItem) => (item.to !== undefined ? { to: item.to } : { href: item.href ?? \"#\" });\n\nconst links = () => [...(root.value?.querySelectorAll<HTMLElement>(\".e-opt\") ?? [])];\n\nfunction focusFirst() {\n  links()[0]?.focus();\n}\n\nfunction focus() {\n  const all = links();\n  (all.find((l) => l.contains(document.activeElement)) ?? all[0])?.focus();\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n  if (e.key !== \"ArrowDown\" && e.key !== \"ArrowUp\") return;\n  const all = links();\n  const at = all.findIndex((l) => l === document.activeElement || l.contains(document.activeElement));\n  e.preventDefault();\n  if (e.key === \"ArrowDown\") all[Math.min(at + 1, all.length - 1)]?.focus();\n  else if (at <= 0) emit(\"edge\");\n  else all[at - 1]?.focus();\n}\n\nfunction onClick(item: SearchResultItem, e: MouseEvent) {\n  if (e.button !== 0 || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;\n  emit(\"select\", item, e);\n}\n\ndefineExpose({ focus, focusFirst });\n</script>\n\n<template>\n  <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n  <div v-if=\"items.length || emptyText\" ref=\"root\" class=\"e-results\" @keydown=\"onKeydown\">\n    <ul v-if=\"items.length\" class=\"e-results-list\" :aria-label=\"label\">\n      <li v-for=\"(item, i) in items\" :key=\"i\">\n        <component :is=\"linkComponent\" class=\"e-opt\" v-bind=\"linkAttrs(item)\" @click=\"onClick(item, $event)\">\n          <span class=\"e-opt-text\">\n            <span class=\"e-opt-label\"><EMatchHighlight :text=\"item.label\" :query=\"needle\" /></span>\n            <span v-if=\"item.description\" class=\"e-opt-desc\">\n              <EMatchHighlight :text=\"item.description\" :query=\"needle\" />\n            </span>\n          </span>\n        </component>\n      </li>\n    </ul>\n    <p v-else class=\"e-opt-status\">{{ emptyText }}</p>\n  </div>\n</template>\n\n<style>\n@layer e.controls {\n  .e-results {\n    max-height: min(24rem, 50vh);\n    min-height: 3rem;\n    overflow-y: auto;\n    padding: var(--e-space-1);\n    border-radius: var(--e-radius-md);\n    box-shadow: var(--e-edge);\n    color: var(--e-ink);\n  }\n\n  .e-results-list {\n    display: grid;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .e-results .e-opt {\n    color: inherit;\n    text-decoration: none;\n  }\n\n  .e-results .e-opt:hover,\n  .e-results .e-opt:focus-visible {\n    background: var(--e-surface-hover);\n    box-shadow: inset 0 0 0 var(--e-stroke-hair) var(--e-border-strong);\n  }\n\n  .e-results .e-opt:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: calc(-1 * var(--e-stroke-focus));\n  }\n\n  @media (forced-colors: active) {\n    .e-results .e-opt:hover,\n    .e-results .e-opt:focus-visible {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAiBA,IAAMuB,IAAQC,GAgBRC,IAAOH,GAOPI,IAAOC,EAAwB,IAAI,GACnCC,IAASC,SAAgBN,EAAM,SAAS,GAAA,CAAI,KAAK,CAAC,CAAC,YAAY,CAAC,GAEhEO,KAAa,MAA4BC,EAAK,OAAO,KAAA,IAA8B,EAAE,MAAMA,EAAK,QAAQ,IAAI,IAA3C,EAAE,IAAIA,EAAK,GAAG,GAE/EC,UAAc,CAAC,GAAIN,EAAK,OAAO,iBAA8B,QAAQ,KAAK,CAAC,CAAE;EAEnF,SAASO,IAAa;GACpB,EAAM,CAAC,CAAC,EAAE,EAAE,MAAM;EACpB;EAEA,SAASC,IAAQ;GACf,IAAMC,IAAMH,EAAM;GAClB,CAACG,EAAI,MAAM,MAAMC,EAAE,SAAS,SAAS,aAAa,CAAC,KAAKD,EAAI,GAAA,EAAK,MAAM;EACzE;EAEA,SAASE,EAAU,GAAkB;GACnC,IAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,WAAW;GAClD,IAAMF,IAAMH,EAAM,GACZM,IAAKH,EAAI,WAAW,MAAMC,MAAM,SAAS,iBAAiBA,EAAE,SAAS,SAAS,aAAa,CAAC;GAElG,AADA,EAAE,eAAe,GACb,EAAE,QAAQ,cAAaD,EAAI,KAAK,IAAIG,IAAK,GAAGH,EAAI,SAAS,CAAC,EAAE,EAAE,MAAM,IAC/DG,KAAM,IAAGb,EAAK,MAAM,IACxBU,EAAIG,IAAK,EAAE,EAAE,MAAM;EAC1B;EAEA,SAASC,EAAQ,GAAwB,GAAe;GACtD,AAAIC,EAAE,WAAW,KAAKA,EAAE,WAAWA,EAAE,WAAWA,EAAE,YAAYA,EAAE,UAChEf,EAAK,UAAUM,GAAMS,CAAC;EACxB;E,OAEAnB,EAAa;GAAE;GAAO;EAAW,CAAC,I,SAKrBG,EAAA,MAAM,UAAUA,EAAA,aAA3BxB,EAAA,GAAAC,EAcM,OAAA;;GAdoC,SAAA;GAAJ,KAAIyB;GAAO,OAAM;GAAsB;E,IACjEF,EAAA,MAAM,UAAhBxB,EAAA,GAAAC,EAWK,MAAA;;GAXmB,OAAM;GAAkB,cAAYuB,EAAA;E,KAC1DxB,EAAA,EAAA,GAAAC,EASKC,GAAA,MAAAC,EATmBqB,EAAA,QAAZ,GAAM,OAAlBxB,EAAA,GAAAC,EASK,MAAA,EAT2B,KAAK4C,EAAC,GAAA,EACpC7C,EAAA,GAAAI,EAOYC,EAPImB,EAAA,aAAa,GAA7BlB,EAOY,EAPmB,OAAM,QAAO,GAAA,EAAA,SAAA,GAAA,GAASwB,EAAUC,CAAI,GAAA,EAAI,UAAK,MAAEQ,EAAQR,GAAMkB,CAAM,E;GAChG,SAAA1C,QAKO,CALPC,EAKO,QALPQ,GAKO,CAJLR,EAAuF,QAAvFS,GAAuF,CAA7DR,EAAsDC,EAAAC,CAAA,GAAA;IAApC,MAAMoB,EAAK;IAAQ,OAAOH,EAAA;G,kCAC1DG,EAAK,eAAjB/B,EAAA,GAAAC,EAEO,QAFPiB,GAEO,CADLT,EAA4DC,EAAAC,CAAA,GAAA;IAA1C,MAAMoB,EAAK;IAAc,OAAOH,EAAA;;;E,8CAM5D5B,EAAA,GAAAC,EAAkD,KAAlDkB,GAAkDN,EAAhBW,EAAA,SAAS,GAAA,CAAA,E"}

package/dist/components/Segmented/ESegmented.js.map

@@ -1 +1 @@
-{"version":3,"file":"ESegmented.js","names":["_sfc_main","ESegmented_vue_vue_type_script_setup_true_lang_default","ESegmented_default"],"sources":["../../../src/components/Segmented/ESegmented.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { IconProp } from \"../../icons/types.js\";\n\nexport interface SegmentedOption {\n  value: string;\n  label: string;\n  /** An icon before the label. */\n  icon?: IconProp;\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EFieldMessage from \"../Field/EFieldMessage.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** Read by screen readers as the name of the group. */\n  label: string;\n  /** Two to five. A string is both value and label. `SegmentedOption` is `{ value, label, icon?, disabled? }`. */\n  options: (string | SegmentedOption)[];\n  /** Help under the control, linked with `aria-describedby`. */\n  hint?: string;\n  /** What to fix. Replaces the hint and is announced. */\n  error?: string;\n  /** Adds the word \"Optional\" to the group's accessible name; nothing is shown. Flag whichever is rarer. */\n  optional?: boolean;\n  /** Disables every option. */\n  disabled?: boolean;\n  /** The name the radios share, submitted with a form. @default generated */\n  name?: string;\n}>();\n\n/** The active value. @default first option */\nconst model = defineModel<string>();\n\nconst t = useMessages();\nconst name = useUid(() => props.name);\nconst hintId = computed(() => `${name.value}-hint`);\nconst options = computed<SegmentedOption[]>(() =>\n  props.options.map((o) => (typeof o === \"string\" ? { value: o, label: o } : o)),\n);\nconst current = computed(() => model.value ?? options.value[0]?.value);\nconst attrs = useFieldAttrs();\nconst groupAttrs = () => ({\n  role: \"radiogroup\",\n  \"aria-label\": props.optional ? `${props.label}, ${t(\"optional\")}` : props.label,\n  \"aria-invalid\": props.error ? (\"true\" as const) : undefined,\n  ...attrs.input(props.error || props.hint ? hintId.value : undefined),\n});\n</script>\n\n<template>\n  <div v-if=\"hint || error\" class=\"e-seg-field\" :class=\"attrs.wrapper().class\" :style=\"attrs.wrapper().style\">\n    <div class=\"e-seg\" v-bind=\"groupAttrs()\">\n      <label v-for=\"o in options\" :key=\"o.value\" class=\"e-seg-opt\">\n        <input\n          type=\"radio\"\n          class=\"e-seg-input\"\n          :name=\"name\"\n          :value=\"o.value\"\n          :checked=\"current === o.value\"\n          :disabled=\"o.disabled || disabled\"\n          @change=\"model = o.value\"\n        />\n        <span class=\"e-seg-text\"><EIcon v-if=\"o.icon\" :name=\"o.icon\" />{{ o.label }}</span>\n      </label>\n    </div>\n    <EFieldMessage :id=\"hintId\" :error=\"error\" :hint=\"hint\" />\n  </div>\n  <div v-else class=\"e-seg\" :class=\"attrs.wrapper().class\" :style=\"attrs.wrapper().style\" v-bind=\"groupAttrs()\">\n    <label v-for=\"o in options\" :key=\"o.value\" class=\"e-seg-opt\">\n      <input\n        type=\"radio\"\n        class=\"e-seg-input\"\n        :name=\"name\"\n        :value=\"o.value\"\n        :checked=\"current === o.value\"\n        :disabled=\"o.disabled || disabled\"\n        @change=\"model = o.value\"\n      />\n      <span class=\"e-seg-text\"><EIcon v-if=\"o.icon\" :name=\"o.icon\" />{{ o.label }}</span>\n    </label>\n  </div>\n</template>\n\n<style>\n@layer e.controls {\n  .e-seg {\n    display: inline-flex;\n    height: var(--e-control-height);\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-border-strong);\n    overflow: hidden;\n    max-width: 100%;\n    width: fit-content;\n  }\n\n  .e-seg-opt {\n    position: relative;\n    display: inline-flex;\n    cursor: pointer;\n  }\n\n  .e-seg-opt + .e-seg-opt {\n    border-inline-start: var(--e-stroke-hair) solid var(--e-border-strong);\n  }\n\n  .e-seg-input {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    margin: 0;\n    cursor: pointer;\n  }\n\n  .e-seg-text {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--e-space-2);\n    min-width: 4rem;\n    padding: 0 var(--e-space-4);\n    background: var(--e-surface);\n    font: 500 var(--e-text-md)/1 var(--e-font-sans);\n    white-space: nowrap;\n    transition: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-seg-opt:hover .e-seg-text {\n    background: var(--e-surface-hover);\n  }\n\n  .e-seg-input:checked + .e-seg-text {\n    background: var(--e-primary);\n    box-shadow: inset 0 var(--e-depth) 0 0 color-mix(in srgb, var(--e-primary), var(--e-shade-slab));\n    color: var(--e-on-primary);\n    font-weight: 600;\n  }\n\n  .e-seg-input:focus-visible + .e-seg-text {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: calc(-1 * var(--e-space-1));\n  }\n\n  .e-seg-input:disabled + .e-seg-text {\n    color: var(--e-muted);\n    cursor: not-allowed;\n  }\n\n  .e-seg-opt:has(:disabled):hover .e-seg-text {\n    background: transparent;\n  }\n\n  .e-seg-input:disabled:checked + .e-seg-text,\n  .e-seg-opt:has(:disabled:checked):hover .e-seg-text {\n    background: var(--e-surface-hover);\n    color: var(--e-ink);\n    box-shadow: inset 0 calc(-1 * var(--e-depth)) 0 0 var(--e-border-strong);\n  }\n\n  .e-seg-field {\n    display: grid;\n    gap: var(--e-space-2);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-seg-text {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-seg-input:checked + .e-seg-text {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ESegmented.js","names":["_sfc_main","ESegmented_vue_vue_type_script_setup_true_lang_default","ESegmented_default"],"sources":["../../../src/components/Segmented/ESegmented.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { IconProp } from \"../../icons/types.js\";\n\nexport interface SegmentedOption {\n  value: string;\n  label: string;\n  /** An icon before the label. */\n  icon?: IconProp;\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EFieldMessage from \"../Field/EFieldMessage.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** Read by screen readers as the name of the group. */\n  label: string;\n  /** Two to five. A string is both value and label. `SegmentedOption` is `{ value, label, icon?, disabled? }`. */\n  options: (string | SegmentedOption)[];\n  /** Help under the control, linked with `aria-describedby`. */\n  hint?: string;\n  /** What to fix. Replaces the hint and is announced. */\n  error?: string;\n  /** Adds the word \"Optional\" to the group's accessible name; nothing is shown. Flag whichever is rarer. */\n  optional?: boolean;\n  /** Disables every option. */\n  disabled?: boolean;\n  /** The name the radios share, submitted with a form. @default generated */\n  name?: string;\n}>();\n\n/** The active value. @default first option */\nconst model = defineModel<string>();\n\nconst t = useMessages();\nconst name = useUid(() => props.name);\nconst hintId = computed(() => `${name.value}-hint`);\nconst options = computed<SegmentedOption[]>(() =>\n  props.options.map((o) => (typeof o === \"string\" ? { value: o, label: o } : o)),\n);\nconst current = computed(() => model.value ?? options.value[0]?.value);\nconst attrs = useFieldAttrs();\nconst groupAttrs = () => ({\n  role: \"radiogroup\",\n  \"aria-label\": props.optional ? `${props.label}, ${t(\"optional\")}` : props.label,\n  \"aria-invalid\": props.error ? (\"true\" as const) : undefined,\n  ...attrs.input(props.error || props.hint ? hintId.value : undefined),\n});\n</script>\n\n<template>\n  <div v-if=\"hint || error\" class=\"e-seg-field\" :class=\"attrs.wrapper().class\" :style=\"attrs.wrapper().style\">\n    <div class=\"e-seg\" v-bind=\"groupAttrs()\">\n      <label v-for=\"o in options\" :key=\"o.value\" class=\"e-seg-opt\">\n        <input\n          type=\"radio\"\n          class=\"e-seg-input\"\n          :name=\"name\"\n          :value=\"o.value\"\n          :checked=\"current === o.value\"\n          :disabled=\"o.disabled || disabled\"\n          @change=\"model = o.value\"\n        />\n        <span class=\"e-seg-text\"><EIcon v-if=\"o.icon\" :name=\"o.icon\" />{{ o.label }}</span>\n      </label>\n    </div>\n    <EFieldMessage :id=\"hintId\" :error=\"error\" :hint=\"hint\" />\n  </div>\n  <div v-else class=\"e-seg\" :class=\"attrs.wrapper().class\" :style=\"attrs.wrapper().style\" v-bind=\"groupAttrs()\">\n    <label v-for=\"o in options\" :key=\"o.value\" class=\"e-seg-opt\">\n      <input\n        type=\"radio\"\n        class=\"e-seg-input\"\n        :name=\"name\"\n        :value=\"o.value\"\n        :checked=\"current === o.value\"\n        :disabled=\"o.disabled || disabled\"\n        @change=\"model = o.value\"\n      />\n      <span class=\"e-seg-text\"><EIcon v-if=\"o.icon\" :name=\"o.icon\" />{{ o.label }}</span>\n    </label>\n  </div>\n</template>\n\n<style>\n@layer e.controls {\n  .e-seg {\n    display: inline-flex;\n    height: var(--e-control-height);\n    border: var(--e-stroke-edge) solid var(--e-border-strong);\n    border-radius: var(--e-radius-md);\n    background: var(--e-border-strong);\n    overflow: hidden;\n    max-width: 100%;\n    width: fit-content;\n  }\n\n  .e-seg-opt {\n    position: relative;\n    display: inline-flex;\n    cursor: pointer;\n  }\n\n  .e-seg-opt + .e-seg-opt {\n    border-inline-start: var(--e-stroke-hair) solid var(--e-border-strong);\n  }\n\n  .e-seg-input {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    margin: 0;\n    cursor: pointer;\n  }\n\n  .e-seg-text {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--e-space-2);\n    min-width: 4rem;\n    padding: 0 var(--e-space-4);\n    background: var(--e-surface);\n    font: 500 var(--e-text-md)/1 var(--e-font-sans);\n    white-space: nowrap;\n    transition: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-seg-opt:hover .e-seg-text {\n    background: var(--e-surface-hover);\n  }\n\n  .e-seg-input:checked + .e-seg-text {\n    background: var(--e-primary);\n    color: var(--e-on-primary);\n    font-weight: 600;\n  }\n\n  .e-seg-input:focus-visible + .e-seg-text {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: calc(-1 * var(--e-space-1));\n  }\n\n  .e-seg-input:disabled + .e-seg-text {\n    color: var(--e-muted);\n    cursor: not-allowed;\n  }\n\n  .e-seg-opt:has(:disabled):hover .e-seg-text {\n    background: transparent;\n  }\n\n  .e-seg-input:disabled:checked + .e-seg-text,\n  .e-seg-opt:has(:disabled:checked):hover .e-seg-text {\n    background: var(--e-surface-hover);\n    color: var(--e-ink);\n  }\n\n  .e-seg-field {\n    display: grid;\n    gap: var(--e-space-2);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-seg-text {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-seg-input:checked + .e-seg-text {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Segmented/ESegmented.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ESegmented.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_createElementVNode","_mergeProps","_Fragment","_renderList","_createBlock","EIcon","_createCommentVNode","_createTextVNode","_toDisplayString","_createVNode","EFieldMessage","EIcon_default","EFieldMessage_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","ESegmented_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","props","__props","model","useModel","t","useMessages","name","useUid","hintId","computed","options","o","current","attrs","useFieldAttrs","groupAttrs","openBlock","createElementBlock","normalizeClass","unref","normalizeStyle","createElementVNode","mergeProps","Fragment","renderList","createBlock","createCommentVNode","createTextVNode","toDisplayString","createVNode"],"sources":["../../../src/components/Segmented/ESegmented.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { IconProp } from \"../../icons/types.js\";\n\nexport interface SegmentedOption {\n  value: string;\n  label: string;\n  /** An icon before the label. */\n  icon?: IconProp;\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EFieldMessage from \"../Field/EFieldMessage.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** Read by screen readers as the name of the group. */\n  label: string;\n  /** Two to five. A string is both value and label. `SegmentedOption` is `{ value, label, icon?, disabled? }`. */\n  options: (string | SegmentedOption)[];\n  /** Help under the control, linked with `aria-describedby`. */\n  hint?: string;\n  /** What to fix. Replaces the hint and is announced. */\n  error?: string;\n  /** Adds the word \"Optional\" to the group's accessible name; nothing is shown. Flag whichever is rarer. */\n  optional?: boolean;\n  /** Disables every option. */\n  disabled?: boolean;\n  /** The name the radios share, submitted with a form. @default generated */\n  name?: string;\n}>();\n\n/** The active value. @default first option */\nconst model = defineModel<string>();\n\nconst t = useMessages();\nconst name = useUid(() => props.name);\nconst hintId = computed(() => `${name.value}-hint`);\nconst options = computed<SegmentedOption[]>(() =>\n  props.options.map((o) => (typeof o === \"string\" ? { value: o, label: o } : o)),\n);\nconst current = computed(() => model.value ?? options.value[0]?.value);\nconst attrs = useFieldAttrs();\nconst groupAttrs = () => ({\n  role: \"radiogroup\",\n  \"aria-label\": props.optional ? `${props.label}, ${t(\"optional\")}` : props.label,\n  \"aria-invalid\": props.error ? (\"true\" as const) : undefined,\n  ...attrs.input(props.error || props.hint ? hintId.value : undefined),\n});\n</script>\n\n<template>\n  <div v-if=\"hint || error\" class=\"e-seg-field\" :class=\"attrs.wrapper().class\" :style=\"attrs.wrapper().style\">\n    <div class=\"e-seg\" v-bind=\"groupAttrs()\">\n      <label v-for=\"o in options\" :key=\"o.value\" class=\"e-seg-opt\">\n        <input\n          type=\"radio\"\n          class=\"e-seg-input\"\n          :name=\"name\"\n          :value=\"o.value\"\n          :checked=\"current === o.value\"\n          :disabled=\"o.disabled || disabled\"\n          @change=\"model = o.value\"\n        />\n        <span class=\"e-seg-text\"><EIcon v-if=\"o.icon\" :name=\"o.icon\" />{{ o.label }}</span>\n      </label>\n    </div>\n    <EFieldMessage :id=\"hintId\" :error=\"error\" :hint=\"hint\" />\n  </div>\n  <div v-else class=\"e-seg\" :class=\"attrs.wrapper().class\" :style=\"attrs.wrapper().style\" v-bind=\"groupAttrs()\">\n    <label v-for=\"o in options\" :key=\"o.value\" class=\"e-seg-opt\">\n      <input\n        type=\"radio\"\n        class=\"e-seg-input\"\n        :name=\"name\"\n        :value=\"o.value\"\n        :checked=\"current === o.value\"\n        :disabled=\"o.disabled || disabled\"\n        @change=\"model = o.value\"\n      />\n      <span class=\"e-seg-text\"><EIcon v-if=\"o.icon\" :name=\"o.icon\" />{{ o.label }}</span>\n    </label>\n  </div>\n</template>\n\n<style>\n@layer e.controls {\n  .e-seg {\n    display: inline-flex;\n    height: var(--e-control-height);\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-border-strong);\n    overflow: hidden;\n    max-width: 100%;\n    width: fit-content;\n  }\n\n  .e-seg-opt {\n    position: relative;\n    display: inline-flex;\n    cursor: pointer;\n  }\n\n  .e-seg-opt + .e-seg-opt {\n    border-inline-start: var(--e-stroke-hair) solid var(--e-border-strong);\n  }\n\n  .e-seg-input {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    margin: 0;\n    cursor: pointer;\n  }\n\n  .e-seg-text {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--e-space-2);\n    min-width: 4rem;\n    padding: 0 var(--e-space-4);\n    background: var(--e-surface);\n    font: 500 var(--e-text-md)/1 var(--e-font-sans);\n    white-space: nowrap;\n    transition: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-seg-opt:hover .e-seg-text {\n    background: var(--e-surface-hover);\n  }\n\n  .e-seg-input:checked + .e-seg-text {\n    background: var(--e-primary);\n    box-shadow: inset 0 var(--e-depth) 0 0 color-mix(in srgb, var(--e-primary), var(--e-shade-slab));\n    color: var(--e-on-primary);\n    font-weight: 600;\n  }\n\n  .e-seg-input:focus-visible + .e-seg-text {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: calc(-1 * var(--e-space-1));\n  }\n\n  .e-seg-input:disabled + .e-seg-text {\n    color: var(--e-muted);\n    cursor: not-allowed;\n  }\n\n  .e-seg-opt:has(:disabled):hover .e-seg-text {\n    background: transparent;\n  }\n\n  .e-seg-input:disabled:checked + .e-seg-text,\n  .e-seg-opt:has(:disabled:checked):hover .e-seg-text {\n    background: var(--e-surface-hover);\n    color: var(--e-ink);\n    box-shadow: inset 0 calc(-1 * var(--e-depth)) 0 0 var(--e-border-strong);\n  }\n\n  .e-seg-field {\n    display: grid;\n    gap: var(--e-space-2);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-seg-text {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-seg-input:checked + .e-seg-text {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,IAAM0B,IAAQC,GAkBRC,IAAQ5B,EAAmB2B,GAAA,YAAC,GAE5BG,IAAIC,EAAY,GAChBC,IAAOC,QAAaP,EAAM,IAAI,GAC9BQ,IAASC,QAAe,GAAGH,EAAK,MAAM,MAAM,GAC5CI,IAAUD,QACdT,EAAM,QAAQ,KAAK,MAAO,OAAOW,KAAM,WAAW;GAAE,OAAOA;GAAG,OAAOA;EAAE,IAAIA,CAAE,CAC/E,GACMC,IAAUH,QAAeP,EAAM,SAASQ,EAAQ,MAAM,EAAE,EAAE,KAAK,GAC/DG,IAAQC,EAAc,GACtBC,WAAoB;GACxB,MAAM;GACN,cAAcf,EAAM,WAAW,GAAGA,EAAM,MAAM,IAAII,EAAE,UAAU,MAAMJ,EAAM;GAC1E,gBAAgBA,EAAM,QAAS,SAAmB,KAAA;GAClD,GAAGa,EAAM,MAAMb,EAAM,SAASA,EAAM,OAAOQ,EAAO,QAAQ,KAAA,CAAS;EACrE;E,iBAIaP,EAAA,QAAQA,EAAA,SAAnB1B,EAAA,GAAAC,EAgBM,OAAA;;GAhBoB,OAAKC,EAAA,CAAC,eAAsBC,EAAAmC,CAAA,CAAK,CAAC,QAAO,CAAA,CAAG,KAAK,CAAA;GAAG,OAAKlC,EAAED,EAAAmC,CAAA,CAAK,CAAC,QAAO,CAAA,CAAG,KAAK;E,IACxGjC,EAaM,OAbNC,EAaM,EAbD,OAAM,QAAO,GAASkC,EAAU,CAAA,GAAA,EACnCxC,EAAA,EAAA,GAAAC,EAWQM,GAAA,MAAAC,EAXW2B,EAAA,QAAL,OAAdnC,EAAA,GAAAC,EAWQ,SAAA;GAXqB,KAAKmC,EAAE;GAAO,OAAM;E,IAC/C/B,EAQE,SAAA;GAPA,MAAK;GACL,OAAM;GACL,MAAMF,EAAA4B,CAAA;GACN,OAAOK,EAAE;GACT,SAASC,EAAA,UAAYD,EAAE;GACvB,UAAUA,EAAE,YAAYV,EAAA;GACxB,WAAM,MAAE,EAAA,QAAQU,EAAE;E,iBAErB/B,EAAmF,QAAnFc,GAAmF,CAA7CiB,EAAE,QAAfpC,EAAA,GAAAS,EAAsCC,GAAA;;GAAhB,MAAM0B,EAAE;E,oCAAWxB,EAAAC,EAAAuB,EAAE,KAAK,GAAA,CAAA,C,qBAG7EtB,EAA0DC,GAAA;GAA1C,IAAIkB,EAAA;GAAS,OAAOP,EAAA;GAAQ,MAAMA,EAAA;;;;;E,YAEpD1B,EAAA,GAAAC,EAaM,OAbNK,EAaM;;GAbM,OAAK,CAAC,SAAgBH,EAAAmC,CAAA,CAAK,CAAC,QAAO,CAAA,CAAG,KAAK;GAAG,OAAOnC,EAAAmC,CAAA,CAAK,CAAC,QAAO,CAAA,CAAG;EAAe,GAAAE,EAAU,CAAA,GAAA,EACxGxC,EAAA,EAAA,GAAAC,EAWQM,GAAA,MAAAC,EAXW2B,EAAA,QAAL,OAAdnC,EAAA,GAAAC,EAWQ,SAAA;GAXqB,KAAKmC,EAAE;GAAO,OAAM;E,IAC/C/B,EAQE,SAAA;GAPA,MAAK;GACL,OAAM;GACL,MAAMF,EAAA4B,CAAA;GACN,OAAOK,EAAE;GACT,SAASC,EAAA,UAAYD,EAAE;GACvB,UAAUA,EAAE,YAAYV,EAAA;GACxB,WAAM,MAAE,EAAA,QAAQU,EAAE;E,iBAErB/B,EAAmF,QAAnFgB,GAAmF,CAA7Ce,EAAE,QAAfpC,EAAA,GAAAS,EAAsCC,GAAA;;GAAhB,MAAM0B,EAAE;E,oCAAWxB,EAAAC,EAAAuB,EAAE,KAAK,GAAA,CAAA,C"}
+{"version":3,"file":"ESegmented.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_createElementVNode","_mergeProps","_Fragment","_renderList","_createBlock","EIcon","_createCommentVNode","_createTextVNode","_toDisplayString","_createVNode","EFieldMessage","EIcon_default","EFieldMessage_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","ESegmented_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","props","__props","model","useModel","t","useMessages","name","useUid","hintId","computed","options","o","current","attrs","useFieldAttrs","groupAttrs","openBlock","createElementBlock","normalizeClass","unref","normalizeStyle","createElementVNode","mergeProps","Fragment","renderList","createBlock","createCommentVNode","createTextVNode","toDisplayString","createVNode"],"sources":["../../../src/components/Segmented/ESegmented.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { IconProp } from \"../../icons/types.js\";\n\nexport interface SegmentedOption {\n  value: string;\n  label: string;\n  /** An icon before the label. */\n  icon?: IconProp;\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EFieldMessage from \"../Field/EFieldMessage.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** Read by screen readers as the name of the group. */\n  label: string;\n  /** Two to five. A string is both value and label. `SegmentedOption` is `{ value, label, icon?, disabled? }`. */\n  options: (string | SegmentedOption)[];\n  /** Help under the control, linked with `aria-describedby`. */\n  hint?: string;\n  /** What to fix. Replaces the hint and is announced. */\n  error?: string;\n  /** Adds the word \"Optional\" to the group's accessible name; nothing is shown. Flag whichever is rarer. */\n  optional?: boolean;\n  /** Disables every option. */\n  disabled?: boolean;\n  /** The name the radios share, submitted with a form. @default generated */\n  name?: string;\n}>();\n\n/** The active value. @default first option */\nconst model = defineModel<string>();\n\nconst t = useMessages();\nconst name = useUid(() => props.name);\nconst hintId = computed(() => `${name.value}-hint`);\nconst options = computed<SegmentedOption[]>(() =>\n  props.options.map((o) => (typeof o === \"string\" ? { value: o, label: o } : o)),\n);\nconst current = computed(() => model.value ?? options.value[0]?.value);\nconst attrs = useFieldAttrs();\nconst groupAttrs = () => ({\n  role: \"radiogroup\",\n  \"aria-label\": props.optional ? `${props.label}, ${t(\"optional\")}` : props.label,\n  \"aria-invalid\": props.error ? (\"true\" as const) : undefined,\n  ...attrs.input(props.error || props.hint ? hintId.value : undefined),\n});\n</script>\n\n<template>\n  <div v-if=\"hint || error\" class=\"e-seg-field\" :class=\"attrs.wrapper().class\" :style=\"attrs.wrapper().style\">\n    <div class=\"e-seg\" v-bind=\"groupAttrs()\">\n      <label v-for=\"o in options\" :key=\"o.value\" class=\"e-seg-opt\">\n        <input\n          type=\"radio\"\n          class=\"e-seg-input\"\n          :name=\"name\"\n          :value=\"o.value\"\n          :checked=\"current === o.value\"\n          :disabled=\"o.disabled || disabled\"\n          @change=\"model = o.value\"\n        />\n        <span class=\"e-seg-text\"><EIcon v-if=\"o.icon\" :name=\"o.icon\" />{{ o.label }}</span>\n      </label>\n    </div>\n    <EFieldMessage :id=\"hintId\" :error=\"error\" :hint=\"hint\" />\n  </div>\n  <div v-else class=\"e-seg\" :class=\"attrs.wrapper().class\" :style=\"attrs.wrapper().style\" v-bind=\"groupAttrs()\">\n    <label v-for=\"o in options\" :key=\"o.value\" class=\"e-seg-opt\">\n      <input\n        type=\"radio\"\n        class=\"e-seg-input\"\n        :name=\"name\"\n        :value=\"o.value\"\n        :checked=\"current === o.value\"\n        :disabled=\"o.disabled || disabled\"\n        @change=\"model = o.value\"\n      />\n      <span class=\"e-seg-text\"><EIcon v-if=\"o.icon\" :name=\"o.icon\" />{{ o.label }}</span>\n    </label>\n  </div>\n</template>\n\n<style>\n@layer e.controls {\n  .e-seg {\n    display: inline-flex;\n    height: var(--e-control-height);\n    border: var(--e-stroke-edge) solid var(--e-border-strong);\n    border-radius: var(--e-radius-md);\n    background: var(--e-border-strong);\n    overflow: hidden;\n    max-width: 100%;\n    width: fit-content;\n  }\n\n  .e-seg-opt {\n    position: relative;\n    display: inline-flex;\n    cursor: pointer;\n  }\n\n  .e-seg-opt + .e-seg-opt {\n    border-inline-start: var(--e-stroke-hair) solid var(--e-border-strong);\n  }\n\n  .e-seg-input {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    margin: 0;\n    cursor: pointer;\n  }\n\n  .e-seg-text {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--e-space-2);\n    min-width: 4rem;\n    padding: 0 var(--e-space-4);\n    background: var(--e-surface);\n    font: 500 var(--e-text-md)/1 var(--e-font-sans);\n    white-space: nowrap;\n    transition: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-seg-opt:hover .e-seg-text {\n    background: var(--e-surface-hover);\n  }\n\n  .e-seg-input:checked + .e-seg-text {\n    background: var(--e-primary);\n    color: var(--e-on-primary);\n    font-weight: 600;\n  }\n\n  .e-seg-input:focus-visible + .e-seg-text {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: calc(-1 * var(--e-space-1));\n  }\n\n  .e-seg-input:disabled + .e-seg-text {\n    color: var(--e-muted);\n    cursor: not-allowed;\n  }\n\n  .e-seg-opt:has(:disabled):hover .e-seg-text {\n    background: transparent;\n  }\n\n  .e-seg-input:disabled:checked + .e-seg-text,\n  .e-seg-opt:has(:disabled:checked):hover .e-seg-text {\n    background: var(--e-surface-hover);\n    color: var(--e-ink);\n  }\n\n  .e-seg-field {\n    display: grid;\n    gap: var(--e-space-2);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-seg-text {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-seg-input:checked + .e-seg-text {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,IAAM0B,IAAQC,GAkBRC,IAAQ5B,EAAmB2B,GAAA,YAAC,GAE5BG,IAAIC,EAAY,GAChBC,IAAOC,QAAaP,EAAM,IAAI,GAC9BQ,IAASC,QAAe,GAAGH,EAAK,MAAM,MAAM,GAC5CI,IAAUD,QACdT,EAAM,QAAQ,KAAK,MAAO,OAAOW,KAAM,WAAW;GAAE,OAAOA;GAAG,OAAOA;EAAE,IAAIA,CAAE,CAC/E,GACMC,IAAUH,QAAeP,EAAM,SAASQ,EAAQ,MAAM,EAAE,EAAE,KAAK,GAC/DG,IAAQC,EAAc,GACtBC,WAAoB;GACxB,MAAM;GACN,cAAcf,EAAM,WAAW,GAAGA,EAAM,MAAM,IAAII,EAAE,UAAU,MAAMJ,EAAM;GAC1E,gBAAgBA,EAAM,QAAS,SAAmB,KAAA;GAClD,GAAGa,EAAM,MAAMb,EAAM,SAASA,EAAM,OAAOQ,EAAO,QAAQ,KAAA,CAAS;EACrE;E,iBAIaP,EAAA,QAAQA,EAAA,SAAnB1B,EAAA,GAAAC,EAgBM,OAAA;;GAhBoB,OAAKC,EAAA,CAAC,eAAsBC,EAAAmC,CAAA,CAAK,CAAC,QAAO,CAAA,CAAG,KAAK,CAAA;GAAG,OAAKlC,EAAED,EAAAmC,CAAA,CAAK,CAAC,QAAO,CAAA,CAAG,KAAK;E,IACxGjC,EAaM,OAbNC,EAaM,EAbD,OAAM,QAAO,GAASkC,EAAU,CAAA,GAAA,EACnCxC,EAAA,EAAA,GAAAC,EAWQM,GAAA,MAAAC,EAXW2B,EAAA,QAAL,OAAdnC,EAAA,GAAAC,EAWQ,SAAA;GAXqB,KAAKmC,EAAE;GAAO,OAAM;E,IAC/C/B,EAQE,SAAA;GAPA,MAAK;GACL,OAAM;GACL,MAAMF,EAAA4B,CAAA;GACN,OAAOK,EAAE;GACT,SAASC,EAAA,UAAYD,EAAE;GACvB,UAAUA,EAAE,YAAYV,EAAA;GACxB,WAAM,MAAE,EAAA,QAAQU,EAAE;E,iBAErB/B,EAAmF,QAAnFc,GAAmF,CAA7CiB,EAAE,QAAfpC,EAAA,GAAAS,EAAsCC,GAAA;;GAAhB,MAAM0B,EAAE;E,oCAAWxB,EAAAC,EAAAuB,EAAE,KAAK,GAAA,CAAA,C,qBAG7EtB,EAA0DC,GAAA;GAA1C,IAAIkB,EAAA;GAAS,OAAOP,EAAA;GAAQ,MAAMA,EAAA;;;;;E,YAEpD1B,EAAA,GAAAC,EAaM,OAbNK,EAaM;;GAbM,OAAK,CAAC,SAAgBH,EAAAmC,CAAA,CAAK,CAAC,QAAO,CAAA,CAAG,KAAK;GAAG,OAAOnC,EAAAmC,CAAA,CAAK,CAAC,QAAO,CAAA,CAAG;EAAe,GAAAE,EAAU,CAAA,GAAA,EACxGxC,EAAA,EAAA,GAAAC,EAWQM,GAAA,MAAAC,EAXW2B,EAAA,QAAL,OAAdnC,EAAA,GAAAC,EAWQ,SAAA;GAXqB,KAAKmC,EAAE;GAAO,OAAM;E,IAC/C/B,EAQE,SAAA;GAPA,MAAK;GACL,OAAM;GACL,MAAMF,EAAA4B,CAAA;GACN,OAAOK,EAAE;GACT,SAASC,EAAA,UAAYD,EAAE;GACvB,UAAUA,EAAE,YAAYV,EAAA;GACxB,WAAM,MAAE,EAAA,QAAQU,EAAE;E,iBAErB/B,EAAmF,QAAnFgB,GAAmF,CAA7Ce,EAAE,QAAfpC,EAAA,GAAAS,EAAsCC,GAAA;;GAAhB,MAAM0B,EAAE;E,oCAAWxB,EAAAC,EAAAuB,EAAE,KAAK,GAAA,CAAA,C"}

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    /** 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":""}
+{"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    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_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    /** 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EASA,IAAMyB,IAAQC,GAaRC,IAAQ3B,EAAmB0B,GAAA,YAAgB,GAE3CG,IAAIC,EAAY,GAChBC,IAAKC,QAAaP,EAAM,EAAE,GAC1BQ,IAASC,EAA8B,IAAI,GAC3CC,IAAQD,EAAI,CAACP,EAAM,KAAK,GAMxBS,IAAqB,CAAC,GACxBC,IAA0B;EAE9B,SAASC,EAAM,GAA+B,GAAe;GAK3D,AAJA,EAAI,YAAY,KAChB,EAAI,UAAU,SACd,EAAI,WAAW,SACf,EAAI,cAAcC,GAClB,EAAI,YAAYA;GAChB,KAAK,IAAMC,KAAUJ,GAAS;IAC5B,IAAM,CAACK,GAAO,GAAGC,KAAQF;IACzB,IAAKC,GACL;KAIA,AAJAE,EAAI,UAAU,GACdA,EAAI,IAAIF,EAAM,GAAGA,EAAM,GAAG,KAAK,GAAG,GAAG,GACrCE,EAAI,KAAK,GACTA,EAAI,UAAU,GACdA,EAAI,OAAOF,EAAM,GAAGA,EAAM,CAAC;KAC3B,KAAK,IAAMG,KAAKF,GAAM,EAAI,OAAOE,EAAE,GAAGA,EAAE,CAAC;KACzC,EAAI,OAAO;IANG;GAOhB;EACF;EAEA,SAASC,IAAQ;GACf,IAAMC,IAAKb,EAAO;GAClB,IAAI,CAACa,GAAI;GACT,IAAMC,IAAM,OAAO,oBAAoB;GAEvC,AADA,EAAG,QAAQ,KAAK,OAAOD,EAAG,eAAe,OAAOC,CAAG,GACnD,EAAG,SAAS,KAAK,MAAMtB,EAAM,SAASsB,CAAG;GACzC,IAAMJ,IAAMG,EAAG,WAAW,IAAI;GAC9B,AAAKH,MACLA,EAAI,MAAMI,GAAKA,CAAG,GAClBT,EAAMK,GAAK,iBAAiBG,CAAE,CAAC,CAAC,KAAK;EACvC;EAEA,AADAE,EAAUH,CAAK,GACfI,EAAkBhB,GAAQY,CAAK;EAE/B,SAASK,EAAM,GAAwB;GACrC,IAAMC,IAAIlB,EAAO,MAAO,sBAAsB;GAC9C,OAAO;IAAE,GAAG,EAAE,UAAUkB,EAAE;IAAM,GAAG,EAAE,UAAUA,EAAE;GAAI;EACvD;EAEA,SAASC,EAAK,GAAiB;GAC7B,IAAI3B,EAAM,UAAU;GACpB,EAAE,eAAe;GACjB,IAAI;IACF,EAAO,MAAO,kBAAkB,EAAE,SAAS;GAC7C,QAAQ,CAAC;GACT,IAAMmB,IAAIM,EAAM,CAAC;GAEjB,AADA,IAAU,CAACN,CAAC,GACZR,EAAQ,KAAKC,CAAO;GACpB,IAAMM,IAAMV,EAAO,MAAO,WAAW,IAAI;GAIzC,AAHA,EAAI,YAAY,iBAAiBA,EAAO,KAAM,CAAC,CAAC,OAChDU,EAAI,UAAU,GACdA,EAAI,IAAIC,EAAE,GAAGA,EAAE,GAAG,KAAK,GAAG,GAAG,GAC7BD,EAAI,KAAK;EACX;EAEA,SAASU,EAAK,GAAiB;GAC7B,IAAI,CAAChB,GAAS;GACd,IAAMiB,IAAOjB,EAAQA,EAAQ,SAAS,IAChCO,IAAIM,EAAM,CAAC;GACjB,EAAQ,KAAKN,CAAC;GACd,IAAMD,IAAMV,EAAO,MAAO,WAAW,IAAI;GAKzC,AAJA,EAAI,cAAc,iBAAiBA,EAAO,KAAM,CAAC,CAAC,OAClDU,EAAI,UAAU,GACdA,EAAI,OAAOW,EAAK,GAAGA,EAAK,CAAC,GACzBX,EAAI,OAAOC,EAAE,GAAGA,EAAE,CAAC,GACnBD,EAAI,OAAO;EACb;EAEA,SAASY,IAAsB;GAC7B,IAAMT,IAAKb,EAAO,OACZuB,IAAM,SAAS,cAAc,QAAQ;GAE3C,AADA,EAAI,QAAQV,EAAG,OACf,EAAI,SAASA,EAAG;GAChB,IAAMH,IAAMa,EAAI,WAAW,IAAI;GAG/B,OAFAb,EAAI,MAAMG,EAAG,SAASA,EAAG,eAAe,MAAMA,EAAG,SAASrB,EAAM,MAAM,GACtEa,EAAMK,GAAK,OAAO,GACXa,EAAI,UAAU,WAAW;EAClC;EAEA,SAASC,IAAK;GACZ,AAAKpB,MACL,IAAU,MACV,EAAM,QAAQ,IACd,EAAM,QAAQkB,EAAY;EAC5B;EAEA,SAASG,IAAO;GAGd,AAFA,EAAQ,SAAS,GACjB,IAAU,MACV,EAAM,QAAQ;GACd,IAAMZ,IAAKb,EAAO,OACZU,IAAMG,GAAI,WAAW,IAAI;GAC/B,AAAIA,KAAMH,MACRA,EAAI,KAAK,GACTA,EAAI,aAAa,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,GACjCA,EAAI,UAAU,GAAG,GAAGG,EAAG,OAAOA,EAAG,MAAM,GACvCH,EAAI,QAAQ;EAEhB;EAEA,SAASgB,IAAQ;GAEf,AADAD,EAAK,GACL,EAAM,QAAQ;EAChB;E,OAEAE,EAAMjC,IAAQ,MAAM;GAClB,AAAI,CAACkC,KAAK,CAAC1B,EAAM,SAAOuB,EAAK;EAC/B,CAAC,GAEDlC,EAAa;GACX;GACA;EACF,CAAC,I,UAICvB,EAAA,GAAAC,EA0BM,OA1BNa,GA0BM,CAzBJZ,EAkBM,OAAA;GAlBD,OAAM;GAAiB,cAAYgC,EAAA,QAAK,KAAQ,KAAA;E,IACnDhC,EAYE,UAAA;GAXC,IAAIC,EAAA2B,CAAA;GACD,SAAA;GAAJ,KAAIE;GACJ,OAAM;GACN,MAAK;GACJ,OAAK5B,EAAA;IAAA,QAAA,GAAeqB,EAAA,OAAM;IAAA,OAAA;GAAA,CAAA;GAC1B,cAAYtB,EAAAyB,CAAA,CAAC,CAAA,eAAA;GACb,oBAAgB,GAAKzB,EAAA2B,CAAA,EAAE;GACvB,eAAaqB;GACb,eAAaC;GACb,aAAWI;GACX,iBAAeA;E,iBAENtB,EAAA,SAAZlC,EAAA,GAAAC,EAGO,QAHPgB,GAGO,CAFLZ,EAA0BC,GAAA,EAAnB,MAAK,YAAW,CAAA,GAAGC,EAAA,MAC1BC,EAAGL,EAAAyB,CAAA,CAAC,CAAA,WAAA,CAAA,GAAA,CAAA,C,yBAGR1B,EAKM,OALNgB,GAKM,CAJJhB,EAAsE,KAAA;GAAlE,IAAE,GAAKC,EAAA2B,CAAA,EAAE;GAAS,OAAM;EAAkB,GAAAtB,EAAAL,EAAAyB,CAAA,CAAC,CAAA,cAAA,CAAA,GAAA,GAAAT,CAAA,GAC/Cd,EAEUK,GAAA;GAFD,SAAQ;GAAQ,MAAK;GAAU,UAAUwB,EAAA,SAAST,EAAA;GAAW,SAAOiC;;GAC3E,SAAA/C,QAAoB,CAAjBJ,EAAAC,EAAAL,EAAAyB,CAAA,CAAC,CAAA,WAAA,CAAA,GAAA,CAAA,C"}
+{"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    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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EASA,IAAMyB,IAAQC,GAaRC,IAAQ3B,EAAmB0B,GAAA,YAAgB,GAE3CG,IAAIC,EAAY,GAChBC,IAAKC,QAAaP,EAAM,EAAE,GAC1BQ,IAASC,EAA8B,IAAI,GAC3CC,IAAQD,EAAI,CAACP,EAAM,KAAK,GAMxBS,IAAqB,CAAC,GACxBC,IAA0B;EAE9B,SAASC,EAAM,GAA+B,GAAe;GAK3D,AAJA,EAAI,YAAY,KAChB,EAAI,UAAU,SACd,EAAI,WAAW,SACf,EAAI,cAAcC,GAClB,EAAI,YAAYA;GAChB,KAAK,IAAMC,KAAUJ,GAAS;IAC5B,IAAM,CAACK,GAAO,GAAGC,KAAQF;IACzB,IAAKC,GACL;KAIA,AAJAE,EAAI,UAAU,GACdA,EAAI,IAAIF,EAAM,GAAGA,EAAM,GAAG,KAAK,GAAG,GAAG,GACrCE,EAAI,KAAK,GACTA,EAAI,UAAU,GACdA,EAAI,OAAOF,EAAM,GAAGA,EAAM,CAAC;KAC3B,KAAK,IAAMG,KAAKF,GAAM,EAAI,OAAOE,EAAE,GAAGA,EAAE,CAAC;KACzC,EAAI,OAAO;IANG;GAOhB;EACF;EAEA,SAASC,IAAQ;GACf,IAAMC,IAAKb,EAAO;GAClB,IAAI,CAACa,GAAI;GACT,IAAMC,IAAM,OAAO,oBAAoB;GAEvC,AADA,EAAG,QAAQ,KAAK,OAAOD,EAAG,eAAe,OAAOC,CAAG,GACnD,EAAG,SAAS,KAAK,MAAMtB,EAAM,SAASsB,CAAG;GACzC,IAAMJ,IAAMG,EAAG,WAAW,IAAI;GAC9B,AAAKH,MACLA,EAAI,MAAMI,GAAKA,CAAG,GAClBT,EAAMK,GAAK,iBAAiBG,CAAE,CAAC,CAAC,KAAK;EACvC;EAEA,AADAE,EAAUH,CAAK,GACfI,EAAkBhB,GAAQY,CAAK;EAE/B,SAASK,EAAM,GAAwB;GACrC,IAAMC,IAAIlB,EAAO,MAAO,sBAAsB;GAC9C,OAAO;IAAE,GAAG,EAAE,UAAUkB,EAAE;IAAM,GAAG,EAAE,UAAUA,EAAE;GAAI;EACvD;EAEA,SAASC,EAAK,GAAiB;GAC7B,IAAI3B,EAAM,UAAU;GACpB,EAAE,eAAe;GACjB,IAAI;IACF,EAAO,MAAO,kBAAkB,EAAE,SAAS;GAC7C,QAAQ,CAAC;GACT,IAAMmB,IAAIM,EAAM,CAAC;GAEjB,AADA,IAAU,CAACN,CAAC,GACZR,EAAQ,KAAKC,CAAO;GACpB,IAAMM,IAAMV,EAAO,MAAO,WAAW,IAAI;GAIzC,AAHA,EAAI,YAAY,iBAAiBA,EAAO,KAAM,CAAC,CAAC,OAChDU,EAAI,UAAU,GACdA,EAAI,IAAIC,EAAE,GAAGA,EAAE,GAAG,KAAK,GAAG,GAAG,GAC7BD,EAAI,KAAK;EACX;EAEA,SAASU,EAAK,GAAiB;GAC7B,IAAI,CAAChB,GAAS;GACd,IAAMiB,IAAOjB,EAAQA,EAAQ,SAAS,IAChCO,IAAIM,EAAM,CAAC;GACjB,EAAQ,KAAKN,CAAC;GACd,IAAMD,IAAMV,EAAO,MAAO,WAAW,IAAI;GAKzC,AAJA,EAAI,cAAc,iBAAiBA,EAAO,KAAM,CAAC,CAAC,OAClDU,EAAI,UAAU,GACdA,EAAI,OAAOW,EAAK,GAAGA,EAAK,CAAC,GACzBX,EAAI,OAAOC,EAAE,GAAGA,EAAE,CAAC,GACnBD,EAAI,OAAO;EACb;EAEA,SAASY,IAAsB;GAC7B,IAAMT,IAAKb,EAAO,OACZuB,IAAM,SAAS,cAAc,QAAQ;GAE3C,AADA,EAAI,QAAQV,EAAG,OACf,EAAI,SAASA,EAAG;GAChB,IAAMH,IAAMa,EAAI,WAAW,IAAI;GAG/B,OAFAb,EAAI,MAAMG,EAAG,SAASA,EAAG,eAAe,MAAMA,EAAG,SAASrB,EAAM,MAAM,GACtEa,EAAMK,GAAK,OAAO,GACXa,EAAI,UAAU,WAAW;EAClC;EAEA,SAASC,IAAK;GACZ,AAAKpB,MACL,IAAU,MACV,EAAM,QAAQ,IACd,EAAM,QAAQkB,EAAY;EAC5B;EAEA,SAASG,IAAO;GAGd,AAFA,EAAQ,SAAS,GACjB,IAAU,MACV,EAAM,QAAQ;GACd,IAAMZ,IAAKb,EAAO,OACZU,IAAMG,GAAI,WAAW,IAAI;GAC/B,AAAIA,KAAMH,MACRA,EAAI,KAAK,GACTA,EAAI,aAAa,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,GACjCA,EAAI,UAAU,GAAG,GAAGG,EAAG,OAAOA,EAAG,MAAM,GACvCH,EAAI,QAAQ;EAEhB;EAEA,SAASgB,IAAQ;GAEf,AADAD,EAAK,GACL,EAAM,QAAQ;EAChB;E,OAEAE,EAAMjC,IAAQ,MAAM;GAClB,AAAI,CAACkC,KAAK,CAAC1B,EAAM,SAAOuB,EAAK;EAC/B,CAAC,GAEDlC,EAAa;GACX;GACA;EACF,CAAC,I,UAICvB,EAAA,GAAAC,EA0BM,OA1BNa,GA0BM,CAzBJZ,EAkBM,OAAA;GAlBD,OAAM;GAAiB,cAAYgC,EAAA,QAAK,KAAQ,KAAA;E,IACnDhC,EAYE,UAAA;GAXC,IAAIC,EAAA2B,CAAA;GACD,SAAA;GAAJ,KAAIE;GACJ,OAAM;GACN,MAAK;GACJ,OAAK5B,EAAA;IAAA,QAAA,GAAeqB,EAAA,OAAM;IAAA,OAAA;GAAA,CAAA;GAC1B,cAAYtB,EAAAyB,CAAA,CAAC,CAAA,eAAA;GACb,oBAAgB,GAAKzB,EAAA2B,CAAA,EAAE;GACvB,eAAaqB;GACb,eAAaC;GACb,aAAWI;GACX,iBAAeA;E,iBAENtB,EAAA,SAAZlC,EAAA,GAAAC,EAGO,QAHPgB,GAGO,CAFLZ,EAA0BC,GAAA,EAAnB,MAAK,YAAW,CAAA,GAAGC,EAAA,MAC1BC,EAAGL,EAAAyB,CAAA,CAAC,CAAA,WAAA,CAAA,GAAA,CAAA,C,yBAGR1B,EAKM,OALNgB,GAKM,CAJJhB,EAAsE,KAAA;GAAlE,IAAE,GAAKC,EAAA2B,CAAA,EAAE;GAAS,OAAM;EAAkB,GAAAtB,EAAAL,EAAAyB,CAAA,CAAC,CAAA,cAAA,CAAA,GAAA,GAAAT,CAAA,GAC/Cd,EAEUK,GAAA;GAFD,SAAQ;GAAQ,MAAK;GAAU,UAAUwB,EAAA,SAAST,EAAA;GAAW,SAAOiC;;GAC3E,SAAA/C,QAAoB,CAAjBJ,EAAAC,EAAAL,EAAAyB,CAAA,CAAC,CAAA,WAAA,CAAA,GAAA,CAAA,C"}

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  /** 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":""}
+{"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    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    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_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  /** 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"}
+{"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    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    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/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 { 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":""}
+{"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    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_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EStamp.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createBlock","EIcon","_createCommentVNode","_createElementVNode","_renderSlot","_createTextVNode","_toDisplayString","EIcon_default","_hoisted_1","_hoisted_2","EStamp_vue_vue_type_script_setup_true_lang_default","props","__props","PRESETS","t","useMessages","preset","computed","tone","toneClass","text","openBlock","createElementBlock","normalizeClass","createBlock","createCommentVNode","createElementVNode","renderSlot","_ctx","createTextVNode","toDisplayString"],"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":";;;;;;;;;;;;;;;;;;;EAWA,IAAMc,IAAQC,GAoBRC,IAA0C;GAC9C,MAAM;GACN,KAAK;GACL,SAAS;GACT,QAAQ;GACR,WAAW;GACX,WAAW;GACX,WAAW;GACX,QAAQ;GACR,SAAS;GACT,UAAU;EACZ,GAEMC,IAAIC,EAAY,GAChBC,IAASC,QAAgBN,EAAM,SAASE,EAAQF,EAAM,UAAU,KAAA,CAAU,GAC1EO,IAAOD,QAA0BN,EAAM,QAAQK,EAAO,SAAS,SAAS,GACxEG,IAAYF,QAAgBC,EAAK,UAAU,aAAaA,EAAK,UAAU,QAAQ,OAAO,YAAYA,EAAK,OAAQ,GAC/GE,IAAOH,QAAeN,EAAM,UAAUK,EAAO,QAAQF,EAAE,UAAUH,EAAM,QAAQ,IAAIG,EAAE,QAAQ,EAAE;E,kBAInGjB,EAAA,GAAAC,EAIO,QAAA,EAJD,OAAKC,EAAA,CAAC,WAAS,CAAUoB,EAAA,OAAWP,EAAA,SAAI,QAAA,aAAA,CAAA,CAAA,E;GAC/BA,EAAA,QAAbf,EAAA,GAAAG,EAAuCC,GAAA;;IAAnB,MAAMW,EAAA;IAAM,MAAA;;GAChCT,EAAyD,QAAzDK,GAAyD,CAA9BJ,EAAuBwB,EAAA,QAAA,WAAA,CAAA,SAAA,CAAdvB,EAAAC,EAAAc,EAAA,KAAI,GAAA,CAAA,C;GAC5BR,EAAA,UAAZf,EAAA,GAAAC,EAA8D,QAA9DW,GAA8DH,EAAhBM,EAAA,MAAM,GAAA,CAAA,K"}
+{"version":3,"file":"EStamp.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createBlock","EIcon","_createCommentVNode","_createElementVNode","_renderSlot","_createTextVNode","_toDisplayString","EIcon_default","_hoisted_1","_hoisted_2","EStamp_vue_vue_type_script_setup_true_lang_default","props","__props","PRESETS","t","useMessages","preset","computed","tone","toneClass","text","openBlock","createElementBlock","normalizeClass","createBlock","createCommentVNode","createElementVNode","renderSlot","_ctx","createTextVNode","toDisplayString"],"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    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":";;;;;;;;;;;;;;;;;;;EAWA,IAAMc,IAAQC,GAoBRC,IAA0C;GAC9C,MAAM;GACN,KAAK;GACL,SAAS;GACT,QAAQ;GACR,WAAW;GACX,WAAW;GACX,WAAW;GACX,QAAQ;GACR,SAAS;GACT,UAAU;EACZ,GAEMC,IAAIC,EAAY,GAChBC,IAASC,QAAgBN,EAAM,SAASE,EAAQF,EAAM,UAAU,KAAA,CAAU,GAC1EO,IAAOD,QAA0BN,EAAM,QAAQK,EAAO,SAAS,SAAS,GACxEG,IAAYF,QAAgBC,EAAK,UAAU,aAAaA,EAAK,UAAU,QAAQ,OAAO,YAAYA,EAAK,OAAQ,GAC/GE,IAAOH,QAAeN,EAAM,UAAUK,EAAO,QAAQF,EAAE,UAAUH,EAAM,QAAQ,IAAIG,EAAE,QAAQ,EAAE;E,kBAInGjB,EAAA,GAAAC,EAIO,QAAA,EAJD,OAAKC,EAAA,CAAC,WAAS,CAAUoB,EAAA,OAAWP,EAAA,SAAI,QAAA,aAAA,CAAA,CAAA,E;GAC/BA,EAAA,QAAbf,EAAA,GAAAG,EAAuCC,GAAA;;IAAnB,MAAMW,EAAA;IAAM,MAAA;;GAChCT,EAAyD,QAAzDK,GAAyD,CAA9BJ,EAAuBwB,EAAA,QAAA,WAAA,CAAA,SAAA,CAAdvB,EAAAC,EAAAc,EAAA,KAAI,GAAA,CAAA,C;GAC5BR,EAAA,UAAZf,EAAA,GAAAC,EAA8D,QAA9DW,GAA8DH,EAAhBM,EAAA,MAAM,GAAA,CAAA,K"}

package/dist/components/Surface/ESurface.js.map

@@ -1 +1 @@
-{"version":3,"file":"ESurface.js","names":["_sfc_main","ESurface_vue_vue_type_script_setup_true_lang_default","ESurface_default"],"sources":["../../../src/components/Surface/ESurface.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EActions from \"../Actions/EActions.vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The element to render, `div` by default. Use `article`, `section` or `aside` for a real block. */\n    as?: string;\n    /** Padding: `sm`, `md` or `lg`. None by default. */\n    pad?: \"sm\" | \"md\" | \"lg\";\n    /** The lifted shadow of something floating above the page, such as a Toast. */\n    raised?: boolean;\n    /** Hides what overflows the rounded corners. Ignored when there is an `actions` slot. */\n    clip?: boolean;\n  }>(),\n  { as: \"div\" },\n);\n\ndefineSlots<{\n  /** The content of the card. */\n  default(): unknown;\n  /** Buttons for a bar at the foot of the card, edge to edge. The body takes the remaining height so cards in a row end level. */\n  actions(): unknown;\n}>();\n\nconst pad = computed(() => (props.pad ? `e-surface--pad-${props.pad}` : null));\nconst barElement = computed(() => (/^(article|section|aside)$/.test(props.as) ? \"footer\" : \"div\"));\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    class=\"e-surface\"\n    :class=\"[raised && 'e-surface--raised', $slots.actions ? 'e-surface--actions' : [pad, clip && 'e-surface--clip']]\"\n  >\n    <template v-if=\"$slots.actions\">\n      <div class=\"e-surface-body\" :class=\"pad\">\n        <slot />\n      </div>\n      <EActions :as=\"barElement\" bar>\n        <slot name=\"actions\" />\n      </EActions>\n    </template>\n    <slot v-else />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-surface {\n    min-width: 0;\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    box-shadow: var(--e-edge);\n    outline: var(--e-stroke-card) solid var(--e-border);\n    outline-offset: 0;\n  }\n\n  .e-surface--clip {\n    overflow: hidden;\n  }\n\n  .e-surface--actions {\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n  }\n\n  .e-surface-body {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .e-surface > .e-actions--bar:last-child {\n    border-end-start-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-surface--raised {\n    box-shadow: var(--e-float);\n    outline: var(--e-stroke-card) solid var(--e-border);\n    outline-offset: 0;\n  }\n\n  .e-surface--pad-sm {\n    padding: var(--e-space-3) var(--e-space-4);\n  }\n\n  .e-surface--pad-md {\n    padding: var(--e-space-4);\n  }\n\n  .e-surface--pad-lg {\n    padding: var(--e-space-6);\n  }\n\n  @media print {\n    .e-surface {\n      box-shadow: none;\n      outline: 0;\n      border: var(--e-stroke-hair) solid var(--e-print-ink, #000);\n      break-inside: avoid;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-surface {\n      outline-color: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ESurface.js","names":["_sfc_main","ESurface_vue_vue_type_script_setup_true_lang_default","ESurface_default"],"sources":["../../../src/components/Surface/ESurface.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EActions from \"../Actions/EActions.vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The element to render, `div` by default. Use `article`, `section` or `aside` for a real block. */\n    as?: string;\n    /** Padding: `sm`, `md` or `lg`. None by default. */\n    pad?: \"sm\" | \"md\" | \"lg\";\n    /** The lifted shadow of something floating above the page, such as a Toast. */\n    raised?: boolean;\n    /** Hides what overflows the rounded corners. Ignored when there is an `actions` slot. */\n    clip?: boolean;\n  }>(),\n  { as: \"div\" },\n);\n\ndefineSlots<{\n  /** The content of the card. */\n  default(): unknown;\n  /** Buttons for a bar at the foot of the card, edge to edge. The body takes the remaining height so cards in a row end level. */\n  actions(): unknown;\n}>();\n\nconst pad = computed(() => (props.pad ? `e-surface--pad-${props.pad}` : null));\nconst barElement = computed(() => (/^(article|section|aside)$/.test(props.as) ? \"footer\" : \"div\"));\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    class=\"e-surface\"\n    :class=\"[raised && 'e-surface--raised', $slots.actions ? 'e-surface--actions' : [pad, clip && 'e-surface--clip']]\"\n  >\n    <template v-if=\"$slots.actions\">\n      <div class=\"e-surface-body\" :class=\"pad\">\n        <slot />\n      </div>\n      <EActions :as=\"barElement\" bar>\n        <slot name=\"actions\" />\n      </EActions>\n    </template>\n    <slot v-else />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-surface {\n    min-width: 0;\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    box-shadow: var(--e-edge);\n  }\n\n  .e-surface--clip {\n    overflow: hidden;\n  }\n\n  .e-surface--actions {\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n  }\n\n  .e-surface-body {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .e-surface > .e-actions--bar:last-child {\n    border-end-start-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-surface--raised {\n    box-shadow: var(--e-float);\n  }\n\n  .e-surface--pad-sm {\n    padding: var(--e-space-3) var(--e-space-4);\n  }\n\n  .e-surface--pad-md {\n    padding: var(--e-space-4);\n  }\n\n  .e-surface--pad-lg {\n    padding: var(--e-space-6);\n  }\n\n  @media print {\n    .e-surface {\n      box-shadow: none;\n      outline: 0;\n      border: var(--e-stroke-hair) solid var(--e-print-ink, #000);\n      break-inside: avoid;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-surface {\n      outline-color: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Surface/ESurface.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ESurface.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_createElementBlock","_Fragment","_createElementVNode","_renderSlot","_createVNode","EActions","EActions_default","ESurface_vue_vue_type_script_setup_true_lang_default","props","__props","pad","computed","barElement","openBlock","createBlock","resolveDynamicComponent","normalizeClass","_ctx","withCtx","createElementBlock","Fragment","createElementVNode","renderSlot","createVNode"],"sources":["../../../src/components/Surface/ESurface.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EActions from \"../Actions/EActions.vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The element to render, `div` by default. Use `article`, `section` or `aside` for a real block. */\n    as?: string;\n    /** Padding: `sm`, `md` or `lg`. None by default. */\n    pad?: \"sm\" | \"md\" | \"lg\";\n    /** The lifted shadow of something floating above the page, such as a Toast. */\n    raised?: boolean;\n    /** Hides what overflows the rounded corners. Ignored when there is an `actions` slot. */\n    clip?: boolean;\n  }>(),\n  { as: \"div\" },\n);\n\ndefineSlots<{\n  /** The content of the card. */\n  default(): unknown;\n  /** Buttons for a bar at the foot of the card, edge to edge. The body takes the remaining height so cards in a row end level. */\n  actions(): unknown;\n}>();\n\nconst pad = computed(() => (props.pad ? `e-surface--pad-${props.pad}` : null));\nconst barElement = computed(() => (/^(article|section|aside)$/.test(props.as) ? \"footer\" : \"div\"));\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    class=\"e-surface\"\n    :class=\"[raised && 'e-surface--raised', $slots.actions ? 'e-surface--actions' : [pad, clip && 'e-surface--clip']]\"\n  >\n    <template v-if=\"$slots.actions\">\n      <div class=\"e-surface-body\" :class=\"pad\">\n        <slot />\n      </div>\n      <EActions :as=\"barElement\" bar>\n        <slot name=\"actions\" />\n      </EActions>\n    </template>\n    <slot v-else />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-surface {\n    min-width: 0;\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    box-shadow: var(--e-edge);\n    outline: var(--e-stroke-card) solid var(--e-border);\n    outline-offset: 0;\n  }\n\n  .e-surface--clip {\n    overflow: hidden;\n  }\n\n  .e-surface--actions {\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n  }\n\n  .e-surface-body {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .e-surface > .e-actions--bar:last-child {\n    border-end-start-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-surface--raised {\n    box-shadow: var(--e-float);\n    outline: var(--e-stroke-card) solid var(--e-border);\n    outline-offset: 0;\n  }\n\n  .e-surface--pad-sm {\n    padding: var(--e-space-3) var(--e-space-4);\n  }\n\n  .e-surface--pad-md {\n    padding: var(--e-space-4);\n  }\n\n  .e-surface--pad-lg {\n    padding: var(--e-space-6);\n  }\n\n  @media print {\n    .e-surface {\n      box-shadow: none;\n      outline: 0;\n      border: var(--e-stroke-hair) solid var(--e-print-ink, #000);\n      break-inside: avoid;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-surface {\n      outline-color: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;EAKA,IAAMc,IAAQC,GAqBRC,IAAMC,QAAgBH,EAAM,MAAM,kBAAkBA,EAAM,QAAQ,IAAK,GACvEI,IAAaD,QAAgB,4BAA4B,KAAKH,EAAM,EAAE,IAAI,WAAW,KAAM;E,kBAI/Fb,EAAA,GAAAC,EAcYC,EAbLY,EAAA,EAAE,GAAA,EACP,OAAKX,EAAA,CAAC,aAAW,CACRW,EAAA,UAAM,qBAAyBf,EAAAA,OAAO,UAAO,uBAAA,CAA2BgB,EAAA,OAAKD,EAAA,QAAI,iBAAA,CAAA,CAAA,CAAA,E;GAE1F,SAAAV,QAOW,CAPKL,EAAAA,OAAO,WAAvBC,EAAA,GAAAK,EAOWC,GAAA,EAAA,KAAA,EAAA,GAAA,CANTC,EAEM,OAAA,EAFD,OAAKJ,EAAA,CAAC,kBAAyBY,EAAA,KAAG,CAAA,E,IACrCP,EAAQc,EAAA,QAAA,SAAA,C,OAEVb,EAEWC,GAAA;IAFA,IAAIO,EAAA;IAAY,KAAA;;IACzB,SAAAb,QAAuB,CAAvBI,EAAuBc,EAAA,QAAA,SAAA,C;;G,uBAG3Bd,EAAec,EAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,C"}
+{"version":3,"file":"ESurface.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_createElementBlock","_Fragment","_createElementVNode","_renderSlot","_createVNode","EActions","EActions_default","ESurface_vue_vue_type_script_setup_true_lang_default","props","__props","pad","computed","barElement","openBlock","createBlock","resolveDynamicComponent","normalizeClass","_ctx","withCtx","createElementBlock","Fragment","createElementVNode","renderSlot","createVNode"],"sources":["../../../src/components/Surface/ESurface.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EActions from \"../Actions/EActions.vue\";\nimport \"../../styles/base.css\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** The element to render, `div` by default. Use `article`, `section` or `aside` for a real block. */\n    as?: string;\n    /** Padding: `sm`, `md` or `lg`. None by default. */\n    pad?: \"sm\" | \"md\" | \"lg\";\n    /** The lifted shadow of something floating above the page, such as a Toast. */\n    raised?: boolean;\n    /** Hides what overflows the rounded corners. Ignored when there is an `actions` slot. */\n    clip?: boolean;\n  }>(),\n  { as: \"div\" },\n);\n\ndefineSlots<{\n  /** The content of the card. */\n  default(): unknown;\n  /** Buttons for a bar at the foot of the card, edge to edge. The body takes the remaining height so cards in a row end level. */\n  actions(): unknown;\n}>();\n\nconst pad = computed(() => (props.pad ? `e-surface--pad-${props.pad}` : null));\nconst barElement = computed(() => (/^(article|section|aside)$/.test(props.as) ? \"footer\" : \"div\"));\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    class=\"e-surface\"\n    :class=\"[raised && 'e-surface--raised', $slots.actions ? 'e-surface--actions' : [pad, clip && 'e-surface--clip']]\"\n  >\n    <template v-if=\"$slots.actions\">\n      <div class=\"e-surface-body\" :class=\"pad\">\n        <slot />\n      </div>\n      <EActions :as=\"barElement\" bar>\n        <slot name=\"actions\" />\n      </EActions>\n    </template>\n    <slot v-else />\n  </component>\n</template>\n\n<style>\n@layer e.blocks {\n  .e-surface {\n    min-width: 0;\n    border-radius: var(--e-radius-md);\n    background: var(--e-surface);\n    box-shadow: var(--e-edge);\n  }\n\n  .e-surface--clip {\n    overflow: hidden;\n  }\n\n  .e-surface--actions {\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n  }\n\n  .e-surface-body {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .e-surface > .e-actions--bar:last-child {\n    border-end-start-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-surface--raised {\n    box-shadow: var(--e-float);\n  }\n\n  .e-surface--pad-sm {\n    padding: var(--e-space-3) var(--e-space-4);\n  }\n\n  .e-surface--pad-md {\n    padding: var(--e-space-4);\n  }\n\n  .e-surface--pad-lg {\n    padding: var(--e-space-6);\n  }\n\n  @media print {\n    .e-surface {\n      box-shadow: none;\n      outline: 0;\n      border: var(--e-stroke-hair) solid var(--e-print-ink, #000);\n      break-inside: avoid;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-surface {\n      outline-color: CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;EAKA,IAAMc,IAAQC,GAqBRC,IAAMC,QAAgBH,EAAM,MAAM,kBAAkBA,EAAM,QAAQ,IAAK,GACvEI,IAAaD,QAAgB,4BAA4B,KAAKH,EAAM,EAAE,IAAI,WAAW,KAAM;E,kBAI/Fb,EAAA,GAAAC,EAcYC,EAbLY,EAAA,EAAE,GAAA,EACP,OAAKX,EAAA,CAAC,aAAW,CACRW,EAAA,UAAM,qBAAyBf,EAAAA,OAAO,UAAO,uBAAA,CAA2BgB,EAAA,OAAKD,EAAA,QAAI,iBAAA,CAAA,CAAA,CAAA,E;GAE1F,SAAAV,QAOW,CAPKL,EAAAA,OAAO,WAAvBC,EAAA,GAAAK,EAOWC,GAAA,EAAA,KAAA,EAAA,GAAA,CANTC,EAEM,OAAA,EAFD,OAAKJ,EAAA,CAAC,kBAAyBY,EAAA,KAAG,CAAA,E,IACrCP,EAAQc,EAAA,QAAA,SAAA,C,OAEVb,EAEWC,GAAA;IAFA,IAAIO,EAAA;IAAY,KAAA;;IACzB,SAAAb,QAAuB,CAAvBI,EAAuBc,EAAA,QAAA,SAAA,C;;G,uBAG3Bd,EAAec,EAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,C"}

package/dist/components/Switch/ESwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"ESwitch.js","names":["_sfc_main","ESwitch_vue_vue_type_script_setup_true_lang_default","ESwitch_default"],"sources":["../../../src/components/Switch/ESwitch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\nimport \"../Checkbox/choice.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The setting, named by what it does. */\n  label: string;\n  /** A line of detail under the label. */\n  description?: string;\n  /** Disables the switch. */\n  disabled?: boolean;\n  /** The name submitted with a form. */\n  name?: string;\n  /** The value submitted with a form when on. */\n  value?: string;\n  /** The id of the input; the label points at it. @default generated */\n  id?: string;\n}>();\n\n/** On or off. */\nconst model = defineModel<boolean>({ default: false });\n\nconst id = useUid(() => props.id);\nconst input = ref<HTMLInputElement | null>(null);\nconst attrs = useFieldAttrs();\n\ndefineExpose({\n  input,\n  focus: () => input.value?.focus(),\n});\n</script>\n\n<template>\n  <label\n    class=\"e-choice e-switch\"\n    :class=\"[{ 'e-choice--disabled': disabled }, attrs.wrapper().class]\"\n    :style=\"attrs.wrapper().style\"\n    :for=\"id\"\n  >\n    <input\n      :id=\"id\"\n      ref=\"input\"\n      type=\"checkbox\"\n      role=\"switch\"\n      class=\"e-switch-input\"\n      :name=\"name\"\n      :value=\"value\"\n      :checked=\"model\"\n      :disabled=\"disabled\"\n      v-bind=\"attrs.input()\"\n      @change=\"model = ($event.target as HTMLInputElement).checked\"\n    />\n    <span class=\"e-switch-track\" aria-hidden=\"true\" />\n    <span class=\"e-choice-text\">\n      {{ label }}\n      <span v-if=\"description\" class=\"e-choice-desc\">{{ description }}</span>\n    </span>\n  </label>\n</template>\n\n<style>\n@layer e.controls {\n  .e-switch-input {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n  }\n\n  .e-switch-track {\n    --e-switch-w: 44px;\n    --e-thumb: 14px;\n    --e-thumb-inset: calc(var(--e-space-1) - var(--e-stroke-card));\n    --e-thumb-travel: calc(var(--e-switch-w) - 2 * var(--e-stroke-edge) - var(--e-thumb) - 2 * var(--e-thumb-inset));\n\n    position: relative;\n    flex: none;\n    width: var(--e-switch-w);\n    height: 24px;\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-pill);\n    background: var(--e-surface-tint);\n    transition:\n      background-color var(--e-duration-tap) var(--e-easing-out),\n      border-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-switch-track::after {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    inset-inline-start: var(--e-thumb-inset);\n    width: var(--e-thumb);\n    height: var(--e-thumb);\n    margin-top: calc(var(--e-thumb) / -2);\n    border-radius: 50%;\n    background: var(--e-ink);\n    transition: transform var(--e-duration-move, 160ms) var(--e-easing-out);\n  }\n\n  .e-switch:hover .e-switch-track {\n    border-color: var(--e-ink);\n\n    --e-bc: var(--e-ink);\n  }\n\n  .e-switch-input:checked + .e-switch-track {\n    background: var(--e-primary);\n    border-color: var(--e-primary);\n\n    --e-bc: var(--e-primary);\n  }\n\n  .e-switch-input:checked + .e-switch-track::after {\n    background: var(--e-on-primary);\n    transform: translateX(var(--e-thumb-travel));\n  }\n\n  .e-switch-input:disabled + .e-switch-track {\n    border-style: dashed;\n    outline: 0;\n    background: var(--e-surface-tint);\n  }\n\n  .e-switch-input:disabled + .e-switch-track::after {\n    background: var(--e-muted);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-switch-track::after {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-switch-input:checked + .e-switch-track {\n      forced-color-adjust: none;\n      background: Highlight;\n    }\n\n    .e-switch-track::after {\n      forced-color-adjust: none;\n      background: ButtonText;\n    }\n  }\n\n  :dir(rtl) .e-switch-input:checked + .e-switch-track::after {\n    transform: translateX(calc(-1 * var(--e-thumb-travel)));\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ESwitch.js","names":["_sfc_main","ESwitch_vue_vue_type_script_setup_true_lang_default","ESwitch_default"],"sources":["../../../src/components/Switch/ESwitch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\nimport \"../Checkbox/choice.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The setting, named by what it does. */\n  label: string;\n  /** A line of detail under the label. */\n  description?: string;\n  /** Disables the switch. */\n  disabled?: boolean;\n  /** The name submitted with a form. */\n  name?: string;\n  /** The value submitted with a form when on. */\n  value?: string;\n  /** The id of the input; the label points at it. @default generated */\n  id?: string;\n}>();\n\n/** On or off. */\nconst model = defineModel<boolean>({ default: false });\n\nconst id = useUid(() => props.id);\nconst input = ref<HTMLInputElement | null>(null);\nconst attrs = useFieldAttrs();\n\ndefineExpose({\n  input,\n  focus: () => input.value?.focus(),\n});\n</script>\n\n<template>\n  <label\n    class=\"e-choice e-switch\"\n    :class=\"[{ 'e-choice--disabled': disabled }, attrs.wrapper().class]\"\n    :style=\"attrs.wrapper().style\"\n    :for=\"id\"\n  >\n    <input\n      :id=\"id\"\n      ref=\"input\"\n      type=\"checkbox\"\n      role=\"switch\"\n      class=\"e-switch-input\"\n      :name=\"name\"\n      :value=\"value\"\n      :checked=\"model\"\n      :disabled=\"disabled\"\n      v-bind=\"attrs.input()\"\n      @change=\"model = ($event.target as HTMLInputElement).checked\"\n    />\n    <span class=\"e-switch-track\" aria-hidden=\"true\" />\n    <span class=\"e-choice-text\">\n      {{ label }}\n      <span v-if=\"description\" class=\"e-choice-desc\">{{ description }}</span>\n    </span>\n  </label>\n</template>\n\n<style>\n@layer e.controls {\n  .e-switch-input {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n  }\n\n  .e-switch-track {\n    --e-switch-w: 44px;\n    --e-thumb: 14px;\n    --e-thumb-inset: calc(var(--e-space-1) - var(--e-stroke-card));\n    --e-thumb-travel: calc(var(--e-switch-w) - 2 * var(--e-stroke-edge) - var(--e-thumb) - 2 * var(--e-thumb-inset));\n\n    position: relative;\n    flex: none;\n    width: var(--e-switch-w);\n    height: 24px;\n    border: var(--e-stroke-edge) solid var(--e-border-strong);\n    border-radius: var(--e-radius-pill);\n    background: var(--e-surface-tint);\n    transition:\n      background-color var(--e-duration-tap) var(--e-easing-out),\n      border-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-switch-track::after {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    inset-inline-start: var(--e-thumb-inset);\n    width: var(--e-thumb);\n    height: var(--e-thumb);\n    margin-top: calc(var(--e-thumb) / -2);\n    border-radius: 50%;\n    background: var(--e-ink);\n    transition: transform var(--e-duration-move, 160ms) var(--e-easing-out);\n  }\n\n  .e-switch:hover .e-switch-track {\n    border-color: var(--e-ink);\n\n  }\n\n  .e-switch-input:checked + .e-switch-track {\n    background: var(--e-primary);\n    border-color: var(--e-primary);\n\n  }\n\n  .e-switch-input:checked + .e-switch-track::after {\n    background: var(--e-on-primary);\n    transform: translateX(var(--e-thumb-travel));\n  }\n\n  .e-switch-input:disabled + .e-switch-track {\n    border-style: dashed;\n    outline: 0;\n    background: var(--e-surface-tint);\n  }\n\n  .e-switch-input:disabled + .e-switch-track::after {\n    background: var(--e-muted);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-switch-track::after {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-switch-input:checked + .e-switch-track {\n      forced-color-adjust: none;\n      background: Highlight;\n    }\n\n    .e-switch-track::after {\n      forced-color-adjust: none;\n      background: ButtonText;\n    }\n  }\n\n  :dir(rtl) .e-switch-input:checked + .e-switch-track::after {\n    transform: translateX(calc(-1 * var(--e-thumb-travel)));\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Switch/ESwitch.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ESwitch.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_createElementVNode","_mergeProps","_createTextVNode","_toDisplayString","_createCommentVNode","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","ESwitch_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","props","__props","model","useModel","id","useUid","input","ref","attrs","useFieldAttrs","openBlock","createElementBlock","normalizeClass","unref","normalizeStyle","createElementVNode","mergeProps","_cache","$event","createTextVNode","toDisplayString","createCommentVNode"],"sources":["../../../src/components/Switch/ESwitch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\nimport \"../Checkbox/choice.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The setting, named by what it does. */\n  label: string;\n  /** A line of detail under the label. */\n  description?: string;\n  /** Disables the switch. */\n  disabled?: boolean;\n  /** The name submitted with a form. */\n  name?: string;\n  /** The value submitted with a form when on. */\n  value?: string;\n  /** The id of the input; the label points at it. @default generated */\n  id?: string;\n}>();\n\n/** On or off. */\nconst model = defineModel<boolean>({ default: false });\n\nconst id = useUid(() => props.id);\nconst input = ref<HTMLInputElement | null>(null);\nconst attrs = useFieldAttrs();\n\ndefineExpose({\n  input,\n  focus: () => input.value?.focus(),\n});\n</script>\n\n<template>\n  <label\n    class=\"e-choice e-switch\"\n    :class=\"[{ 'e-choice--disabled': disabled }, attrs.wrapper().class]\"\n    :style=\"attrs.wrapper().style\"\n    :for=\"id\"\n  >\n    <input\n      :id=\"id\"\n      ref=\"input\"\n      type=\"checkbox\"\n      role=\"switch\"\n      class=\"e-switch-input\"\n      :name=\"name\"\n      :value=\"value\"\n      :checked=\"model\"\n      :disabled=\"disabled\"\n      v-bind=\"attrs.input()\"\n      @change=\"model = ($event.target as HTMLInputElement).checked\"\n    />\n    <span class=\"e-switch-track\" aria-hidden=\"true\" />\n    <span class=\"e-choice-text\">\n      {{ label }}\n      <span v-if=\"description\" class=\"e-choice-desc\">{{ description }}</span>\n    </span>\n  </label>\n</template>\n\n<style>\n@layer e.controls {\n  .e-switch-input {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n  }\n\n  .e-switch-track {\n    --e-switch-w: 44px;\n    --e-thumb: 14px;\n    --e-thumb-inset: calc(var(--e-space-1) - var(--e-stroke-card));\n    --e-thumb-travel: calc(var(--e-switch-w) - 2 * var(--e-stroke-edge) - var(--e-thumb) - 2 * var(--e-thumb-inset));\n\n    position: relative;\n    flex: none;\n    width: var(--e-switch-w);\n    height: 24px;\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-pill);\n    background: var(--e-surface-tint);\n    transition:\n      background-color var(--e-duration-tap) var(--e-easing-out),\n      border-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-switch-track::after {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    inset-inline-start: var(--e-thumb-inset);\n    width: var(--e-thumb);\n    height: var(--e-thumb);\n    margin-top: calc(var(--e-thumb) / -2);\n    border-radius: 50%;\n    background: var(--e-ink);\n    transition: transform var(--e-duration-move, 160ms) var(--e-easing-out);\n  }\n\n  .e-switch:hover .e-switch-track {\n    border-color: var(--e-ink);\n\n    --e-bc: var(--e-ink);\n  }\n\n  .e-switch-input:checked + .e-switch-track {\n    background: var(--e-primary);\n    border-color: var(--e-primary);\n\n    --e-bc: var(--e-primary);\n  }\n\n  .e-switch-input:checked + .e-switch-track::after {\n    background: var(--e-on-primary);\n    transform: translateX(var(--e-thumb-travel));\n  }\n\n  .e-switch-input:disabled + .e-switch-track {\n    border-style: dashed;\n    outline: 0;\n    background: var(--e-surface-tint);\n  }\n\n  .e-switch-input:disabled + .e-switch-track::after {\n    background: var(--e-muted);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-switch-track::after {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-switch-input:checked + .e-switch-track {\n      forced-color-adjust: none;\n      background: Highlight;\n    }\n\n    .e-switch-track::after {\n      forced-color-adjust: none;\n      background: ButtonText;\n    }\n  }\n\n  :dir(rtl) .e-switch-input:checked + .e-switch-track::after {\n    transform: translateX(calc(-1 * var(--e-thumb-travel)));\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASA,IAAMmB,IAAQC,GAgBRC,IAAQrB,EAAoBoB,GAAA,YAAmB,GAE/CG,IAAKC,QAAaL,EAAM,EAAE,GAC1BM,IAAQC,EAA6B,IAAI,GACzCC,IAAQC,EAAc;E,OAE5BV,EAAa;GACX;GACA,aAAaO,EAAM,OAAO,MAAM;EAClC,CAAC,I,UAICxB,EAAA,GAAAC,EAwBQ,SAAA;GAvBN,OAAKC,EAAA,CAAC,qBAAmB,CAAA,EAAA,sBACQiB,EAAA,SAAQ,GAAIhB,EAAAuB,CAAA,CAAK,CAAC,QAAO,CAAA,CAAG,KAAK,CAAA,CAAA;GACjE,OAAKtB,EAAED,EAAAuB,CAAA,CAAK,CAAC,QAAO,CAAA,CAAG,KAAK;GAC5B,KAAKvB,EAAAmB,CAAA;;GAENjB,EAYE,SAZFC,EAYE;IAXC,IAAIH,EAAAmB,CAAA;IACD,SAAA;IAAJ,KAAIE;IACJ,MAAK;IACL,MAAK;IACL,OAAM;IACL,MAAML,EAAA;IACN,OAAOA,EAAA;IACP,SAASC,EAAA;IACT,UAAUD,EAAA;GACH,GAAAhB,EAAAuB,CAAA,CAAK,CAAC,MAAK,GAAA,EAClB,UAAM,AAAAS,EAAA,QAAA,MAAE,EAAA,QAASC,EAAO,OAA4B,Q;GAEvD,AAAAD,EAAA,OAAA9B,EAAkD,QAAA;IAA5C,OAAM;IAAiB,eAAY;;GACzCA,EAGO,QAHPO,GAGO,CAFFL,EAAAC,EAAAW,EAAA,KAAK,IAAG,KACX,CAAA,GAAYA,EAAA,eAAZnB,EAAA,GAAAC,EAAuE,QAAvEY,GAAuEL,EAArBW,EAAA,WAAW,GAAA,CAAA,K"}
+{"version":3,"file":"ESwitch.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_createElementVNode","_mergeProps","_createTextVNode","_toDisplayString","_createCommentVNode","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","ESwitch_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","props","__props","model","useModel","id","useUid","input","ref","attrs","useFieldAttrs","openBlock","createElementBlock","normalizeClass","unref","normalizeStyle","createElementVNode","mergeProps","_cache","$event","createTextVNode","toDisplayString","createCommentVNode"],"sources":["../../../src/components/Switch/ESwitch.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\nimport \"../Checkbox/choice.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The setting, named by what it does. */\n  label: string;\n  /** A line of detail under the label. */\n  description?: string;\n  /** Disables the switch. */\n  disabled?: boolean;\n  /** The name submitted with a form. */\n  name?: string;\n  /** The value submitted with a form when on. */\n  value?: string;\n  /** The id of the input; the label points at it. @default generated */\n  id?: string;\n}>();\n\n/** On or off. */\nconst model = defineModel<boolean>({ default: false });\n\nconst id = useUid(() => props.id);\nconst input = ref<HTMLInputElement | null>(null);\nconst attrs = useFieldAttrs();\n\ndefineExpose({\n  input,\n  focus: () => input.value?.focus(),\n});\n</script>\n\n<template>\n  <label\n    class=\"e-choice e-switch\"\n    :class=\"[{ 'e-choice--disabled': disabled }, attrs.wrapper().class]\"\n    :style=\"attrs.wrapper().style\"\n    :for=\"id\"\n  >\n    <input\n      :id=\"id\"\n      ref=\"input\"\n      type=\"checkbox\"\n      role=\"switch\"\n      class=\"e-switch-input\"\n      :name=\"name\"\n      :value=\"value\"\n      :checked=\"model\"\n      :disabled=\"disabled\"\n      v-bind=\"attrs.input()\"\n      @change=\"model = ($event.target as HTMLInputElement).checked\"\n    />\n    <span class=\"e-switch-track\" aria-hidden=\"true\" />\n    <span class=\"e-choice-text\">\n      {{ label }}\n      <span v-if=\"description\" class=\"e-choice-desc\">{{ description }}</span>\n    </span>\n  </label>\n</template>\n\n<style>\n@layer e.controls {\n  .e-switch-input {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n  }\n\n  .e-switch-track {\n    --e-switch-w: 44px;\n    --e-thumb: 14px;\n    --e-thumb-inset: calc(var(--e-space-1) - var(--e-stroke-card));\n    --e-thumb-travel: calc(var(--e-switch-w) - 2 * var(--e-stroke-edge) - var(--e-thumb) - 2 * var(--e-thumb-inset));\n\n    position: relative;\n    flex: none;\n    width: var(--e-switch-w);\n    height: 24px;\n    border: var(--e-stroke-edge) solid var(--e-border-strong);\n    border-radius: var(--e-radius-pill);\n    background: var(--e-surface-tint);\n    transition:\n      background-color var(--e-duration-tap) var(--e-easing-out),\n      border-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-switch-track::after {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    inset-inline-start: var(--e-thumb-inset);\n    width: var(--e-thumb);\n    height: var(--e-thumb);\n    margin-top: calc(var(--e-thumb) / -2);\n    border-radius: 50%;\n    background: var(--e-ink);\n    transition: transform var(--e-duration-move, 160ms) var(--e-easing-out);\n  }\n\n  .e-switch:hover .e-switch-track {\n    border-color: var(--e-ink);\n\n  }\n\n  .e-switch-input:checked + .e-switch-track {\n    background: var(--e-primary);\n    border-color: var(--e-primary);\n\n  }\n\n  .e-switch-input:checked + .e-switch-track::after {\n    background: var(--e-on-primary);\n    transform: translateX(var(--e-thumb-travel));\n  }\n\n  .e-switch-input:disabled + .e-switch-track {\n    border-style: dashed;\n    outline: 0;\n    background: var(--e-surface-tint);\n  }\n\n  .e-switch-input:disabled + .e-switch-track::after {\n    background: var(--e-muted);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-switch-track::after {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-switch-input:checked + .e-switch-track {\n      forced-color-adjust: none;\n      background: Highlight;\n    }\n\n    .e-switch-track::after {\n      forced-color-adjust: none;\n      background: ButtonText;\n    }\n  }\n\n  :dir(rtl) .e-switch-input:checked + .e-switch-track::after {\n    transform: translateX(calc(-1 * var(--e-thumb-travel)));\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASA,IAAMmB,IAAQC,GAgBRC,IAAQrB,EAAoBoB,GAAA,YAAmB,GAE/CG,IAAKC,QAAaL,EAAM,EAAE,GAC1BM,IAAQC,EAA6B,IAAI,GACzCC,IAAQC,EAAc;E,OAE5BV,EAAa;GACX;GACA,aAAaO,EAAM,OAAO,MAAM;EAClC,CAAC,I,UAICxB,EAAA,GAAAC,EAwBQ,SAAA;GAvBN,OAAKC,EAAA,CAAC,qBAAmB,CAAA,EAAA,sBACQiB,EAAA,SAAQ,GAAIhB,EAAAuB,CAAA,CAAK,CAAC,QAAO,CAAA,CAAG,KAAK,CAAA,CAAA;GACjE,OAAKtB,EAAED,EAAAuB,CAAA,CAAK,CAAC,QAAO,CAAA,CAAG,KAAK;GAC5B,KAAKvB,EAAAmB,CAAA;;GAENjB,EAYE,SAZFC,EAYE;IAXC,IAAIH,EAAAmB,CAAA;IACD,SAAA;IAAJ,KAAIE;IACJ,MAAK;IACL,MAAK;IACL,OAAM;IACL,MAAML,EAAA;IACN,OAAOA,EAAA;IACP,SAASC,EAAA;IACT,UAAUD,EAAA;GACH,GAAAhB,EAAAuB,CAAA,CAAK,CAAC,MAAK,GAAA,EAClB,UAAM,AAAAS,EAAA,QAAA,MAAE,EAAA,QAASC,EAAO,OAA4B,Q;GAEvD,AAAAD,EAAA,OAAA9B,EAAkD,QAAA;IAA5C,OAAM;IAAiB,eAAY;;GACzCA,EAGO,QAHPO,GAGO,CAFFL,EAAAC,EAAAW,EAAA,KAAK,IAAG,KACX,CAAA,GAAYA,EAAA,eAAZnB,EAAA,GAAAC,EAAuE,QAAvEY,GAAuEL,EAArBW,EAAA,WAAW,GAAA,CAAA,K"}