@eos-ui/vue 0.0.0-stage → 0.1.1

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

@@ -0,0 +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"}

package/dist/components/SearchResults/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ESearchResults } from './ESearchResults.vue.js';
+export type { SearchResultItem } from './ESearchResults.vue.js';

package/dist/components/Segmented/ESegmented.js

@@ -0,0 +1,8 @@
+import e from "./ESegmented.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                           */
+//#region src/components/Segmented/ESegmented.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=ESegmented.js.map

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

@@ -0,0 +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":""}

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

@@ -0,0 +1,47 @@
+import { IconProp } from '../../icons/types.js';
+export interface SegmentedOption {
+    value: string;
+    label: string;
+    /** An icon before the label. */
+    icon?: IconProp;
+    disabled?: boolean;
+}
+declare const _default: typeof __VLS_export;
+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. */
+    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. */
+    optional?: boolean;
+    disabled?: boolean;
+    /** The name the radios share, submitted with a form. Generated when left out. */
+    name?: string;
+} & {
+    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. */
+    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. */
+    optional?: boolean;
+    disabled?: boolean;
+    /** The name the radios share, submitted with a form. Generated when left out. */
+    name?: string;
+} & {
+    modelValue?: string;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

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

@@ -0,0 +1,97 @@
+/* empty css                */
+import { useMessages as e } from "../../config.js";
+import { useFieldAttrs as t } from "../../composables/useFieldAttrs.js";
+import { useUid as n } from "../../composables/useUid.js";
+import r from "../Icon/EIcon.js";
+import i from "../Field/EFieldMessage.js";
+import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, mergeModels as m, mergeProps as h, normalizeClass as g, normalizeStyle as _, openBlock as v, renderList as y, toDisplayString as b, unref as x, useModel as S } from "vue";
+//#region src/components/Segmented/ESegmented.vue?vue&type=script&setup=true&lang.ts
+var C = [
+	"name",
+	"value",
+	"checked",
+	"disabled",
+	"onChange"
+], w = { class: "e-seg-text" }, T = [
+	"name",
+	"value",
+	"checked",
+	"disabled",
+	"onChange"
+], E = { class: "e-seg-text" }, D = /*@__PURE__*/ p({
+	inheritAttrs: !1,
+	__name: "ESegmented",
+	props: /*@__PURE__*/ m({
+		label: {},
+		options: {},
+		hint: {},
+		error: {},
+		optional: { type: Boolean },
+		disabled: { type: Boolean },
+		name: {}
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(p) {
+		let m = p, D = S(p, "modelValue"), O = e(), k = n(() => m.name), A = o(() => `${k.value}-hint`), j = o(() => m.options.map((e) => typeof e == "string" ? {
+			value: e,
+			label: e
+		} : e)), M = o(() => D.value ?? j.value[0]?.value), N = t(), P = () => ({
+			role: "radiogroup",
+			"aria-label": m.optional ? `${m.label}, ${O("optional")}` : m.label,
+			"aria-invalid": m.error ? "true" : void 0,
+			...N.input(m.error || m.hint ? A.value : void 0)
+		});
+		return (e, t) => p.hint || p.error ? (v(), l("div", {
+			key: 0,
+			class: g(["e-seg-field", x(N).wrapper().class]),
+			style: _(x(N).wrapper().style)
+		}, [u("div", h({ class: "e-seg" }, P()), [(v(!0), l(a, null, y(j.value, (e) => (v(), l("label", {
+			key: e.value,
+			class: "e-seg-opt"
+		}, [u("input", {
+			type: "radio",
+			class: "e-seg-input",
+			name: x(k),
+			value: e.value,
+			checked: M.value === e.value,
+			disabled: e.disabled || p.disabled,
+			onChange: (t) => D.value = e.value
+		}, null, 40, C), u("span", w, [e.icon ? (v(), s(r, {
+			key: 0,
+			name: e.icon
+		}, null, 8, ["name"])) : c("", !0), d(b(e.label), 1)])]))), 128))], 16), f(i, {
+			id: A.value,
+			error: p.error,
+			hint: p.hint
+		}, null, 8, [
+			"id",
+			"error",
+			"hint"
+		])], 6)) : (v(), l("div", h({
+			key: 1,
+			class: ["e-seg", x(N).wrapper().class],
+			style: x(N).wrapper().style
+		}, P()), [(v(!0), l(a, null, y(j.value, (e) => (v(), l("label", {
+			key: e.value,
+			class: "e-seg-opt"
+		}, [u("input", {
+			type: "radio",
+			class: "e-seg-input",
+			name: x(k),
+			value: e.value,
+			checked: M.value === e.value,
+			disabled: e.disabled || p.disabled,
+			onChange: (t) => D.value = e.value
+		}, null, 40, T), u("span", E, [e.icon ? (v(), s(r, {
+			key: 0,
+			name: e.icon
+		}, null, 8, ["name"])) : c("", !0), d(b(e.label), 1)])]))), 128))], 16));
+	}
+});
+//#endregion
+export { D as default };
+
+//# sourceMappingURL=ESegmented.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +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"}

package/dist/components/Segmented/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ESegmented } from './ESegmented.vue.js';
+export type { SegmentedOption } from './ESegmented.vue.js';

package/dist/components/Select/ESelect.js

@@ -0,0 +1,7 @@
+import e from "./ESelect.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/Select/ESelect.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=ESelect.js.map

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

@@ -0,0 +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":""}

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

@@ -0,0 +1,57 @@
+import { EOptionInput } from './options.js';
+interface ESelectFields {
+    /** Strings, or `{ value, label, description, icon, group, disabled }`. A value is never an empty string. */
+    options: readonly EOptionInput[];
+    /** 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. */
+    required?: boolean;
+    /** A word beside the label. Flag whichever is rarer. */
+    optional?: boolean;
+    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. */
+    id?: string;
+}
+type __VLS_ModelProps = {
+    modelValue?: string;
+    "open"?: boolean;
+};
+declare const __VLS_export: import('vue').DefineComponent<({
+    hideLabel?: boolean;
+    ariaLabel?: string;
+} & {
+    label: string;
+    bare?: boolean;
+} & ESelectFields & __VLS_ModelProps) | ({
+    hideLabel?: boolean;
+    ariaLabel?: string;
+} & {
+    label?: string;
+    bare: true;
+} & ESelectFields & __VLS_ModelProps), {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<({
+    hideLabel?: boolean;
+    ariaLabel?: string;
+} & {
+    label: string;
+    bare?: boolean;
+} & ESelectFields & __VLS_ModelProps) | ({
+    hideLabel?: boolean;
+    ariaLabel?: string;
+} & {
+    label?: string;
+    bare: true;
+} & ESelectFields & __VLS_ModelProps)> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => 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

@@ -0,0 +1,114 @@
+/* empty css                */
+import { useFieldAttrs as e } from "../../composables/useFieldAttrs.js";
+import t from "../Field/EField.js";
+import { normalizeOptions as n } from "./options.js";
+import r from "./ESelectControl.js";
+import { computed as i, createBlock as a, createElementBlock as o, createVNode as s, defineComponent as c, mergeModels as l, mergeProps as u, normalizeProps as d, openBlock as f, unref as p, useModel as m, withCtx as h } from "vue";
+//#region src/components/Select/ESelect.vue?vue&type=script&setup=true&lang.ts
+var g = /*@__PURE__*/ c({
+	inheritAttrs: !1,
+	__name: "ESelect",
+	props: /*@__PURE__*/ l({
+		hideLabel: { type: Boolean },
+		ariaLabel: {},
+		label: {},
+		bare: { type: Boolean },
+		options: {},
+		placeholder: {},
+		hint: {},
+		error: {},
+		required: { type: Boolean },
+		optional: { type: Boolean },
+		disabled: { type: Boolean },
+		name: {},
+		id: {}
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {},
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: ["update:modelValue", "update:open"],
+	setup(c) {
+		let l = c, g = m(c, "modelValue"), _ = m(c, "open"), v = e(), y = i(() => n(l.options));
+		function b(e) {
+			return {
+				id: e?.id ?? l.id,
+				"aria-invalid": e?.ariaInvalid,
+				"aria-label": l.bare ? l.ariaLabel ?? l.label : void 0,
+				...v.input(e?.ariaDescribedby)
+			};
+		}
+		return (e, n) => c.bare ? (f(), o("div", d(u({ key: 0 }, p(v).wrapper())), [s(r, {
+			modelValue: g.value,
+			"onUpdate:modelValue": n[0] ||= (e) => g.value = e,
+			open: _.value,
+			"onUpdate:open": n[1] ||= (e) => _.value = e,
+			options: y.value,
+			placeholder: c.placeholder,
+			disabled: c.disabled,
+			required: c.required,
+			name: c.name,
+			label: c.ariaLabel ?? c.label,
+			"trigger-attrs": b()
+		}, null, 8, [
+			"modelValue",
+			"open",
+			"options",
+			"placeholder",
+			"disabled",
+			"required",
+			"name",
+			"label",
+			"trigger-attrs"
+		])], 16)) : (f(), a(t, u({ key: 1 }, p(v).wrapper(), {
+			id: c.id,
+			label: c.label ?? "",
+			"hide-label": c.hideLabel,
+			hint: c.hint,
+			error: c.error,
+			required: c.required,
+			optional: c.optional
+		}), {
+			default: h((e) => [s(r, {
+				modelValue: g.value,
+				"onUpdate:modelValue": n[2] ||= (e) => g.value = e,
+				open: _.value,
+				"onUpdate:open": n[3] ||= (e) => _.value = e,
+				options: y.value,
+				placeholder: c.placeholder,
+				disabled: c.disabled,
+				required: c.required,
+				name: c.name,
+				label: c.label,
+				"trigger-attrs": b(e)
+			}, null, 8, [
+				"modelValue",
+				"open",
+				"options",
+				"placeholder",
+				"disabled",
+				"required",
+				"name",
+				"label",
+				"trigger-attrs"
+			])]),
+			_: 1
+		}, 16, [
+			"id",
+			"label",
+			"hide-label",
+			"hint",
+			"error",
+			"required",
+			"optional"
+		]));
+	}
+});
+//#endregion
+export { g as default };
+
+//# sourceMappingURL=ESelect.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +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"}

package/dist/components/Select/ESelectControl.js

@@ -0,0 +1,8 @@
+import e from "./ESelectControl.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                               */
+//#region src/components/Select/ESelectControl.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=ESelectControl.js.map

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

@@ -0,0 +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    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

@@ -0,0 +1,27 @@
+import { EOption } from './options.js';
+type __VLS_Props = {
+    /** The normalised options. */
+    options: EOption[];
+    placeholder?: string | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+    name?: string | undefined;
+    /** Names the list. */
+    label?: string | undefined;
+    /** Attributes for the button: id, aria-*, data-*, listeners. */
+    triggerAttrs: Record<string, unknown>;
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+    "open"?: boolean;
+};
+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;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => 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

@@ -0,0 +1,141 @@
+/* empty css                */
+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";
+/* empty css      */
+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
+var A = { class: "e-sel" }, j = {
+	key: 0,
+	class: "e-sel-value"
+}, M = {
+	key: 1,
+	class: "e-sel-placeholder"
+}, N = ["name", "value"], P = /*@__PURE__*/ p({
+	__name: "ESelectControl",
+	props: /*@__PURE__*/ m({
+		options: {},
+		placeholder: {},
+		disabled: { type: Boolean },
+		required: { type: Boolean },
+		name: {},
+		label: {},
+		triggerAttrs: {}
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {},
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	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]"));
+		x(H, (e) => {
+			e && !U.personOpened() && U.undoFocusSteal();
+		}, {
+			immediate: !0,
+			flush: "post"
+		});
+		function W(e) {
+			U.returnsFocus() || e.preventDefault();
+		}
+		function G(e) {
+			U.intent(), K(e);
+		}
+		function K(e) {
+			if (m.disabled || H.value || e.ctrlKey || e.metaKey || e.altKey || e.key.length !== 1 || e.key === " " && !z) return;
+			let t = Date.now();
+			z = (t - B > 700 ? "" : z) + e.key.toLowerCase(), B = t;
+			let n = m.options, r = n.findIndex((e) => e.value === P.value);
+			for (let e = 0; e < n.length; e++) {
+				let t = n[(r + e + +(z.length === 1) + n.length) % n.length];
+				if (t && !t.disabled && t.label.toLowerCase().startsWith(z)) {
+					P.value = t.value;
+					break;
+				}
+			}
+		}
+		return (e, t) => (g(), u("div", A, [f(y(D), {
+			modelValue: P.value,
+			"onUpdate:modelValue": t[0] ||= (e) => P.value = e,
+			open: H.value,
+			disabled: p.disabled,
+			required: p.required,
+			"onUpdate:open": t[1] ||= (e) => V.value = e
+		}, {
+			default: S(() => [f(y(O), h({
+				class: "e-input e-sel-trigger",
+				tabindex: H.value ? -1 : void 0
+			}, p.triggerAttrs, {
+				onPointerdown: y(U).intent,
+				onKeydown: G
+			}), {
+				default: S(() => [R.value ? (g(), u("span", j, [R.value.icon ? (g(), c(n, {
+					key: 0,
+					name: R.value.icon
+				}, null, 8, ["name"])) : l("", !0), d(v(R.value.label), 1)])) : (g(), u("span", M, v(p.placeholder || y(F)("select")), 1)), f(n, {
+					name: "chevron-down",
+					bold: ""
+				})]),
+				_: 1
+			}, 16, ["tabindex", "onPointerdown"]), f(y(E), { to: y(I) }, {
+				default: S(() => [f(y(C), {
+					position: "popper",
+					align: "start",
+					"side-offset": 6,
+					"collision-padding": 8,
+					"body-lock": !1,
+					class: "e-popover e-listpanel e-root",
+					"aria-label": p.label,
+					onCloseAutoFocus: W
+				}, {
+					default: S(() => [f(y(k), null, {
+						default: S(() => [(g(!0), u(o, null, _(L.value, (e, t) => (g(), u(o, { key: t }, [e.group ? (g(), c(y(w), {
+							key: 0,
+							class: "e-opt-set"
+						}, {
+							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, {
+								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, {
+							key: e.value,
+							option: e,
+							selected: e.value === P.value
+						}, null, 8, ["option", "selected"]))), 128))], 64))), 128))]),
+						_: 1
+					})]),
+					_: 1
+				}, 8, ["aria-label"])]),
+				_: 1
+			}, 8, ["to"])]),
+			_: 1
+		}, 8, [
+			"modelValue",
+			"open",
+			"disabled",
+			"required"
+		]), p.name ? (g(), u("input", {
+			key: 0,
+			type: "hidden",
+			name: p.name,
+			value: P.value
+		}, null, 8, N)) : l("", !0)]));
+	}
+});
+//#endregion
+export { P as default };
+
+//# sourceMappingURL=ESelectControl.vue_vue_type_script_setup_true_lang.js.map