@eos-ui/vue 0.1.1 → 0.2.0

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

@@ -2,8 +2,8 @@
 import { useMessages as e } from "../../config.js";
 import { useFieldAttrs as t } from "../../composables/useFieldAttrs.js";
 import n from "../Icon/EIcon.js";
-/* empty css                 */
 import r from "../Button/EButton.js";
+/* empty css                 */
 import { createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeModels as d, mergeProps as f, openBlock as p, ref as m, toDisplayString as h, unref as g, useModel as _, withCtx as v, withModifiers as y } from "vue";
 //#region src/components/SearchBar/ESearchBar.vue?vue&type=script&setup=true&lang.ts
 var b = ["aria-label"], x = { class: "e-search-lead" }, S = [

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    /** What screen readers call the box. 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    /** Search is unavailable. Say why in a Notice. */\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\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  .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 1px var(--e-wash-ring);\n  }\n\n  .e-search-clear:active {\n    background: var(--e-wash-press);\n    box-shadow: inset 0 0 0 1.5px 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: 28px;\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    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,GAKPE,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\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"}

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 EHighlight from \"../Combobox/EHighlight.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. */\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. */\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). */\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\"><EHighlight :text=\"item.label\" :query=\"needle\" /></span>\n            <span v-if=\"item.description\" class=\"e-opt-desc\">\n              <EHighlight :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-tint);\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":""}
+{"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":""}

package/dist/components/SearchResults/ESearchResults.vue.d.ts

@@ -10,15 +10,15 @@ export interface SearchResultItem {
     to?: unknown;
 }
 type __VLS_Props = {
-    /** The results, best first. */
+    /** The results, best first: `{ label, description?, href?, to? }`. With no `href` or `to` a link goes to `#`. */
     items: SearchResultItem[];
     /** The accessible name of the list, such as "Search results". */
     label: string;
     /** 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. */
     emptyText?: string;
-    /** The text that was searched for: its first match in each title and description is marked. */
+    /** The text that was searched for: its first match in each title and description is marked, as in `ECombobox` options. */
     query?: string;
-    /** What renders each link: `"a"` by default, or `RouterLink` (or any component that takes `href` or `to` and a default slot). */
+    /** 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`. */
     linkComponent?: string | Component;
 };
 declare function focusFirst(): void;

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

@@ -1,6 +1,6 @@
 /* empty css                */
+import e from "../Combobox/matchHighlight.js";
 /* empty css              */
-import e from "../Combobox/EHighlight.js";
 import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, mergeProps as l, openBlock as u, ref as d, renderList as f, resolveDynamicComponent as p, toDisplayString as m, unref as h, withCtx as g } from "vue";
 //#region src/components/SearchResults/ESearchResults.vue?vue&type=script&setup=true&lang.ts
 var _ = ["aria-label"], v = { class: "e-opt-text" }, y = { class: "e-opt-label" }, b = {

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","EHighlight","_createCommentVNode","_toDisplayString","EHighlight_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 EHighlight from \"../Combobox/EHighlight.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. */\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. */\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). */\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\"><EHighlight :text=\"item.label\" :query=\"needle\" /></span>\n            <span v-if=\"item.description\" class=\"e-opt-desc\">\n              <EHighlight :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-tint);\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,EAAkF,QAAlFS,GAAkF,CAAxDR,EAAiDC,EAAAC,CAAA,GAAA;IAApC,MAAMoB,EAAK;IAAQ,OAAOH,EAAA;G,kCACrDG,EAAK,eAAjB/B,EAAA,GAAAC,EAEO,QAFPiB,GAEO,CADLT,EAAuDC,EAAAC,CAAA,GAAA;IAA1C,MAAMoB,EAAK;IAAc,OAAOH,EAAA;;;E,8CAMvD5B,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    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"}

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. */\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. Flag whichever is rarer. */\n  optional?: boolean;\n  disabled?: boolean;\n  /** The name the radios share, submitted with a form. Generated when left out. */\n  name?: string;\n}>();\n\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-tint);\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) 58%, #000);\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: -4px;\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-tint);\n    color: var(--e-ink);\n    box-shadow: inset 0 -2px 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\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":""}

package/dist/components/Segmented/ESegmented.vue.d.ts

@@ -11,36 +11,40 @@ export default _default;
 declare const __VLS_export: import('vue').DefineComponent<{
     /** Read by screen readers as the name of the group. */
     label: string;
-    /** Two to five. A string is both value and label. */
+    /** Two to five. A string is both value and label. `SegmentedOption` is `{ value, label, icon?, disabled? }`. */
     options: (string | SegmentedOption)[];
     /** Help under the control, linked with `aria-describedby`. */
     hint?: string;
     /** What to fix. Replaces the hint and is announced. */
     error?: string;
-    /** Adds the word "Optional" to the group's accessible name. Flag whichever is rarer. */
+    /** Adds the word "Optional" to the group's accessible name; nothing is shown. Flag whichever is rarer. */
     optional?: boolean;
+    /** Disables every option. */
     disabled?: boolean;
-    /** The name the radios share, submitted with a form. Generated when left out. */
+    /** The name the radios share, submitted with a form. @default generated */
     name?: string;
 } & {
+    /** The active value. @default first option */
     modelValue?: string;
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string | undefined) => any;
 }, string, import('vue').PublicProps, Readonly<{
     /** Read by screen readers as the name of the group. */
     label: string;
-    /** Two to five. A string is both value and label. */
+    /** Two to five. A string is both value and label. `SegmentedOption` is `{ value, label, icon?, disabled? }`. */
     options: (string | SegmentedOption)[];
     /** Help under the control, linked with `aria-describedby`. */
     hint?: string;
     /** What to fix. Replaces the hint and is announced. */
     error?: string;
-    /** Adds the word "Optional" to the group's accessible name. Flag whichever is rarer. */
+    /** Adds the word "Optional" to the group's accessible name; nothing is shown. Flag whichever is rarer. */
     optional?: boolean;
+    /** Disables every option. */
     disabled?: boolean;
-    /** The name the radios share, submitted with a form. Generated when left out. */
+    /** The name the radios share, submitted with a form. @default generated */
     name?: string;
 } & {
+    /** The active value. @default first option */
     modelValue?: string;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;

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. */\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. Flag whichever is rarer. */\n  optional?: boolean;\n  disabled?: boolean;\n  /** The name the radios share, submitted with a form. Generated when left out. */\n  name?: string;\n}>();\n\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-tint);\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) 58%, #000);\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: -4px;\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-tint);\n    color: var(--e-ink);\n    box-shadow: inset 0 -2px 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,GAgBRC,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\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"}

package/dist/components/Select/ESelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"ESelect.js","names":["_sfc_main","ESelect_vue_vue_type_script_setup_true_lang_default","ESelect_default"],"sources":["../../../src/components/Select/ESelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EField from \"../Field/EField.vue\";\nimport type { ELabelProps } from \"../Field/labelProps.js\";\nimport ESelectControl from \"./ESelectControl.vue\";\nimport { normalizeOptions, type EOptionInput } from \"./options.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\n\ninterface ESelectFields {\n  /** Strings, or `{ value, label, description, icon, group, disabled }`. A value is never an empty string. */\n  options: readonly EOptionInput[];\n  /** What the button says while nothing is chosen. Default \"Select\". */\n  placeholder?: string;\n  /** Help that stays under the control. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the control invalid and is announced. */\n  error?: string;\n  /** A word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  disabled?: boolean;\n  /** Submits the chosen value with a form (a hidden input carries it). */\n  name?: string;\n  /** The id of the button; the label points at it. Generated when left out. */\n  id?: string;\n}\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<ELabelProps & ESelectFields>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst open = defineModel<boolean>(\"open\", { default: false });\n\nconst attrs = useFieldAttrs();\nconst options = computed(() => normalizeOptions(props.options));\n\ntype FieldSlot = { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined };\nfunction triggerAttrs(field?: FieldSlot) {\n  return {\n    id: field?.id ?? props.id,\n    \"aria-invalid\": field?.ariaInvalid,\n    \"aria-label\": props.bare ? (props.ariaLabel ?? props.label) : undefined,\n    ...attrs.input(field?.ariaDescribedby),\n  };\n}\n</script>\n\n<template>\n  <div v-if=\"bare\" v-bind=\"attrs.wrapper()\">\n    <ESelectControl\n      v-model=\"model\"\n      v-model:open=\"open\"\n      :options=\"options\"\n      :placeholder=\"placeholder\"\n      :disabled=\"disabled\"\n      :required=\"required\"\n      :name=\"name\"\n      :label=\"ariaLabel ?? label\"\n      :trigger-attrs=\"triggerAttrs()\"\n    />\n  </div>\n  <EField\n    v-else\n    v-bind=\"attrs.wrapper()\"\n    :id=\"id\"\n    :label=\"label ?? ''\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <ESelectControl\n        v-model=\"model\"\n        v-model:open=\"open\"\n        :options=\"options\"\n        :placeholder=\"placeholder\"\n        :disabled=\"disabled\"\n        :required=\"required\"\n        :name=\"name\"\n        :label=\"label\"\n        :trigger-attrs=\"triggerAttrs(field)\"\n      />\n    </template>\n  </EField>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ESelect.js","names":["_sfc_main","ESelect_vue_vue_type_script_setup_true_lang_default","ESelect_default"],"sources":["../../../src/components/Select/ESelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EField from \"../Field/EField.vue\";\nimport type { ELabelProps } from \"../Field/labelProps.js\";\nimport ESelectControl from \"./ESelectControl.vue\";\nimport { normalizeOptions, type EOptionInput } from \"./options.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\n\ninterface ESelectFields {\n  /** Strings, or `{ value, label, description?, icon?, group?, disabled? }`. A string is both value and label; `value` is never an empty string. A new `group` heading starts where `group` changes, so keep groups together. */\n  options: readonly EOptionInput[];\n  /** What the button says while nothing is chosen. @default \"Select\" */\n  placeholder?: string;\n  /** Help that stays under the control. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the control invalid and is announced. */\n  error?: string;\n  /** The `required` attribute and a word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  /** Never opens. */\n  disabled?: boolean;\n  /** Submits the chosen value with a form (a hidden input carries it). */\n  name?: string;\n  /** The id of the button; the label points at it. @default generated */\n  id?: string;\n}\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<ELabelProps & ESelectFields>();\n\n/** The chosen option's `value`; empty is nothing chosen. */\nconst model = defineModel<string>({ default: \"\" });\n\n/** Whether the list is open. A disabled field never opens. */\nconst open = defineModel<boolean>(\"open\", { default: false });\n\nconst attrs = useFieldAttrs();\nconst options = computed(() => normalizeOptions(props.options));\n\ntype FieldSlot = { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined };\nfunction triggerAttrs(field?: FieldSlot) {\n  return {\n    id: field?.id ?? props.id,\n    \"aria-invalid\": field?.ariaInvalid,\n    \"aria-label\": props.bare ? (props.ariaLabel ?? props.label) : undefined,\n    ...attrs.input(field?.ariaDescribedby),\n  };\n}\n</script>\n\n<template>\n  <div v-if=\"bare\" v-bind=\"attrs.wrapper()\">\n    <ESelectControl\n      v-model=\"model\"\n      v-model:open=\"open\"\n      :options=\"options\"\n      :placeholder=\"placeholder\"\n      :disabled=\"disabled\"\n      :required=\"required\"\n      :name=\"name\"\n      :label=\"ariaLabel ?? label\"\n      :trigger-attrs=\"triggerAttrs()\"\n    />\n  </div>\n  <EField\n    v-else\n    v-bind=\"attrs.wrapper()\"\n    :id=\"id\"\n    :label=\"label ?? ''\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <ESelectControl\n        v-model=\"model\"\n        v-model:open=\"open\"\n        :options=\"options\"\n        :placeholder=\"placeholder\"\n        :disabled=\"disabled\"\n        :required=\"required\"\n        :name=\"name\"\n        :label=\"label\"\n        :trigger-attrs=\"triggerAttrs(field)\"\n      />\n    </template>\n  </EField>\n</template>\n"],"mappings":""}

package/dist/components/Select/ESelect.vue.d.ts

@@ -1,25 +1,28 @@
 import { EOptionInput } from './options.js';
 interface ESelectFields {
-    /** Strings, or `{ value, label, description, icon, group, disabled }`. A value is never an empty string. */
+    /** Strings, or `{ value, label, description?, icon?, group?, disabled? }`. A string is both value and label; `value` is never an empty string. A new `group` heading starts where `group` changes, so keep groups together. */
     options: readonly EOptionInput[];
-    /** What the button says while nothing is chosen. Default "Select". */
+    /** What the button says while nothing is chosen. @default "Select" */
     placeholder?: string;
     /** Help that stays under the control. */
     hint?: string;
     /** What to fix. Replaces the hint, marks the control invalid and is announced. */
     error?: string;
-    /** A word beside the label. */
+    /** The `required` attribute and a word beside the label. */
     required?: boolean;
     /** A word beside the label. Flag whichever is rarer. */
     optional?: boolean;
+    /** Never opens. */
     disabled?: boolean;
     /** Submits the chosen value with a form (a hidden input carries it). */
     name?: string;
-    /** The id of the button; the label points at it. Generated when left out. */
+    /** The id of the button; the label points at it. @default generated */
     id?: string;
 }
 type __VLS_ModelProps = {
+    /** The chosen option's `value`; empty is nothing chosen. */
     modelValue?: string;
+    /** Whether the list is open. A disabled field never opens. */
     "open"?: boolean;
 };
 declare const __VLS_export: import('vue').DefineComponent<({
@@ -35,8 +38,8 @@ declare const __VLS_export: import('vue').DefineComponent<({
     label?: string;
     bare: true;
 } & ESelectFields & __VLS_ModelProps), {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:open": (value: boolean) => any;
     "update:modelValue": (value: string) => any;
+    "update:open": (value: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<({
     hideLabel?: boolean;
     ariaLabel?: string;
@@ -50,8 +53,8 @@ declare const __VLS_export: import('vue').DefineComponent<({
     label?: string;
     bare: true;
 } & ESelectFields & __VLS_ModelProps)> & Readonly<{
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/Select/ESelect.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ESelect.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_normalizeProps","_mergeProps","_unref","_createVNode","ESelectControl","_createBlock","EField","_withCtx","EField_default","ESelectControl_default","ESelect_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","\"open\"","\"openModifiers\"","props","__props","model","useModel","open","attrs","useFieldAttrs","options","computed","normalizeOptions","triggerAttrs","field","openBlock","createElementBlock","normalizeProps","mergeProps","unref","createVNode","_cache","$event","createBlock","withCtx"],"sources":["../../../src/components/Select/ESelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EField from \"../Field/EField.vue\";\nimport type { ELabelProps } from \"../Field/labelProps.js\";\nimport ESelectControl from \"./ESelectControl.vue\";\nimport { normalizeOptions, type EOptionInput } from \"./options.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\n\ninterface ESelectFields {\n  /** Strings, or `{ value, label, description, icon, group, disabled }`. A value is never an empty string. */\n  options: readonly EOptionInput[];\n  /** What the button says while nothing is chosen. Default \"Select\". */\n  placeholder?: string;\n  /** Help that stays under the control. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the control invalid and is announced. */\n  error?: string;\n  /** A word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  disabled?: boolean;\n  /** Submits the chosen value with a form (a hidden input carries it). */\n  name?: string;\n  /** The id of the button; the label points at it. Generated when left out. */\n  id?: string;\n}\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<ELabelProps & ESelectFields>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst open = defineModel<boolean>(\"open\", { default: false });\n\nconst attrs = useFieldAttrs();\nconst options = computed(() => normalizeOptions(props.options));\n\ntype FieldSlot = { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined };\nfunction triggerAttrs(field?: FieldSlot) {\n  return {\n    id: field?.id ?? props.id,\n    \"aria-invalid\": field?.ariaInvalid,\n    \"aria-label\": props.bare ? (props.ariaLabel ?? props.label) : undefined,\n    ...attrs.input(field?.ariaDescribedby),\n  };\n}\n</script>\n\n<template>\n  <div v-if=\"bare\" v-bind=\"attrs.wrapper()\">\n    <ESelectControl\n      v-model=\"model\"\n      v-model:open=\"open\"\n      :options=\"options\"\n      :placeholder=\"placeholder\"\n      :disabled=\"disabled\"\n      :required=\"required\"\n      :name=\"name\"\n      :label=\"ariaLabel ?? label\"\n      :trigger-attrs=\"triggerAttrs()\"\n    />\n  </div>\n  <EField\n    v-else\n    v-bind=\"attrs.wrapper()\"\n    :id=\"id\"\n    :label=\"label ?? ''\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <ESelectControl\n        v-model=\"model\"\n        v-model:open=\"open\"\n        :options=\"options\"\n        :placeholder=\"placeholder\"\n        :disabled=\"disabled\"\n        :required=\"required\"\n        :name=\"name\"\n        :label=\"label\"\n        :trigger-attrs=\"triggerAttrs(field)\"\n      />\n    </template>\n  </EField>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+BA,IAAMkB,IAAQC,GAERC,IAAQpB,EAAmBmB,GAAA,YAAgB,GAE3CG,IAAOtB,EAAoBmB,GAAC,MAA0B,GAEtDI,IAAQC,EAAc,GACtBC,IAAUC,QAAeC,EAAiBT,EAAM,OAAO,CAAC;EAG9D,SAASU,EAAa,GAAmB;GACvC,OAAO;IACL,IAAIC,GAAO,MAAMX,EAAM;IACvB,gBAAgBW,GAAO;IACvB,cAAcX,EAAM,OAAQA,EAAM,aAAaA,EAAM,QAAS,KAAA;IAC9D,GAAGK,EAAM,MAAMM,GAAO,eAAe;GACvC;EACF;E,iBAIaV,EAAA,QAAXlB,EAAA,GAAAC,EAYM,OAAAC,EAAAC,EAAA,EAAA,KAAA,EAAA,GAZmBC,EAAAkB,CAAA,CAAK,CAAC,QAAO,CAAA,CAAA,GAAA,CACpCjB,EAUEC,GAAA;GATS,YAAAa,EAAA;GAAA,uBAAA,AAAAgB,EAAA,QAAA,MAAA,EAAK,QAAAC;GACN,MAAMf,EAAA;GAAA,iBAAA,AAAAc,EAAA,QAAA,MAAA,EAAI,QAAAC;GACjB,SAASZ,EAAA;GACT,aAAaN,EAAA;GACb,UAAUA,EAAA;GACV,UAAUA,EAAA;GACV,MAAMA,EAAA;GACN,OAAOA,EAAA,aAAaA,EAAA;GACpB,iBAAeS,EAAY;;;;;;;;;;;E,aAGhC3B,EAAA,GAAAO,EAwBSC,GAxBTL,EAwBS,EAAA,KAAA,EAAA,GAtBCC,EAAAkB,CAAA,CAAK,CAAC,QAAO,GAAA;GACpB,IAAIJ,EAAA;GACJ,OAAOA,EAAA,SAAK;GACZ,cAAYA,EAAA;GACZ,MAAMA,EAAA;GACN,OAAOA,EAAA;GACP,UAAUA,EAAA;GACV,UAAUA,EAAA;;GAEA,SAAOT,GAAE,MAAK,CACvBJ,EAUEC,GAAA;IATS,YAAAa,EAAA;IAAA,uBAAA,AAAAgB,EAAA,QAAA,MAAA,EAAK,QAAAC;IACN,MAAMf,EAAA;IAAA,iBAAA,AAAAc,EAAA,QAAA,MAAA,EAAI,QAAAC;IACjB,SAASZ,EAAA;IACT,aAAaN,EAAA;IACb,UAAUA,EAAA;IACV,UAAUA,EAAA;IACV,MAAMA,EAAA;IACN,OAAOA,EAAA;IACP,iBAAeS,EAAaC,CAAK"}
+{"version":3,"file":"ESelect.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_normalizeProps","_mergeProps","_unref","_createVNode","ESelectControl","_createBlock","EField","_withCtx","EField_default","ESelectControl_default","ESelect_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","\"open\"","\"openModifiers\"","props","__props","model","useModel","open","attrs","useFieldAttrs","options","computed","normalizeOptions","triggerAttrs","field","openBlock","createElementBlock","normalizeProps","mergeProps","unref","createVNode","_cache","$event","createBlock","withCtx"],"sources":["../../../src/components/Select/ESelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EField from \"../Field/EField.vue\";\nimport type { ELabelProps } from \"../Field/labelProps.js\";\nimport ESelectControl from \"./ESelectControl.vue\";\nimport { normalizeOptions, type EOptionInput } from \"./options.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\n\ninterface ESelectFields {\n  /** Strings, or `{ value, label, description?, icon?, group?, disabled? }`. A string is both value and label; `value` is never an empty string. A new `group` heading starts where `group` changes, so keep groups together. */\n  options: readonly EOptionInput[];\n  /** What the button says while nothing is chosen. @default \"Select\" */\n  placeholder?: string;\n  /** Help that stays under the control. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the control invalid and is announced. */\n  error?: string;\n  /** The `required` attribute and a word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  /** Never opens. */\n  disabled?: boolean;\n  /** Submits the chosen value with a form (a hidden input carries it). */\n  name?: string;\n  /** The id of the button; the label points at it. @default generated */\n  id?: string;\n}\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<ELabelProps & ESelectFields>();\n\n/** The chosen option's `value`; empty is nothing chosen. */\nconst model = defineModel<string>({ default: \"\" });\n\n/** Whether the list is open. A disabled field never opens. */\nconst open = defineModel<boolean>(\"open\", { default: false });\n\nconst attrs = useFieldAttrs();\nconst options = computed(() => normalizeOptions(props.options));\n\ntype FieldSlot = { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined };\nfunction triggerAttrs(field?: FieldSlot) {\n  return {\n    id: field?.id ?? props.id,\n    \"aria-invalid\": field?.ariaInvalid,\n    \"aria-label\": props.bare ? (props.ariaLabel ?? props.label) : undefined,\n    ...attrs.input(field?.ariaDescribedby),\n  };\n}\n</script>\n\n<template>\n  <div v-if=\"bare\" v-bind=\"attrs.wrapper()\">\n    <ESelectControl\n      v-model=\"model\"\n      v-model:open=\"open\"\n      :options=\"options\"\n      :placeholder=\"placeholder\"\n      :disabled=\"disabled\"\n      :required=\"required\"\n      :name=\"name\"\n      :label=\"ariaLabel ?? label\"\n      :trigger-attrs=\"triggerAttrs()\"\n    />\n  </div>\n  <EField\n    v-else\n    v-bind=\"attrs.wrapper()\"\n    :id=\"id\"\n    :label=\"label ?? ''\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <ESelectControl\n        v-model=\"model\"\n        v-model:open=\"open\"\n        :options=\"options\"\n        :placeholder=\"placeholder\"\n        :disabled=\"disabled\"\n        :required=\"required\"\n        :name=\"name\"\n        :label=\"label\"\n        :trigger-attrs=\"triggerAttrs(field)\"\n      />\n    </template>\n  </EField>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCA,IAAMkB,IAAQC,GAGRC,IAAQpB,EAAmBmB,GAAA,YAAgB,GAG3CG,IAAOtB,EAAoBmB,GAAC,MAA0B,GAEtDI,IAAQC,EAAc,GACtBC,IAAUC,QAAeC,EAAiBT,EAAM,OAAO,CAAC;EAG9D,SAASU,EAAa,GAAmB;GACvC,OAAO;IACL,IAAIC,GAAO,MAAMX,EAAM;IACvB,gBAAgBW,GAAO;IACvB,cAAcX,EAAM,OAAQA,EAAM,aAAaA,EAAM,QAAS,KAAA;IAC9D,GAAGK,EAAM,MAAMM,GAAO,eAAe;GACvC;EACF;E,iBAIaV,EAAA,QAAXlB,EAAA,GAAAC,EAYM,OAAAC,EAAAC,EAAA,EAAA,KAAA,EAAA,GAZmBC,EAAAkB,CAAA,CAAK,CAAC,QAAO,CAAA,CAAA,GAAA,CACpCjB,EAUEC,GAAA;GATS,YAAAa,EAAA;GAAA,uBAAA,AAAAgB,EAAA,QAAA,MAAA,EAAK,QAAAC;GACN,MAAMf,EAAA;GAAA,iBAAA,AAAAc,EAAA,QAAA,MAAA,EAAI,QAAAC;GACjB,SAASZ,EAAA;GACT,aAAaN,EAAA;GACb,UAAUA,EAAA;GACV,UAAUA,EAAA;GACV,MAAMA,EAAA;GACN,OAAOA,EAAA,aAAaA,EAAA;GACpB,iBAAeS,EAAY;;;;;;;;;;;E,aAGhC3B,EAAA,GAAAO,EAwBSC,GAxBTL,EAwBS,EAAA,KAAA,EAAA,GAtBCC,EAAAkB,CAAA,CAAK,CAAC,QAAO,GAAA;GACpB,IAAIJ,EAAA;GACJ,OAAOA,EAAA,SAAK;GACZ,cAAYA,EAAA;GACZ,MAAMA,EAAA;GACN,OAAOA,EAAA;GACP,UAAUA,EAAA;GACV,UAAUA,EAAA;;GAEA,SAAOT,GAAE,MAAK,CACvBJ,EAUEC,GAAA;IATS,YAAAa,EAAA;IAAA,uBAAA,AAAAgB,EAAA,QAAA,MAAA,EAAK,QAAAC;IACN,MAAMf,EAAA;IAAA,iBAAA,AAAAc,EAAA,QAAA,MAAA,EAAI,QAAAC;IACjB,SAASZ,EAAA;IACT,aAAaN,EAAA;IACb,UAAUA,EAAA;IACV,UAAUA,EAAA;IACV,MAAMA,EAAA;IACN,OAAOA,EAAA;IACP,iBAAeS,EAAaC,CAAK"}

package/dist/components/Select/ESelectControl.vue.d.ts

@@ -17,11 +17,11 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:open": (value: boolean) => any;
     "update:modelValue": (value: string) => any;
+    "update:open": (value: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/Select/ESelectControl.vue_vue_type_script_setup_true_lang.js

@@ -2,10 +2,10 @@
 import { useMessages as e, usePortalTarget as t } from "../../config.js";
 import n from "../Icon/EIcon.js";
 /* empty css                 */
-import r from "./ESelectOption.js";
-import { sectionOptions as i } from "./options.js";
-import { useQuietFocus as a } from "./quietFocus.js";
+import { sectionOptions as r } from "./options.js";
 /* empty css      */
+import i from "./ESelectOption.js";
+import { useQuietFocus as a } from "./quietFocus.js";
 import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createTextVNode as d, createVNode as f, defineComponent as p, mergeModels as m, mergeProps as h, openBlock as g, renderList as _, toDisplayString as v, unref as y, useModel as b, watch as x, withCtx as S } from "vue";
 import { SelectContent as C, SelectGroup as w, SelectLabel as T, SelectPortal as E, SelectRoot as D, SelectTrigger as O, SelectViewport as k } from "reka-ui";
 //#region src/components/Select/ESelectControl.vue?vue&type=script&setup=true&lang.ts
@@ -36,7 +36,7 @@ var A = { class: "e-sel" }, j = {
 	}),
 	emits: ["update:modelValue", "update:open"],
 	setup(p) {
-		let m = p, P = b(p, "modelValue"), F = e(), I = t(), L = s(() => i(m.options)), R = s(() => m.options.find((e) => e.value === P.value)), z = "", B = 0, V = b(p, "open"), H = s(() => V.value && !m.disabled), U = a(H, (e) => !!e.closest("[role=listbox]"));
+		let m = p, P = b(p, "modelValue"), F = e(), I = t(), L = s(() => r(m.options)), R = s(() => m.options.find((e) => e.value === P.value)), z = "", B = 0, V = b(p, "open"), H = s(() => V.value && !m.disabled), U = a(H, (e) => !!e.closest("[role=listbox]"));
 		x(H, (e) => {
 			e && !U.personOpened() && U.undoFocusSteal();
 		}, {
@@ -104,13 +104,13 @@ var A = { class: "e-sel" }, j = {
 							default: S(() => [f(y(T), { class: "e-opt-group" }, {
 								default: S(() => [d(v(e.group), 1)]),
 								_: 2
-							}, 1024), (g(!0), u(o, null, _(e.options, (e) => (g(), c(r, {
+							}, 1024), (g(!0), u(o, null, _(e.options, (e) => (g(), c(i, {
 								key: e.value,
 								option: e,
 								selected: e.value === P.value
 							}, null, 8, ["option", "selected"]))), 128))]),
 							_: 2
-						}, 1024)) : (g(!0), u(o, { key: 1 }, _(e.options, (e) => (g(), c(r, {
+						}, 1024)) : (g(!0), u(o, { key: 1 }, _(e.options, (e) => (g(), c(i, {
 							key: e.value,
 							option: e,
 							selected: e.value === P.value

package/dist/components/Select/options.d.ts

@@ -1,5 +1,5 @@
 import { IconProp } from '../../icons/types.js';
-/** One choice in a Select, Combobox, Autocomplete or MultiSelect. */
+/** One choice in a Select or Combobox. */
 export interface EOption {
     /** What the model holds when this option is chosen. Never an empty string. */
     value: string;

package/dist/components/Select/options.js.map

@@ -1 +1 @@
-{"version":3,"file":"options.js","names":["normalizeOptions","options","o","sectionOptions","sections","option","last"],"sources":["../../../src/components/Select/options.ts"],"sourcesContent":["import type { IconProp } from \"../../icons/types.js\";\n\n/** One choice in a Select, Combobox, Autocomplete or MultiSelect. */\nexport interface EOption {\n  /** What the model holds when this option is chosen. Never an empty string. */\n  value: string;\n  /** What people read. */\n  label: string;\n  /** A second, muted line under the label. Searched too. */\n  description?: string;\n  /** An icon before the label. */\n  icon?: IconProp;\n  /** A heading for a run of options. A new heading starts when this changes from the option before. */\n  group?: string;\n  /** Not choosable. Stays visible, muted. */\n  disabled?: boolean;\n}\n\n/** An option as a consumer writes it: a bare string stands for `{ value: s, label: s }`. */\nexport type EOptionInput = string | EOption;\n\n/** A run of options under one heading (or none). */\nexport interface EOptionSection {\n  group: string | undefined;\n  options: EOption[];\n}\n\n/** Turns strings into options. */\nexport function normalizeOptions(options: readonly EOptionInput[] | undefined): EOption[] {\n  return (options ?? []).map((o) => (typeof o === \"string\" ? { value: o, label: o } : o));\n}\n\n/** Splits options into runs under one heading, in order. A heading repeats only where the group changes. */\nexport function sectionOptions(options: readonly EOption[]): EOptionSection[] {\n  const sections: EOptionSection[] = [];\n  for (const option of options) {\n    const last = sections[sections.length - 1];\n    if (last && last.group === option.group) last.options.push(option);\n    else sections.push({ group: option.group, options: [option] });\n  }\n  return sections;\n}\n"],"mappings":";AA4BA,SAAgBA,EAAiB,GAAyD;CACxF,QAAQC,KAAW,CAAC,EAAA,CAAG,KAAK,MAAO,OAAOC,KAAM,WAAW;EAAE,OAAOA;EAAG,OAAOA;CAAE,IAAIA,CAAE;AACxF;AAGA,SAAgBC,EAAe,GAA+C;CAC5E,IAAMC,IAA6B,CAAC;CACpC,KAAK,IAAMC,KAAUJ,GAAS;EAC5B,IAAMK,IAAOF,EAASA,EAAS,SAAS;EACxC,AAAIE,KAAQA,EAAK,UAAUD,EAAO,QAAOC,EAAK,QAAQ,KAAKD,CAAM,IAC5DD,EAAS,KAAK;GAAE,OAAOC,EAAO;GAAO,SAAS,CAACA,CAAM;EAAE,CAAC;CAC/D;CACA,OAAOD;AACT"}
+{"version":3,"file":"options.js","names":["normalizeOptions","options","o","sectionOptions","sections","option","last"],"sources":["../../../src/components/Select/options.ts"],"sourcesContent":["import type { IconProp } from \"../../icons/types.js\";\n\n/** One choice in a Select or Combobox. */\nexport interface EOption {\n  /** What the model holds when this option is chosen. Never an empty string. */\n  value: string;\n  /** What people read. */\n  label: string;\n  /** A second, muted line under the label. Searched too. */\n  description?: string;\n  /** An icon before the label. */\n  icon?: IconProp;\n  /** A heading for a run of options. A new heading starts when this changes from the option before. */\n  group?: string;\n  /** Not choosable. Stays visible, muted. */\n  disabled?: boolean;\n}\n\n/** An option as a consumer writes it: a bare string stands for `{ value: s, label: s }`. */\nexport type EOptionInput = string | EOption;\n\n/** A run of options under one heading (or none). */\nexport interface EOptionSection {\n  group: string | undefined;\n  options: EOption[];\n}\n\n/** Turns strings into options. */\nexport function normalizeOptions(options: readonly EOptionInput[] | undefined): EOption[] {\n  return (options ?? []).map((o) => (typeof o === \"string\" ? { value: o, label: o } : o));\n}\n\n/** Splits options into runs under one heading, in order. A heading repeats only where the group changes. */\nexport function sectionOptions(options: readonly EOption[]): EOptionSection[] {\n  const sections: EOptionSection[] = [];\n  for (const option of options) {\n    const last = sections[sections.length - 1];\n    if (last && last.group === option.group) last.options.push(option);\n    else sections.push({ group: option.group, options: [option] });\n  }\n  return sections;\n}\n"],"mappings":";AA4BA,SAAgBA,EAAiB,GAAyD;CACxF,QAAQC,KAAW,CAAC,EAAA,CAAG,KAAK,MAAO,OAAOC,KAAM,WAAW;EAAE,OAAOA;EAAG,OAAOA;CAAE,IAAIA,CAAE;AACxF;AAGA,SAAgBC,EAAe,GAA+C;CAC5E,IAAMC,IAA6B,CAAC;CACpC,KAAK,IAAMC,KAAUJ,GAAS;EAC5B,IAAMK,IAAOF,EAASA,EAAS,SAAS;EACxC,AAAIE,KAAQA,EAAK,UAAUD,EAAO,QAAOC,EAAK,QAAQ,KAAKD,CAAM,IAC5DD,EAAS,KAAK;GAAE,OAAOC,EAAO;GAAO,SAAS,CAACA,CAAM;EAAE,CAAC;CAC/D;CACA,OAAOD;AACT"}

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

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

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

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