@eos-ui/vue 0.1.0 → 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.js.map

@@ -1 +1 @@
-{"version":3,"file":"ESelectControl.js","names":["_sfc_main","ESelectControl_vue_vue_type_script_setup_true_lang_default","ESelectControl_default"],"sources":["../../../src/components/Select/ESelectControl.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, watch } from \"vue\";\nimport {\n  SelectContent,\n  SelectGroup,\n  SelectLabel,\n  SelectPortal,\n  SelectRoot,\n  SelectTrigger,\n  SelectViewport,\n} from \"reka-ui\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport ESelectOption from \"./ESelectOption.vue\";\nimport { sectionOptions, type EOption } from \"./options.js\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport { useQuietFocus } from \"./quietFocus.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\nimport \"./panel.css\";\n\nconst props = defineProps<{\n  /** The normalised options. */\n  options: EOption[];\n  placeholder?: string | undefined;\n  disabled?: boolean | undefined;\n  required?: boolean | undefined;\n  name?: string | undefined;\n  /** Names the list. */\n  label?: string | undefined;\n  /** Attributes for the button: id, aria-*, data-*, listeners. */\n  triggerAttrs: Record<string, unknown>;\n}>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst portal = usePortalTarget();\n\nconst sections = computed(() => sectionOptions(props.options));\nconst selected = computed(() => props.options.find((o) => o.value === model.value));\n\nlet typed = \"\";\nlet typedAt = 0;\nconst open = defineModel<boolean>(\"open\", { default: false });\nconst isOpen = computed(() => open.value && !props.disabled);\nconst quiet = useQuietFocus(isOpen, (el) => !!el.closest(\"[role=listbox]\"));\nwatch(\n  isOpen,\n  (now) => {\n    if (now && !quiet.personOpened()) quiet.undoFocusSteal();\n  },\n  { immediate: true, flush: \"post\" },\n);\nfunction closeFocus(e: Event) {\n  if (!quiet.returnsFocus()) e.preventDefault();\n}\nfunction keydown(e: KeyboardEvent) {\n  quiet.intent();\n  typeahead(e);\n}\nfunction typeahead(e: KeyboardEvent) {\n  if (props.disabled || isOpen.value || e.ctrlKey || e.metaKey || e.altKey || e.key.length !== 1) return;\n  if (e.key === \" \" && !typed) return;\n  const now = Date.now();\n  typed = (now - typedAt > 700 ? \"\" : typed) + e.key.toLowerCase();\n  typedAt = now;\n  const list = props.options;\n  const from = list.findIndex((o) => o.value === model.value);\n  for (let j = 0; j < list.length; j++) {\n    const o = list[(from + j + (typed.length === 1 ? 1 : 0) + list.length) % list.length];\n    if (o && !o.disabled && o.label.toLowerCase().startsWith(typed)) {\n      model.value = o.value;\n      break;\n    }\n  }\n}\n</script>\n\n<template>\n  <div class=\"e-sel\">\n    <SelectRoot v-model=\"model\" :open=\"isOpen\" :disabled=\"disabled\" :required=\"required\" @update:open=\"open = $event\">\n      <SelectTrigger\n        class=\"e-input e-sel-trigger\"\n        :tabindex=\"isOpen ? -1 : undefined\"\n        v-bind=\"triggerAttrs\"\n        @pointerdown=\"quiet.intent\"\n        @keydown=\"keydown\"\n      >\n        <span v-if=\"selected\" class=\"e-sel-value\">\n          <EIcon v-if=\"selected.icon\" :name=\"selected.icon\" />{{ selected.label }}\n        </span>\n        <span v-else class=\"e-sel-placeholder\">{{ placeholder || t(\"select\") }}</span>\n        <EIcon name=\"chevron-down\" bold />\n      </SelectTrigger>\n      <SelectPortal :to=\"portal\">\n        <SelectContent\n          position=\"popper\"\n          align=\"start\"\n          :side-offset=\"6\"\n          :collision-padding=\"8\"\n          :body-lock=\"false\"\n          class=\"e-popover e-listpanel e-root\"\n          :aria-label=\"label\"\n          @close-auto-focus=\"closeFocus\"\n        >\n          <SelectViewport>\n            <template v-for=\"(section, i) in sections\" :key=\"i\">\n              <SelectGroup v-if=\"section.group\" class=\"e-opt-set\">\n                <SelectLabel class=\"e-opt-group\">{{ section.group }}</SelectLabel>\n                <ESelectOption v-for=\"o in section.options\" :key=\"o.value\" :option=\"o\" :selected=\"o.value === model\" />\n              </SelectGroup>\n              <template v-else>\n                <ESelectOption v-for=\"o in section.options\" :key=\"o.value\" :option=\"o\" :selected=\"o.value === model\" />\n              </template>\n            </template>\n          </SelectViewport>\n        </SelectContent>\n      </SelectPortal>\n    </SelectRoot>\n    <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"model\" />\n  </div>\n</template>\n\n<style>\n@layer e.controls {\n  .e-sel {\n    position: relative;\n  }\n\n  .e-sel-trigger {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--e-space-2);\n    padding-inline-end: var(--e-space-3);\n    text-align: start;\n    cursor: pointer;\n  }\n\n  .e-sel-trigger[aria-expanded=\"true\"] {\n    border-color: var(--e-ink);\n    background-color: var(--e-surface);\n  }\n\n  .e-sel-value {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .e-sel-placeholder {\n    color: var(--e-muted);\n  }\n\n  .e-sel-trigger > .e-icon {\n    flex: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ESelectControl.js","names":["_sfc_main","ESelectControl_vue_vue_type_script_setup_true_lang_default","ESelectControl_default"],"sources":["../../../src/components/Select/ESelectControl.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, watch } from \"vue\";\nimport {\n  SelectContent,\n  SelectGroup,\n  SelectLabel,\n  SelectPortal,\n  SelectRoot,\n  SelectTrigger,\n  SelectViewport,\n} from \"reka-ui\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport ESelectOption from \"./ESelectOption.vue\";\nimport { sectionOptions, type EOption } from \"./options.js\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport { useQuietFocus } from \"./quietFocus.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\nimport \"./panel.css\";\n\nconst props = defineProps<{\n  /** The normalised options. */\n  options: EOption[];\n  placeholder?: string | undefined;\n  disabled?: boolean | undefined;\n  required?: boolean | undefined;\n  name?: string | undefined;\n  /** Names the list. */\n  label?: string | undefined;\n  /** Attributes for the button: id, aria-*, data-*, listeners. */\n  triggerAttrs: Record<string, unknown>;\n}>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst portal = usePortalTarget();\n\nconst sections = computed(() => sectionOptions(props.options));\nconst selected = computed(() => props.options.find((o) => o.value === model.value));\n\nlet typed = \"\";\nlet typedAt = 0;\nconst open = defineModel<boolean>(\"open\", { default: false });\nconst isOpen = computed(() => open.value && !props.disabled);\nconst quiet = useQuietFocus(isOpen, (el) => !!el.closest(\"[role=listbox]\"));\nwatch(\n  isOpen,\n  (now) => {\n    if (now && !quiet.personOpened()) quiet.undoFocusSteal();\n  },\n  { immediate: true, flush: \"post\" },\n);\nfunction closeFocus(e: Event) {\n  if (!quiet.returnsFocus()) e.preventDefault();\n}\nfunction keydown(e: KeyboardEvent) {\n  quiet.intent();\n  typeahead(e);\n}\nfunction typeahead(e: KeyboardEvent) {\n  if (props.disabled || isOpen.value || e.ctrlKey || e.metaKey || e.altKey || e.key.length !== 1) return;\n  if (e.key === \" \" && !typed) return;\n  const now = Date.now();\n  typed = (now - typedAt > 700 ? \"\" : typed) + e.key.toLowerCase();\n  typedAt = now;\n  const list = props.options;\n  const from = list.findIndex((o) => o.value === model.value);\n  for (let j = 0; j < list.length; j++) {\n    const o = list[(from + j + (typed.length === 1 ? 1 : 0) + list.length) % list.length];\n    if (o && !o.disabled && o.label.toLowerCase().startsWith(typed)) {\n      model.value = o.value;\n      break;\n    }\n  }\n}\n</script>\n\n<template>\n  <div class=\"e-sel\">\n    <SelectRoot v-model=\"model\" :open=\"isOpen\" :disabled=\"disabled\" :required=\"required\" @update:open=\"open = $event\">\n      <SelectTrigger\n        class=\"e-input e-sel-trigger\"\n        :tabindex=\"isOpen ? -1 : undefined\"\n        v-bind=\"triggerAttrs\"\n        @pointerdown=\"quiet.intent\"\n        @keydown=\"keydown\"\n      >\n        <span v-if=\"selected\" class=\"e-sel-value\">\n          <EIcon v-if=\"selected.icon\" :name=\"selected.icon\" />{{ selected.label }}\n        </span>\n        <span v-else class=\"e-sel-placeholder\">{{ placeholder || t(\"select\") }}</span>\n        <EIcon name=\"chevron-down\" bold />\n      </SelectTrigger>\n      <SelectPortal :to=\"portal\">\n        <SelectContent\n          position=\"popper\"\n          align=\"start\"\n          :side-offset=\"6\"\n          :collision-padding=\"8\"\n          :body-lock=\"false\"\n          class=\"e-popover e-listpanel e-root\"\n          :aria-label=\"label\"\n          @close-auto-focus=\"closeFocus\"\n        >\n          <SelectViewport>\n            <template v-for=\"(section, i) in sections\" :key=\"i\">\n              <SelectGroup v-if=\"section.group\" class=\"e-opt-set\">\n                <SelectLabel class=\"e-opt-group\">{{ section.group }}</SelectLabel>\n                <ESelectOption v-for=\"o in section.options\" :key=\"o.value\" :option=\"o\" :selected=\"o.value === model\" />\n              </SelectGroup>\n              <template v-else>\n                <ESelectOption v-for=\"o in section.options\" :key=\"o.value\" :option=\"o\" :selected=\"o.value === model\" />\n              </template>\n            </template>\n          </SelectViewport>\n        </SelectContent>\n      </SelectPortal>\n    </SelectRoot>\n    <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"model\" />\n  </div>\n</template>\n\n<style>\n@layer e.controls {\n  .e-sel {\n    position: relative;\n  }\n\n  .e-sel-trigger {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--e-space-2);\n    padding-inline-end: var(--e-space-3);\n    text-align: start;\n    cursor: pointer;\n  }\n\n  .e-sel-trigger[aria-expanded=\"true\"] {\n    border-color: var(--e-ink);\n    background-color: var(--e-surface);\n  }\n\n  .e-sel-value {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    min-width: 0;\n    overflow: hidden;\n    line-height: 1.4;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .e-sel-placeholder {\n    color: var(--e-muted);\n  }\n\n  .e-sel-trigger > .e-icon {\n    flex: none;\n  }\n}\n</style>\n"],"mappings":""}

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/ESelectControl.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ESelectControl.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_createVNode","_unref","_withCtx","_mergeProps","_createBlock","EIcon","_createCommentVNode","_createTextVNode","_toDisplayString","_Fragment","_renderList","ESelectOption","EIcon_default","ESelectOption_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","ESelectControl_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","\"open\"","\"openModifiers\"","props","__props","model","useModel","t","useMessages","portal","usePortalTarget","sections","computed","sectionOptions","selected","o","typed","typedAt","open","isOpen","quiet","useQuietFocus","el","now","closeFocus","keydown","typeahead","list","from","j","openBlock","createElementBlock","createVNode","unref","SelectRoot","_cache","$event","withCtx","SelectTrigger","mergeProps","createBlock","createCommentVNode","createTextVNode","toDisplayString","SelectPortal","SelectContent","SelectViewport","Fragment","renderList","i","section","SelectGroup","SelectLabel"],"sources":["../../../src/components/Select/ESelectControl.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, watch } from \"vue\";\nimport {\n  SelectContent,\n  SelectGroup,\n  SelectLabel,\n  SelectPortal,\n  SelectRoot,\n  SelectTrigger,\n  SelectViewport,\n} from \"reka-ui\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport ESelectOption from \"./ESelectOption.vue\";\nimport { sectionOptions, type EOption } from \"./options.js\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport { useQuietFocus } from \"./quietFocus.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\nimport \"./panel.css\";\n\nconst props = defineProps<{\n  /** The normalised options. */\n  options: EOption[];\n  placeholder?: string | undefined;\n  disabled?: boolean | undefined;\n  required?: boolean | undefined;\n  name?: string | undefined;\n  /** Names the list. */\n  label?: string | undefined;\n  /** Attributes for the button: id, aria-*, data-*, listeners. */\n  triggerAttrs: Record<string, unknown>;\n}>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst portal = usePortalTarget();\n\nconst sections = computed(() => sectionOptions(props.options));\nconst selected = computed(() => props.options.find((o) => o.value === model.value));\n\nlet typed = \"\";\nlet typedAt = 0;\nconst open = defineModel<boolean>(\"open\", { default: false });\nconst isOpen = computed(() => open.value && !props.disabled);\nconst quiet = useQuietFocus(isOpen, (el) => !!el.closest(\"[role=listbox]\"));\nwatch(\n  isOpen,\n  (now) => {\n    if (now && !quiet.personOpened()) quiet.undoFocusSteal();\n  },\n  { immediate: true, flush: \"post\" },\n);\nfunction closeFocus(e: Event) {\n  if (!quiet.returnsFocus()) e.preventDefault();\n}\nfunction keydown(e: KeyboardEvent) {\n  quiet.intent();\n  typeahead(e);\n}\nfunction typeahead(e: KeyboardEvent) {\n  if (props.disabled || isOpen.value || e.ctrlKey || e.metaKey || e.altKey || e.key.length !== 1) return;\n  if (e.key === \" \" && !typed) return;\n  const now = Date.now();\n  typed = (now - typedAt > 700 ? \"\" : typed) + e.key.toLowerCase();\n  typedAt = now;\n  const list = props.options;\n  const from = list.findIndex((o) => o.value === model.value);\n  for (let j = 0; j < list.length; j++) {\n    const o = list[(from + j + (typed.length === 1 ? 1 : 0) + list.length) % list.length];\n    if (o && !o.disabled && o.label.toLowerCase().startsWith(typed)) {\n      model.value = o.value;\n      break;\n    }\n  }\n}\n</script>\n\n<template>\n  <div class=\"e-sel\">\n    <SelectRoot v-model=\"model\" :open=\"isOpen\" :disabled=\"disabled\" :required=\"required\" @update:open=\"open = $event\">\n      <SelectTrigger\n        class=\"e-input e-sel-trigger\"\n        :tabindex=\"isOpen ? -1 : undefined\"\n        v-bind=\"triggerAttrs\"\n        @pointerdown=\"quiet.intent\"\n        @keydown=\"keydown\"\n      >\n        <span v-if=\"selected\" class=\"e-sel-value\">\n          <EIcon v-if=\"selected.icon\" :name=\"selected.icon\" />{{ selected.label }}\n        </span>\n        <span v-else class=\"e-sel-placeholder\">{{ placeholder || t(\"select\") }}</span>\n        <EIcon name=\"chevron-down\" bold />\n      </SelectTrigger>\n      <SelectPortal :to=\"portal\">\n        <SelectContent\n          position=\"popper\"\n          align=\"start\"\n          :side-offset=\"6\"\n          :collision-padding=\"8\"\n          :body-lock=\"false\"\n          class=\"e-popover e-listpanel e-root\"\n          :aria-label=\"label\"\n          @close-auto-focus=\"closeFocus\"\n        >\n          <SelectViewport>\n            <template v-for=\"(section, i) in sections\" :key=\"i\">\n              <SelectGroup v-if=\"section.group\" class=\"e-opt-set\">\n                <SelectLabel class=\"e-opt-group\">{{ section.group }}</SelectLabel>\n                <ESelectOption v-for=\"o in section.options\" :key=\"o.value\" :option=\"o\" :selected=\"o.value === model\" />\n              </SelectGroup>\n              <template v-else>\n                <ESelectOption v-for=\"o in section.options\" :key=\"o.value\" :option=\"o\" :selected=\"o.value === model\" />\n              </template>\n            </template>\n          </SelectViewport>\n        </SelectContent>\n      </SelectPortal>\n    </SelectRoot>\n    <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"model\" />\n  </div>\n</template>\n\n<style>\n@layer e.controls {\n  .e-sel {\n    position: relative;\n  }\n\n  .e-sel-trigger {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--e-space-2);\n    padding-inline-end: var(--e-space-3);\n    text-align: start;\n    cursor: pointer;\n  }\n\n  .e-sel-trigger[aria-expanded=\"true\"] {\n    border-color: var(--e-ink);\n    background-color: var(--e-surface);\n  }\n\n  .e-sel-value {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .e-sel-placeholder {\n    color: var(--e-muted);\n  }\n\n  .e-sel-trigger > .e-icon {\n    flex: none;\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"ESelectControl.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_createVNode","_unref","_withCtx","_mergeProps","_createBlock","EIcon","_createCommentVNode","_createTextVNode","_toDisplayString","_Fragment","_renderList","ESelectOption","EIcon_default","ESelectOption_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","ESelectControl_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","\"open\"","\"openModifiers\"","props","__props","model","useModel","t","useMessages","portal","usePortalTarget","sections","computed","sectionOptions","selected","o","typed","typedAt","open","isOpen","quiet","useQuietFocus","el","now","closeFocus","keydown","typeahead","list","from","j","openBlock","createElementBlock","createVNode","unref","SelectRoot","_cache","$event","withCtx","SelectTrigger","mergeProps","createBlock","createCommentVNode","createTextVNode","toDisplayString","SelectPortal","SelectContent","SelectViewport","Fragment","renderList","i","section","SelectGroup","SelectLabel"],"sources":["../../../src/components/Select/ESelectControl.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, watch } from \"vue\";\nimport {\n  SelectContent,\n  SelectGroup,\n  SelectLabel,\n  SelectPortal,\n  SelectRoot,\n  SelectTrigger,\n  SelectViewport,\n} from \"reka-ui\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport ESelectOption from \"./ESelectOption.vue\";\nimport { sectionOptions, type EOption } from \"./options.js\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport { useQuietFocus } from \"./quietFocus.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\nimport \"./panel.css\";\n\nconst props = defineProps<{\n  /** The normalised options. */\n  options: EOption[];\n  placeholder?: string | undefined;\n  disabled?: boolean | undefined;\n  required?: boolean | undefined;\n  name?: string | undefined;\n  /** Names the list. */\n  label?: string | undefined;\n  /** Attributes for the button: id, aria-*, data-*, listeners. */\n  triggerAttrs: Record<string, unknown>;\n}>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst portal = usePortalTarget();\n\nconst sections = computed(() => sectionOptions(props.options));\nconst selected = computed(() => props.options.find((o) => o.value === model.value));\n\nlet typed = \"\";\nlet typedAt = 0;\nconst open = defineModel<boolean>(\"open\", { default: false });\nconst isOpen = computed(() => open.value && !props.disabled);\nconst quiet = useQuietFocus(isOpen, (el) => !!el.closest(\"[role=listbox]\"));\nwatch(\n  isOpen,\n  (now) => {\n    if (now && !quiet.personOpened()) quiet.undoFocusSteal();\n  },\n  { immediate: true, flush: \"post\" },\n);\nfunction closeFocus(e: Event) {\n  if (!quiet.returnsFocus()) e.preventDefault();\n}\nfunction keydown(e: KeyboardEvent) {\n  quiet.intent();\n  typeahead(e);\n}\nfunction typeahead(e: KeyboardEvent) {\n  if (props.disabled || isOpen.value || e.ctrlKey || e.metaKey || e.altKey || e.key.length !== 1) return;\n  if (e.key === \" \" && !typed) return;\n  const now = Date.now();\n  typed = (now - typedAt > 700 ? \"\" : typed) + e.key.toLowerCase();\n  typedAt = now;\n  const list = props.options;\n  const from = list.findIndex((o) => o.value === model.value);\n  for (let j = 0; j < list.length; j++) {\n    const o = list[(from + j + (typed.length === 1 ? 1 : 0) + list.length) % list.length];\n    if (o && !o.disabled && o.label.toLowerCase().startsWith(typed)) {\n      model.value = o.value;\n      break;\n    }\n  }\n}\n</script>\n\n<template>\n  <div class=\"e-sel\">\n    <SelectRoot v-model=\"model\" :open=\"isOpen\" :disabled=\"disabled\" :required=\"required\" @update:open=\"open = $event\">\n      <SelectTrigger\n        class=\"e-input e-sel-trigger\"\n        :tabindex=\"isOpen ? -1 : undefined\"\n        v-bind=\"triggerAttrs\"\n        @pointerdown=\"quiet.intent\"\n        @keydown=\"keydown\"\n      >\n        <span v-if=\"selected\" class=\"e-sel-value\">\n          <EIcon v-if=\"selected.icon\" :name=\"selected.icon\" />{{ selected.label }}\n        </span>\n        <span v-else class=\"e-sel-placeholder\">{{ placeholder || t(\"select\") }}</span>\n        <EIcon name=\"chevron-down\" bold />\n      </SelectTrigger>\n      <SelectPortal :to=\"portal\">\n        <SelectContent\n          position=\"popper\"\n          align=\"start\"\n          :side-offset=\"6\"\n          :collision-padding=\"8\"\n          :body-lock=\"false\"\n          class=\"e-popover e-listpanel e-root\"\n          :aria-label=\"label\"\n          @close-auto-focus=\"closeFocus\"\n        >\n          <SelectViewport>\n            <template v-for=\"(section, i) in sections\" :key=\"i\">\n              <SelectGroup v-if=\"section.group\" class=\"e-opt-set\">\n                <SelectLabel class=\"e-opt-group\">{{ section.group }}</SelectLabel>\n                <ESelectOption v-for=\"o in section.options\" :key=\"o.value\" :option=\"o\" :selected=\"o.value === model\" />\n              </SelectGroup>\n              <template v-else>\n                <ESelectOption v-for=\"o in section.options\" :key=\"o.value\" :option=\"o\" :selected=\"o.value === model\" />\n              </template>\n            </template>\n          </SelectViewport>\n        </SelectContent>\n      </SelectPortal>\n    </SelectRoot>\n    <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"model\" />\n  </div>\n</template>\n\n<style>\n@layer e.controls {\n  .e-sel {\n    position: relative;\n  }\n\n  .e-sel-trigger {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--e-space-2);\n    padding-inline-end: var(--e-space-3);\n    text-align: start;\n    cursor: pointer;\n  }\n\n  .e-sel-trigger[aria-expanded=\"true\"] {\n    border-color: var(--e-ink);\n    background-color: var(--e-surface);\n  }\n\n  .e-sel-value {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    min-width: 0;\n    overflow: hidden;\n    line-height: 1.4;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .e-sel-placeholder {\n    color: var(--e-muted);\n  }\n\n  .e-sel-trigger > .e-icon {\n    flex: none;\n  }\n}\n</style>\n"],"mappings":"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"}

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"}