@pgcorp/ui-kit 0.10.0 → 0.10.1

package/dist/src/components/shared/controls/SChoiceCards.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,123 @@
+import { useOwnedAttrs as e } from "../../../internal/ownedAttrs.js";
+import { useInteractiveLeafRegistration as t } from "../../../internal/passiveContentContract.js";
+import n from "./SFieldGroup.vue.js";
+import { useRadioGroup as r } from "../_internal/useRadioGroup.js";
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createSlots as u, defineComponent as d, mergeProps as f, openBlock as p, renderList as m, renderSlot as h, toDisplayString as g, unref as _, withCtx as v } from "vue";
+//#region src/components/shared/controls/SChoiceCards.vue?vue&type=script&setup=true&lang.ts
+var y = [
+	"data-columns",
+	"data-density",
+	"data-selection-indicator"
+], b = {
+	key: 0,
+	class: "s-choice-card__kicker"
+}, x = { class: "s-choice-card__title" }, S = {
+	key: 1,
+	class: "s-choice-card__description"
+}, C = {
+	key: 2,
+	class: "s-choice-card__meta"
+}, w = {
+	key: 3,
+	class: "s-choice-card__mark",
+	"aria-hidden": "true"
+}, T = /*@__PURE__*/ d({
+	inheritAttrs: !1,
+	__name: "SChoiceCards",
+	props: {
+		modelValue: {},
+		options: {},
+		label: {},
+		id: { default: void 0 },
+		helpText: { default: void 0 },
+		errorMessage: { default: void 0 },
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		columns: { default: "auto" },
+		density: { default: "default" },
+		selectionIndicator: { default: "mark" }
+	},
+	emits: ["update:modelValue"],
+	setup(d, { emit: T }) {
+		let E = d, D = T, O = e({
+			component: "SChoiceCards",
+			owner: "field group"
+		});
+		t({ owner: "SChoiceCards" });
+		let k = r({
+			options: a(() => E.options),
+			selectedValue: a(() => E.modelValue),
+			disabled: a(() => E.disabled),
+			readonly: a(() => E.readonly),
+			update: (e) => D("update:modelValue", e),
+			component: "SChoiceCards"
+		});
+		return (e, t) => (p(), o(n, f(_(O).bindings(), {
+			id: d.id,
+			label: d.label,
+			"help-text": d.helpText,
+			"error-message": d.errorMessage,
+			required: d.required,
+			invalid: d.invalid,
+			disabled: d.disabled,
+			readonly: d.readonly
+		}), u({
+			default: v(({ describedBy: e, labelId: t }) => [l("div", f({
+				class: "s-choice-cards",
+				"data-columns": d.columns,
+				"data-density": d.density,
+				"data-selection-indicator": d.selectionIndicator
+			}, _(k).groupBindings({
+				labelledBy: t,
+				describedBy: e,
+				required: d.required,
+				invalid: d.invalid
+			})), [(p(!0), c(i, null, m(d.options, (e) => (p(), c("button", f({
+				key: _(k).optionToken(e.value),
+				ref_for: !0,
+				ref: _(k).optionRef(e.value),
+				class: "s-choice-card"
+			}, { ref_for: !0 }, _(k).optionBindings(e)), [
+				e.kicker ? (p(), c("span", b, g(e.kicker), 1)) : s("", !0),
+				l("span", x, g(e.title), 1),
+				e.description ? (p(), c("span", S, g(e.description), 1)) : s("", !0),
+				e.meta ? (p(), c("span", C, g(e.meta), 1)) : s("", !0),
+				d.selectionIndicator === "mark" && e.value === d.modelValue ? (p(), c("span", w, "✓")) : s("", !0)
+			], 16))), 128))], 16, y)]),
+			_: 2
+		}, [e.$slots.help ? {
+			name: "help",
+			fn: v(() => [h(e.$slots, "help", {}, void 0, !0)]),
+			key: "0"
+		} : void 0, e.$slots.error ? {
+			name: "error",
+			fn: v(() => [h(e.$slots, "error", {}, void 0, !0)]),
+			key: "1"
+		} : void 0]), 1040, [
+			"id",
+			"label",
+			"help-text",
+			"error-message",
+			"required",
+			"invalid",
+			"disabled",
+			"readonly"
+		]));
+	}
+});
+//#endregion
+export { T as default };

package/dist/src/components/shared/controls/SColorSelect.vue.d.ts

@@ -0,0 +1,50 @@
+import { SMarker, SMarkerTone } from '../_internal/markerContract';
+interface SColorSelectOptionBase {
+    value: string;
+    label: string;
+    title?: string;
+    disabled?: boolean;
+}
+/** Предопределённый цвет из палитры. / A predefined palette color. */
+export type SColorSelectPresetOption = SColorSelectOptionBase & {
+    kind?: 'preset';
+    marker: {
+        tone: SMarkerTone;
+    };
+};
+/**
+ * Явный пользовательский цвет с собственным значением и подписью.
+ * An explicit custom color with its own value and label.
+ */
+export type SColorSelectCustomOption = SColorSelectOptionBase & {
+    kind: 'custom';
+    marker: Extract<SMarker, {
+        tone: 'custom';
+    }>;
+};
+/** Закрытый контракт вариантов выбора цвета. / Closed color-selection option contract. */
+export type SColorSelectOption = SColorSelectPresetOption | SColorSelectCustomOption;
+type __VLS_Props = {
+    modelValue: string;
+    options: readonly SColorSelectOption[];
+    id?: string;
+    disabled?: boolean;
+    title?: string;
+    ariaLabel?: string;
+    size?: 'sm' | 'md';
+    align?: 'left' | 'right' | 'center';
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    id: string;
+    title: string;
+    size: "sm" | "md";
+    disabled: boolean;
+    ariaLabel: string;
+    align: "left" | "right" | "center";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/src/components/shared/controls/SColorSelect.vue.js

@@ -0,0 +1,5 @@
+import e from "./SColorSelect.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/shared/controls/SColorSelect.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/src/components/shared/controls/SColorSelect.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,90 @@
+import { useOwnedAttrs as e } from "../../../internal/ownedAttrs.js";
+import { validateNonEmptyString as t } from "../../../internal/runtimeContract.js";
+import n from "./SSelect.vue.js";
+import { computed as r, createBlock as i, defineComponent as a, mergeProps as o, openBlock as s, unref as c } from "vue";
+//#region src/components/shared/controls/SColorSelect.vue?vue&type=script&setup=true&lang.ts
+var l = /*@__PURE__*/ a({
+	inheritAttrs: !1,
+	__name: "SColorSelect",
+	props: {
+		modelValue: {},
+		options: {},
+		id: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		title: { default: void 0 },
+		ariaLabel: { default: void 0 },
+		size: { default: "md" },
+		align: { default: "left" }
+	},
+	emits: ["update:modelValue"],
+	setup(a, { emit: l }) {
+		let u = a, d = l, f = e({
+			component: "SColorSelect",
+			owner: "combobox trigger"
+		}), p = /* @__PURE__ */ new Set([
+			"kind",
+			"value",
+			"label",
+			"marker",
+			"title",
+			"disabled"
+		]), m = r(() => {
+			if (!Array.isArray(u.options)) throw TypeError("SColorSelect: options должен быть массивом. / SColorSelect: options must be an array.");
+			return u.options.map((e, t) => {
+				let n = e;
+				if (typeof n != "object" || !n || Array.isArray(n)) throw TypeError(`SColorSelect: options[${t}] должен быть объектом option. / SColorSelect: options[${t}] must be an option object`);
+				let r = Object.keys(n).find((e) => !p.has(e));
+				if (r !== void 0) throw TypeError(`SColorSelect: options[${t}].${r} не входит в контракт color option. / SColorSelect: options[${t}].${r} is not part of the color option contract`);
+				let i = n.marker, a = n.kind;
+				if (i === void 0) throw TypeError(`SColorSelect: options[${t}].marker обязателен. / SColorSelect: options[${t}].marker is required`);
+				if (i?.tone === "custom" && a !== "custom") throw TypeError(`SColorSelect: options[${t}] с custom marker должен объявлять kind "custom". / SColorSelect: options[${t}] with a custom marker must declare kind "custom"`);
+				if (a === "custom" && i?.tone !== "custom") throw TypeError(`SColorSelect: options[${t}] kind "custom" требует custom marker. / SColorSelect: options[${t}] kind "custom" requires a custom marker`);
+				if (a !== void 0 && a !== "preset" && a !== "custom") throw TypeError(`SColorSelect: options[${t}].kind должен быть "preset" или "custom". / SColorSelect: options[${t}].kind must be "preset" or "custom"`);
+				let { value: o, label: s, title: c, disabled: l } = e;
+				return {
+					value: o,
+					label: s,
+					marker: i,
+					...c === void 0 ? {} : { title: c },
+					...l === void 0 ? {} : { disabled: l }
+				};
+			});
+		}), h = r(() => {
+			let e = t("SColorSelect", "modelValue", u.modelValue), n = m.value.find((t) => t.value === e);
+			if (n !== void 0) return n;
+			throw Error(`SColorSelect: modelValue ${JSON.stringify(e)} отсутствует в options inventory. / SColorSelect: modelValue ${JSON.stringify(e)} is absent from the options inventory.`);
+		}), g = r(() => h.value.marker), _ = r(() => u.title === void 0 ? void 0 : t("SColorSelect", "title", u.title)), v = r(() => u.ariaLabel === void 0 ? _.value === void 0 ? t("SColorSelect", "selectedOption.label", h.value.label) : _.value : t("SColorSelect", "ariaLabel", u.ariaLabel)), y = (e) => {
+			if (typeof e != "string") throw TypeError("SColorSelect: SSelect update должен быть строковым ключом цвета. / SColorSelect: SSelect update must be a string color key");
+			d("update:modelValue", e);
+		};
+		return (e, t) => (s(), i(n, o(c(f).bindings(), {
+			id: a.id,
+			"model-value": a.modelValue,
+			options: m.value,
+			"selection-mode": "single",
+			disabled: a.disabled,
+			placeholder: v.value,
+			title: _.value,
+			size: a.size,
+			align: a.align,
+			"trigger-marker": g.value,
+			appearance: "swatch",
+			"onUpdate:modelValue": y
+		}), null, 16, [
+			"id",
+			"model-value",
+			"options",
+			"disabled",
+			"placeholder",
+			"title",
+			"size",
+			"align",
+			"trigger-marker"
+		]));
+	}
+});
+//#endregion
+export { l as default };

package/dist/src/components/shared/controls/SCombobox.vue.d.ts

@@ -0,0 +1,54 @@
+import { SelectionKey, SelectionKey as PublicSelectionKey } from '../_internal/useSelectionRoving';
+import { SelectionEntry as PublicSelectionEntry, SelectionOption as PublicSelectionOption, SelectionOptionGroup as PublicSelectionOptionGroup } from '../_internal/selectionContract';
+export type SComboboxOption<TKey extends PublicSelectionKey = PublicSelectionKey> = PublicSelectionOption<TKey>;
+export type SComboboxOptionGroup<TKey extends PublicSelectionKey = PublicSelectionKey> = PublicSelectionOptionGroup<TKey>;
+export type SComboboxEntry<TKey extends PublicSelectionKey = PublicSelectionKey> = PublicSelectionEntry<TKey>;
+export type SComboboxFilterMode = 'local' | 'manual';
+interface SharedProps<TKey extends PublicSelectionKey> {
+    modelValue: TKey | null;
+    search: string;
+    options: readonly SComboboxEntry<TKey>[];
+    filterMode?: SComboboxFilterMode;
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    errorMessage?: string;
+    helpText?: string;
+    emptyLabel?: string;
+    id?: string;
+    size?: 'sm' | 'md' | 'lg';
+}
+/**
+ * Custom values require a string-compatible model because the editable text is the committed identity.
+ * Свободные значения требуют string-compatible model, потому что введённый текст становится identity.
+ */
+export type Props<TKey extends PublicSelectionKey = PublicSelectionKey> = SharedProps<TKey> & {
+    allowCustomValue?: string extends TKey ? boolean : false;
+};
+type ComponentProps<TKey extends PublicSelectionKey> = SharedProps<TKey> & {
+    allowCustomValue?: boolean;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <TKey extends SelectionKey = string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<ComponentProps<TKey> & {
+        "onUpdate:modelValue"?: ((value: TKey | null) => any) | undefined;
+        "onUpdate:search"?: ((value: string) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: ((evt: "update:modelValue", value: TKey | null) => void) & ((evt: "update:search", value: string) => void);
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/src/components/shared/controls/SCombobox.vue.js

@@ -0,0 +1,8 @@
+import "../../../../assets/src/components/shared/controls/SCombobox.css_vue_type_style_index_0_src_e3b4f580_scoped_e3b4f580_lang.css";
+import e from "../../../../_virtual/_plugin-vue_export-helper.js";
+import t from "./SCombobox.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                                       */
+//#region src/components/shared/controls/SCombobox.vue
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-e3b4f580"]]);
+//#endregion
+export { n as default };

package/dist/src/components/shared/controls/SCombobox.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,268 @@
+import { registerLayer as e } from "../../../internal/layerStack.js";
+import { useFloatingPosition as t } from "../../../composables/useFloatingPosition.js";
+import { useUiKitLocale as n } from "../../../composables/useUiKitLocale.js";
+import { useOwnedAttrs as ee } from "../../../internal/ownedAttrs.js";
+import { validateBoolean as r, validateDomId as te, validateExactString as i, validateNonEmptyString as a } from "../../../internal/runtimeContract.js";
+import { selectionKeyToken as o } from "../_internal/useSelectionRoving.js";
+import { isSelectionModelList as ne, resolveSelectionInventory as s, validateOptionalSelectionString as c, validateSelectionModel as l } from "../_internal/selectionContract.js";
+import u from "./SListbox.vue.js";
+import d from "./SInputText.vue.js";
+import { Fragment as f, Teleport as re, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createVNode as v, defineComponent as y, mergeProps as ie, nextTick as b, normalizeStyle as x, onBeforeUnmount as S, openBlock as C, shallowRef as w, unref as T, useId as E, watch as D } from "vue";
+//#region src/components/shared/controls/SCombobox.vue?vue&type=script&setup=true&lang.ts
+var O = /*@__PURE__*/ y({
+	inheritAttrs: !1,
+	__name: "SCombobox",
+	props: {
+		modelValue: {},
+		search: {},
+		options: {},
+		filterMode: { default: "local" },
+		label: { default: void 0 },
+		placeholder: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		errorMessage: { default: void 0 },
+		helpText: { default: void 0 },
+		emptyLabel: { default: void 0 },
+		id: { default: void 0 },
+		size: { default: "md" },
+		allowCustomValue: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["update:modelValue", "update:search"],
+	setup(y, { emit: O }) {
+		let k = y, { t: A } = n(), j = O, M = ee({
+			component: "SCombobox",
+			owner: "editable combobox input"
+		}), N = E(), P = w(null), F = w(null), I = w(!1), L = w(null), R = w("var(--s-layer-root-floating)"), z = null, B = p(() => k.id === void 0 ? `s-combobox-${N}` : te("SCombobox", "id", k.id)), V = p(() => `${B.value}-listbox`), H = p(() => {
+			if (typeof k.search != "string") throw TypeError("SCombobox: search must be a string");
+			return k.search;
+		}), U = p(() => ({
+			filterMode: i("SCombobox", "filterMode", k.filterMode, ["local", "manual"]),
+			placeholder: a("SCombobox", "placeholder", k.placeholder ?? A("forms.searchPlaceholder")),
+			disabled: r("SCombobox", "disabled", k.disabled),
+			readonly: r("SCombobox", "readonly", k.readonly),
+			required: r("SCombobox", "required", k.required),
+			invalid: r("SCombobox", "invalid", k.invalid),
+			emptyLabel: a("SCombobox", "emptyLabel", k.emptyLabel ?? A("forms.noOptions")),
+			size: i("SCombobox", "size", k.size, [
+				"sm",
+				"md",
+				"lg"
+			]),
+			allowCustomValue: r("SCombobox", "allowCustomValue", k.allowCustomValue),
+			label: c("SCombobox", "label", k.label),
+			helpText: c("SCombobox", "helpText", k.helpText),
+			errorMessage: c("SCombobox", "errorMessage", k.errorMessage)
+		})), W = p(() => {
+			let e = s("SCombobox", k.options);
+			return U.value.allowCustomValue && typeof k.modelValue == "string" ? o("SCombobox", k.modelValue, "modelValue") : l("SCombobox", "single", k.modelValue, e), e;
+		});
+		function G(e) {
+			return e.entries.map((e) => e.kind === "option" ? e.record.option : {
+				groupId: e.groupId,
+				label: e.label,
+				options: e.records.map((e) => e.option)
+			});
+		}
+		let K = p(() => {
+			let e = W.value;
+			if (U.value.filterMode === "manual") return G(e);
+			let t = H.value.trim().toLocaleLowerCase();
+			return t.length === 0 ? G(e) : e.entries.flatMap((e) => {
+				if (e.kind === "option") return `${e.record.option.label} ${e.record.option.title ?? ""}`.toLocaleLowerCase().includes(t) ? [e.record.option] : [];
+				let n = e.records.filter((e) => `${e.option.label} ${e.option.title ?? ""}`.toLocaleLowerCase().includes(t));
+				return n.length === 0 ? [] : [{
+					groupId: e.groupId,
+					label: e.label,
+					options: n.map((e) => e.option)
+				}];
+			});
+		}), q = p(() => s("SCombobox filtered options", K.value)), J = p(() => {
+			if (k.modelValue === null) return null;
+			let e = o("SCombobox", k.modelValue, "modelValue");
+			return q.value.optionsByToken.has(e) ? k.modelValue : null;
+		}), ae = p(() => {
+			let e = M.bindings()["aria-label"];
+			return typeof e == "string" ? a("SCombobox", "aria-label", e) : U.value.label ?? U.value.placeholder;
+		}), oe = p(() => {
+			if (!I.value || L.value === null) return;
+			let e = o("SCombobox", L.value, "activeValue");
+			if (q.value.optionsByToken.has(e)) return `${V.value}-option-${encodeURIComponent(e)}`;
+		});
+		D(H, () => {
+			L.value = null, I.value && b(() => F.value?.initializeActive());
+		}, { flush: "sync" });
+		let { anchorRef: Y, panelRef: X, floatingStyle: se } = t({
+			active: I,
+			placement: () => "bottom-start",
+			widthMatch: () => "exact",
+			zIndex: () => R.value
+		});
+		function ce() {
+			if (!U.value.allowCustomValue) return null;
+			let e = H.value.trim();
+			if (e.length === 0) return null;
+			if (k.modelValue !== null) {
+				let t = o("SCombobox", k.modelValue, "modelValue");
+				if (W.value.optionsByToken.get(t)?.option.label.trim() === e || typeof k.modelValue == "string" && k.modelValue === e) return null;
+			}
+			return e;
+		}
+		function Z() {
+			let e = ce();
+			return e !== null && (j("update:modelValue", e), j("update:search", String(e)), !0);
+		}
+		function le() {
+			let e = P.value;
+			if (!e) throw Error("SCombobox: SInputText API is unavailable");
+			return e.getElement();
+		}
+		function Q(e) {
+			I.value && ((e === "tab" || e === "outside") && Z(), I.value = !1, L.value = null, z?.unregister({ restoreFocus: !1 }), z = null, R.value = "var(--s-layer-root-floating)");
+		}
+		async function $() {
+			if (W.value, U.value.disabled || U.value.readonly || I.value) return;
+			let t = le();
+			I.value = !0, z = e({
+				kind: "listbox",
+				root: () => X.value,
+				anchor: () => Y.value,
+				restoreTarget: t,
+				requestDismiss: (e) => Q(e === "escape" ? "escape" : "outside")
+			}), R.value = z.zIndex, await b(), F.value?.initializeActive();
+		}
+		function ue(e) {
+			j("update:search", e), L.value = null, I.value ? b(() => F.value?.initializeActive()) : $();
+		}
+		function de(e) {
+			if (ne(e)) throw TypeError("SCombobox: selection update must be a single key or null");
+			if (l("SCombobox update", "single", e, W.value), j("update:modelValue", e), e !== null) {
+				let t = o("SCombobox", e, "selected value"), n = W.value.optionsByToken.get(t);
+				if (!n) throw Error("SCombobox: selected option identity is stale");
+				j("update:search", n.option.label);
+			}
+			Q("selection");
+		}
+		async function fe(e) {
+			let t = {
+				ArrowDown: "next",
+				ArrowUp: "previous",
+				Home: "first",
+				End: "last"
+			}[e.key];
+			if (t) {
+				e.preventDefault();
+				let n = I.value;
+				if (await $(), await b(), !n && (t === "next" || t === "previous")) return;
+				F.value?.moveActive(t);
+				return;
+			}
+			if (e.key === "Enter" && I.value) {
+				e.preventDefault(), L.value === null ? Z() && Q("selection") : F.value?.selectActive();
+				return;
+			}
+			if (e.key === "Escape" && I.value) {
+				e.preventDefault(), Q("escape");
+				return;
+			}
+			e.key === "Tab" && Q("tab");
+		}
+		return S(() => z?.unregister({ restoreFocus: !1 })), (e, t) => (C(), g(f, null, [_("div", {
+			ref_key: "anchorRef",
+			ref: Y,
+			class: "s-combobox-anchor"
+		}, [v(d, ie({
+			ref_key: "inputRef",
+			ref: P
+		}, T(M).bindings(), {
+			id: B.value,
+			"model-value": H.value,
+			label: y.label,
+			placeholder: U.value.placeholder,
+			disabled: y.disabled,
+			readonly: y.readonly,
+			required: y.required,
+			invalid: y.invalid,
+			"error-message": y.errorMessage,
+			"help-text": y.helpText,
+			size: y.size,
+			type: "search",
+			autocomplete: "off",
+			role: "combobox",
+			"aria-haspopup": "listbox",
+			"aria-autocomplete": "list",
+			"aria-expanded": I.value,
+			"aria-controls": V.value,
+			"aria-activedescendant": oe.value,
+			"onUpdate:modelValue": ue,
+			onFocus: $,
+			onClick: $,
+			onKeydown: fe
+		}), null, 16, [
+			"id",
+			"model-value",
+			"label",
+			"placeholder",
+			"disabled",
+			"readonly",
+			"required",
+			"invalid",
+			"error-message",
+			"help-text",
+			"size",
+			"aria-expanded",
+			"aria-controls",
+			"aria-activedescendant"
+		])], 512), (C(), m(re, { to: "body" }, [I.value ? (C(), g("div", {
+			key: 0,
+			ref_key: "panelRef",
+			ref: X,
+			style: x(T(se)),
+			class: "s-combobox-layer"
+		}, [v(u, {
+			ref_key: "listboxRef",
+			ref: F,
+			id: V.value,
+			"model-value": J.value,
+			options: K.value,
+			label: ae.value,
+			disabled: y.disabled,
+			readonly: y.readonly,
+			invalid: y.invalid,
+			"empty-label": U.value.emptyLabel,
+			"focus-mode": "activedescendant",
+			"active-value": L.value,
+			"onUpdate:modelValue": de,
+			"onUpdate:activeValue": t[0] ||= (e) => L.value = e
+		}, null, 8, [
+			"id",
+			"model-value",
+			"options",
+			"label",
+			"disabled",
+			"readonly",
+			"invalid",
+			"empty-label",
+			"active-value"
+		])], 4)) : h("", !0)]))], 64));
+	}
+});
+//#endregion
+export { O as default };

package/dist/src/components/shared/controls/SComboboxTrigger.vue.d.ts

@@ -0,0 +1,49 @@
+import { InteractiveElementApi } from '../../../internal/interactiveElement';
+import { SMarker as MarkerContract } from '../_internal/markerContract';
+export interface Props {
+    id: string;
+    accessibleLabel: string;
+    expanded: boolean;
+    controls: string;
+    displayValue?: string;
+    placeholder?: string;
+    marker?: MarkerContract;
+    appearance?: 'field' | 'swatch';
+    size?: 'xs' | 'sm' | 'md';
+    width?: 'auto' | 'full';
+    disabled?: boolean;
+    invalid?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    describedBy?: string;
+    title?: string;
+    testId?: string | number | boolean;
+    test?: string | number | boolean;
+    taskMappingInternalValue?: string | number | boolean;
+    taskMappingKind?: string | number | boolean;
+}
+export type SComboboxTriggerApi = InteractiveElementApi<HTMLButtonElement>;
+declare const __VLS_export: import('vue').DefineComponent<Props, SComboboxTriggerApi, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    toggle: (event: KeyboardEvent | MouseEvent) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onToggle?: ((event: KeyboardEvent | MouseEvent) => any) | undefined;
+}>, {
+    required: boolean;
+    title: string;
+    marker: MarkerContract;
+    invalid: boolean;
+    size: "xs" | "sm" | "md";
+    width: "auto" | "full";
+    placeholder: string;
+    disabled: boolean;
+    readonly: boolean;
+    describedBy: string;
+    appearance: "field" | "swatch";
+    test: string | number | boolean;
+    displayValue: string;
+    testId: string | number | boolean;
+    taskMappingInternalValue: string | number | boolean;
+    taskMappingKind: string | number | boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/src/components/shared/controls/SComboboxTrigger.vue.js

@@ -0,0 +1,8 @@
+import "../../../../assets/src/components/shared/controls/SComboboxTrigger.css_vue_type_style_index_0_src_e453a3fa_scoped_e453a3fa_lang.css";
+import e from "../../../../_virtual/_plugin-vue_export-helper.js";
+import t from "./SComboboxTrigger.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                                              */
+//#region src/components/shared/controls/SComboboxTrigger.vue
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-e453a3fa"]]);
+//#endregion
+export { n as default };