@verbb/plugin-kit-vue 2.0.0

package/dist/components/RadioGroupInput.js

@@ -0,0 +1,84 @@
+import { readPkValueDetail } from "../utils/pk-change.js";
+import { defineComponent, h } from "vue";
+import "@verbb/plugin-kit-web/components/radio-group.js";
+//#region src/components/RadioGroupInput.ts
+var toStringValue = (value) => {
+	return value === void 0 || value === null ? "" : String(value);
+};
+/**
+* Convenience facade over `<pk-radio-group>` with an `options[]` array plus `v-model`,
+* instead of slotted `<pk-radio>` children the raw `RadioGroup` exposes.
+*/
+var RadioGroupInput = defineComponent({
+	name: "PkRadioGroupInput",
+	props: {
+		modelValue: {
+			type: [
+				String,
+				Number,
+				Boolean
+			],
+			default: ""
+		},
+		options: {
+			type: Array,
+			required: true
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		invalid: {
+			type: Boolean,
+			default: false
+		},
+		name: {
+			type: String,
+			default: void 0
+		},
+		orientation: {
+			type: String,
+			default: void 0
+		},
+		label: {
+			type: String,
+			default: void 0
+		},
+		instructions: {
+			type: String,
+			default: void 0
+		},
+		ariaLabel: {
+			type: String,
+			default: void 0
+		}
+	},
+	emits: { "update:modelValue": (value) => value !== void 0 },
+	setup(props, { emit }) {
+		const handlePkChange = (event) => {
+			const nextValue = readPkValueDetail(event);
+			const match = props.options.find((option) => toStringValue(option.value) === nextValue);
+			emit("update:modelValue", match ? match.value : nextValue);
+		};
+		return () => h("pk-radio-group", {
+			value: toStringValue(props.modelValue),
+			disabled: props.disabled || void 0,
+			invalid: props.invalid || void 0,
+			...props.name ? { name: props.name } : {},
+			...props.orientation ? { orientation: props.orientation } : {},
+			...props.label ? { label: props.label } : {},
+			...props.instructions ? { instructions: props.instructions } : {},
+			...props.ariaLabel ? { "aria-label": props.ariaLabel } : {},
+			onPkChange: handlePkChange
+		}, { default: () => props.options.map((option) => h("pk-radio", {
+			key: toStringValue(option.value),
+			value: toStringValue(option.value),
+			disabled: option.disabled || void 0
+		}, { default: () => option.label })) });
+	}
+});
+var PkRadioGroupInputElement = RadioGroupInput;
+//#endregion
+export { PkRadioGroupInputElement, RadioGroupInput };
+
+//# sourceMappingURL=RadioGroupInput.js.map

package/dist/components/RadioGroupInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupInput.js","names":[],"sources":["../../src/components/RadioGroupInput.ts"],"sourcesContent":["import { defineComponent, h, type PropType, type VNodeChild } from 'vue';\nimport '@verbb/plugin-kit-web/components/radio-group.js';\n\nimport { readPkValueDetail } from '../utils/pk-change.js';\n\nexport type RadioGroupInputOption = {\n    value: unknown;\n    label: VNodeChild;\n    disabled?: boolean;\n};\n\nexport type RadioGroupInputProps = {\n    modelValue?: unknown;\n    options: RadioGroupInputOption[];\n    disabled?: boolean;\n    invalid?: boolean;\n    name?: string;\n    orientation?: 'horizontal' | 'vertical';\n    label?: string;\n    instructions?: string;\n    'aria-label'?: string;\n};\n\nconst toStringValue = (value: unknown): string => {\n    return value === undefined || value === null ? '' : String(value);\n};\n\n/**\n * Convenience facade over `<pk-radio-group>` with an `options[]` array plus `v-model`,\n * instead of slotted `<pk-radio>` children the raw `RadioGroup` exposes.\n */\nexport const RadioGroupInput = defineComponent({\n    name: 'PkRadioGroupInput',\n    props: {\n        modelValue: { type: [String, Number, Boolean], default: '' },\n        options: { type: Array as PropType<RadioGroupInputOption[]>, required: true },\n        disabled: { type: Boolean, default: false },\n        invalid: { type: Boolean, default: false },\n        name: { type: String, default: undefined },\n        orientation: { type: String as PropType<RadioGroupInputProps['orientation']>, default: undefined },\n        label: { type: String, default: undefined },\n        instructions: { type: String, default: undefined },\n        ariaLabel: { type: String, default: undefined },\n    },\n    emits: {\n        'update:modelValue': (value: unknown) => value !== undefined,\n    },\n    setup(props, { emit }) {\n        const handlePkChange = (event: Event): void => {\n            const nextValue = readPkValueDetail(event);\n            const match = props.options.find((option) => toStringValue(option.value) === nextValue);\n\n            emit('update:modelValue', match ? match.value : nextValue);\n        };\n\n        return () => h(\n            'pk-radio-group',\n            {\n                value: toStringValue(props.modelValue),\n                disabled: props.disabled || undefined,\n                invalid: props.invalid || undefined,\n                ...(props.name ? { name: props.name } : {}),\n                ...(props.orientation ? { orientation: props.orientation } : {}),\n                ...(props.label ? { label: props.label } : {}),\n                ...(props.instructions ? { instructions: props.instructions } : {}),\n                ...(props.ariaLabel ? { 'aria-label': props.ariaLabel } : {}),\n                onPkChange: handlePkChange,\n            },\n            {\n                default: () => props.options.map((option) => h(\n                    'pk-radio',\n                    {\n                        key: toStringValue(option.value),\n                        value: toStringValue(option.value),\n                        disabled: option.disabled || undefined,\n                    },\n                    { default: () => option.label },\n                )),\n            },\n        );\n    },\n});\n\nexport const PkRadioGroupInputElement = RadioGroupInput;\n"],"mappings":";;;;AAuBA,IAAM,iBAAiB,UAA2B;AAC9C,QAAO,UAAU,KAAA,KAAa,UAAU,OAAO,KAAK,OAAO,MAAM;;;;;;AAOrE,IAAa,kBAAkB,gBAAgB;CAC3C,MAAM;CACN,OAAO;EACH,YAAY;GAAE,MAAM;IAAC;IAAQ;IAAQ;IAAQ;GAAE,SAAS;GAAI;EAC5D,SAAS;GAAE,MAAM;GAA4C,UAAU;GAAM;EAC7E,UAAU;GAAE,MAAM;GAAS,SAAS;GAAO;EAC3C,SAAS;GAAE,MAAM;GAAS,SAAS;GAAO;EAC1C,MAAM;GAAE,MAAM;GAAQ,SAAS,KAAA;GAAW;EAC1C,aAAa;GAAE,MAAM;GAAyD,SAAS,KAAA;GAAW;EAClG,OAAO;GAAE,MAAM;GAAQ,SAAS,KAAA;GAAW;EAC3C,cAAc;GAAE,MAAM;GAAQ,SAAS,KAAA;GAAW;EAClD,WAAW;GAAE,MAAM;GAAQ,SAAS,KAAA;GAAW;EAClD;CACD,OAAO,EACH,sBAAsB,UAAmB,UAAU,KAAA,GACtD;CACD,MAAM,OAAO,EAAE,QAAQ;EACnB,MAAM,kBAAkB,UAAuB;GAC3C,MAAM,YAAY,kBAAkB,MAAM;GAC1C,MAAM,QAAQ,MAAM,QAAQ,MAAM,WAAW,cAAc,OAAO,MAAM,KAAK,UAAU;AAEvF,QAAK,qBAAqB,QAAQ,MAAM,QAAQ,UAAU;;AAG9D,eAAa,EACT,kBACA;GACI,OAAO,cAAc,MAAM,WAAW;GACtC,UAAU,MAAM,YAAY,KAAA;GAC5B,SAAS,MAAM,WAAW,KAAA;GAC1B,GAAI,MAAM,OAAO,EAAE,MAAM,MAAM,MAAM,GAAG,EAAE;GAC1C,GAAI,MAAM,cAAc,EAAE,aAAa,MAAM,aAAa,GAAG,EAAE;GAC/D,GAAI,MAAM,QAAQ,EAAE,OAAO,MAAM,OAAO,GAAG,EAAE;GAC7C,GAAI,MAAM,eAAe,EAAE,cAAc,MAAM,cAAc,GAAG,EAAE;GAClE,GAAI,MAAM,YAAY,EAAE,cAAc,MAAM,WAAW,GAAG,EAAE;GAC5D,YAAY;GACf,EACD,EACI,eAAe,MAAM,QAAQ,KAAK,WAAW,EACzC,YACA;GACI,KAAK,cAAc,OAAO,MAAM;GAChC,OAAO,cAAc,OAAO,MAAM;GAClC,UAAU,OAAO,YAAY,KAAA;GAChC,EACD,EAAE,eAAe,OAAO,OAAO,CAClC,CAAC,EACL,CACJ;;CAER,CAAC;AAEF,IAAa,2BAA2B"}

package/dist/components/ScrollArea.d.ts

@@ -0,0 +1,9 @@
+/** Vue facade over `<pk-scroll-area>`. Behavior and styles live in the web component. */
+export declare const ScrollArea: import('vue').DefineComponent<{}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const PkScrollAreaElement: import('vue').DefineComponent<{}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export type ScrollAreaProps = Record<string, unknown>;
+//# sourceMappingURL=ScrollArea.d.ts.map

package/dist/components/ScrollArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../src/components/ScrollArea.ts"],"names":[],"mappings":"AACA,OAAO,iDAAiD,CAAC;AAEzD,yFAAyF;AACzF,eAAO,MAAM,UAAU;;2OAGrB,CAAC;AAEH,eAAO,MAAM,mBAAmB;;2OAAa,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC"}

package/dist/components/ScrollArea.js

@@ -0,0 +1,13 @@
+import { createPkComponent } from "../createPkComponent.js";
+import "@verbb/plugin-kit-web/components/scroll-area.js";
+//#region src/components/ScrollArea.ts
+/** Vue facade over `<pk-scroll-area>`. Behavior and styles live in the web component. */
+var ScrollArea = createPkComponent({
+	name: "PkScrollArea",
+	tagName: "pk-scroll-area"
+});
+var PkScrollAreaElement = ScrollArea;
+//#endregion
+export { PkScrollAreaElement, ScrollArea };
+
+//# sourceMappingURL=ScrollArea.js.map

package/dist/components/ScrollArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.js","names":[],"sources":["../../src/components/ScrollArea.ts"],"sourcesContent":["import { createPkComponent } from '../createPkComponent.js';\nimport '@verbb/plugin-kit-web/components/scroll-area.js';\n\n/** Vue facade over `<pk-scroll-area>`. Behavior and styles live in the web component. */\nexport const ScrollArea = createPkComponent({\n    name: 'PkScrollArea',\n    tagName: 'pk-scroll-area',\n});\n\nexport const PkScrollAreaElement = ScrollArea;\n\nexport type ScrollAreaProps = Record<string, unknown>;\n"],"mappings":";;;;AAIA,IAAa,aAAa,kBAAkB;CACxC,MAAM;CACN,SAAS;CACZ,CAAC;AAEF,IAAa,sBAAsB"}

package/dist/components/Select.d.ts

@@ -0,0 +1,22 @@
+export declare const Select: import('vue').DefineComponent<{}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any> | undefined;
+export declare const PkSelectElement: import('vue').DefineComponent<{}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any> | undefined;
+export declare const Option: import('vue').DefineComponent<{}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any> | undefined;
+export declare const PkOptionElement: import('vue').DefineComponent<{}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any> | undefined;
+export declare const OptionGroup: import('vue').DefineComponent<{}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any> | undefined;
+export declare const PkOptionGroupElement: import('vue').DefineComponent<{}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any> | undefined;
+export type SelectProps = Record<string, unknown>;
+export type OptionProps = Record<string, unknown>;
+export type OptionGroupProps = Record<string, unknown>;
+//# sourceMappingURL=Select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/components/Select.ts"],"names":[],"mappings":"AACA,OAAO,4CAA4C,CAAC;AASpD,eAAO,MAAM,MAAM;;uPAAgB,CAAC;AACpC,eAAO,MAAM,eAAe;;uPAAS,CAAC;AACtC,eAAO,MAAM,MAAM;;uPAAgB,CAAC;AACpC,eAAO,MAAM,eAAe;;uPAAS,CAAC;AACtC,eAAO,MAAM,WAAW;;uPAAqB,CAAC;AAC9C,eAAO,MAAM,oBAAoB;;uPAAc,CAAC;AAEhD,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAClD,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAClD,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC"}

package/dist/components/Select.js

@@ -0,0 +1,19 @@
+import { createPkComponentFamily } from "../createPkComponent.js";
+import "@verbb/plugin-kit-web/components/select.js";
+//#region src/components/Select.ts
+/** Vue facades over the `<pk-select>` family. Behavior and styles live in the web components. */
+var family = createPkComponentFamily({
+	Select: "pk-select",
+	Option: "pk-option",
+	OptionGroup: "pk-option-group"
+});
+var Select = family.Select;
+var PkSelectElement = Select;
+var Option = family.Option;
+var PkOptionElement = Option;
+var OptionGroup = family.OptionGroup;
+var PkOptionGroupElement = OptionGroup;
+//#endregion
+export { Option, OptionGroup, PkOptionElement, PkOptionGroupElement, PkSelectElement, Select };
+
+//# sourceMappingURL=Select.js.map

package/dist/components/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","names":[],"sources":["../../src/components/Select.ts"],"sourcesContent":["import { createPkComponentFamily } from '../createPkComponent.js';\nimport '@verbb/plugin-kit-web/components/select.js';\n\n/** Vue facades over the `<pk-select>` family. Behavior and styles live in the web components. */\nconst family = createPkComponentFamily({\n    Select: 'pk-select',\n    Option: 'pk-option',\n    OptionGroup: 'pk-option-group',\n});\n\nexport const Select = family.Select;\nexport const PkSelectElement = Select;\nexport const Option = family.Option;\nexport const PkOptionElement = Option;\nexport const OptionGroup = family.OptionGroup;\nexport const PkOptionGroupElement = OptionGroup;\n\nexport type SelectProps = Record<string, unknown>;\nexport type OptionProps = Record<string, unknown>;\nexport type OptionGroupProps = Record<string, unknown>;\n"],"mappings":";;;;AAIA,IAAM,SAAS,wBAAwB;CACnC,QAAQ;CACR,QAAQ;CACR,aAAa;CAChB,CAAC;AAEF,IAAa,SAAS,OAAO;AAC7B,IAAa,kBAAkB;AAC/B,IAAa,SAAS,OAAO;AAC7B,IAAa,kBAAkB;AAC/B,IAAa,cAAc,OAAO;AAClC,IAAa,uBAAuB"}

package/dist/components/SelectInput.d.ts

@@ -0,0 +1,311 @@
+import { PropType } from 'vue';
+import { PkSelectSize } from '@verbb/plugin-kit-web/components/select/pk-select.js';
+export type SelectInputOption = {
+    value: unknown;
+    label: string;
+    disabled?: boolean;
+    status?: string;
+};
+export type SelectInputOptionGroup = {
+    group: string;
+    options: SelectInputOption[];
+};
+export type SelectInputProps = {
+    options: Array<SelectInputOption | SelectInputOptionGroup>;
+    modelValue?: unknown;
+    placeholder?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    clearable?: boolean;
+    size?: PkSelectSize;
+    /** When `full`, stretch the select host to the available width (table cells). */
+    width?: 'full';
+    name?: string;
+    id?: string;
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    'aria-errormessage'?: string;
+    'aria-labelledby'?: string;
+};
+/**
+ * Convenience facade over `<pk-select>` matching React `SelectInput` ergonomics:
+ * an `options[]` array plus `v-model`, instead of slotted `<pk-option>` children.
+ *
+ * `pk-select` is string-valued, so option values are stringified for the element and
+ * mapped back to their original value on `pk-change`.
+ */
+export declare const SelectInput: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    options: {
+        type: PropType<Array<SelectInputOption | SelectInputOptionGroup>>;
+        required: true;
+    };
+    modelValue: {
+        type: PropType<unknown>;
+        default: undefined;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    invalid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: PropType<PkSelectSize>;
+        default: undefined;
+    };
+    width: {
+        type: PropType<"full">;
+        default: undefined;
+    };
+    name: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    id: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    ariaLabel: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    ariaDescribedby: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    ariaErrormessage: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    ariaLabelledby: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    'update:modelValue': (value: unknown) => value is {} | null;
+    blur: (event: Event) => boolean;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    options: {
+        type: PropType<Array<SelectInputOption | SelectInputOptionGroup>>;
+        required: true;
+    };
+    modelValue: {
+        type: PropType<unknown>;
+        default: undefined;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    invalid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: PropType<PkSelectSize>;
+        default: undefined;
+    };
+    width: {
+        type: PropType<"full">;
+        default: undefined;
+    };
+    name: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    id: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    ariaLabel: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    ariaDescribedby: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    ariaErrormessage: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    ariaLabelledby: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onBlur?: ((event: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+}>, {
+    name: string;
+    invalid: boolean;
+    size: PkSelectSize;
+    disabled: boolean;
+    modelValue: undefined;
+    placeholder: string;
+    id: string;
+    ariaLabel: string;
+    ariaDescribedby: string;
+    ariaErrormessage: string;
+    ariaLabelledby: string;
+    clearable: boolean;
+    width: "full";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const PkSelectInputElement: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    options: {
+        type: PropType<Array<SelectInputOption | SelectInputOptionGroup>>;
+        required: true;
+    };
+    modelValue: {
+        type: PropType<unknown>;
+        default: undefined;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    invalid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: PropType<PkSelectSize>;
+        default: undefined;
+    };
+    width: {
+        type: PropType<"full">;
+        default: undefined;
+    };
+    name: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    id: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    ariaLabel: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    ariaDescribedby: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    ariaErrormessage: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    ariaLabelledby: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    'update:modelValue': (value: unknown) => value is {} | null;
+    blur: (event: Event) => boolean;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    options: {
+        type: PropType<Array<SelectInputOption | SelectInputOptionGroup>>;
+        required: true;
+    };
+    modelValue: {
+        type: PropType<unknown>;
+        default: undefined;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    invalid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: PropType<PkSelectSize>;
+        default: undefined;
+    };
+    width: {
+        type: PropType<"full">;
+        default: undefined;
+    };
+    name: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    id: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    ariaLabel: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    ariaDescribedby: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    ariaErrormessage: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    ariaLabelledby: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onBlur?: ((event: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+}>, {
+    name: string;
+    invalid: boolean;
+    size: PkSelectSize;
+    disabled: boolean;
+    modelValue: undefined;
+    placeholder: string;
+    id: string;
+    ariaLabel: string;
+    ariaDescribedby: string;
+    ariaErrormessage: string;
+    ariaLabelledby: string;
+    clearable: boolean;
+    width: "full";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=SelectInput.d.ts.map

package/dist/components/SelectInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../src/components/SelectInput.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgC,KAAK,QAAQ,EAAE,MAAM,KAAK,CAAC;AAClE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sDAAsD,CAAC;AAEzF,OAAO,4CAA4C,CAAC;AACpD,OAAO,4CAA4C,CAAC;AAEpD,MAAM,MAAM,iBAAiB,GAAG;IAC5B,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,iBAAiB,EAAE,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC3B,OAAO,EAAE,KAAK,CAAC,iBAAiB,GAAG,sBAAsB,CAAC,CAAC;IAC3D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,iFAAiF;IACjF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AAUF;;;;;;GAMG;AACH,eAAO,MAAM,WAAW;;cAGU,QAAQ,CAAC,KAAK,CAAC,iBAAiB,GAAG,sBAAsB,CAAC,CAAC;;;;cAC9C,QAAQ,CAAC,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;cAKhC,QAAQ,CAAC,YAAY,CAAC;;;;cACrB,QAAQ,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCASZ,OAAO;kBACtB,KAAK;;;cAjBO,QAAQ,CAAC,KAAK,CAAC,iBAAiB,GAAG,sBAAsB,CAAC,CAAC;;;;cAC9C,QAAQ,CAAC,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;cAKhC,QAAQ,CAAC,YAAY,CAAC;;;;cACrB,QAAQ,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAgF/C,CAAC;AAEH,eAAO,MAAM,oBAAoB;;cAzFC,QAAQ,CAAC,KAAK,CAAC,iBAAiB,GAAG,sBAAsB,CAAC,CAAC;;;;cAC9C,QAAQ,CAAC,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;cAKhC,QAAQ,CAAC,YAAY,CAAC;;;;cACrB,QAAQ,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCASZ,OAAO;kBACtB,KAAK;;;cAjBO,QAAQ,CAAC,KAAK,CAAC,iBAAiB,GAAG,sBAAsB,CAAC,CAAC;;;;cAC9C,QAAQ,CAAC,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;cAKhC,QAAQ,CAAC,YAAY,CAAC;;;;cACrB,QAAQ,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAkFF,CAAC"}

package/dist/components/SelectInput.js

@@ -0,0 +1,127 @@
+import { computed, defineComponent, h } from "vue";
+import "@verbb/plugin-kit-web/components/status.js";
+import "@verbb/plugin-kit-web/components/select.js";
+//#region src/components/SelectInput.ts
+var isGroup = (option) => {
+	return typeof option === "object" && option !== null && "group" in option;
+};
+var toStringValue = (value) => {
+	return value === void 0 || value === null ? "" : String(value);
+};
+/**
+* Convenience facade over `<pk-select>` matching React `SelectInput` ergonomics:
+* an `options[]` array plus `v-model`, instead of slotted `<pk-option>` children.
+*
+* `pk-select` is string-valued, so option values are stringified for the element and
+* mapped back to their original value on `pk-change`.
+*/
+var SelectInput = defineComponent({
+	name: "PkSelectInput",
+	props: {
+		options: {
+			type: Array,
+			required: true
+		},
+		modelValue: {
+			type: null,
+			default: void 0
+		},
+		placeholder: {
+			type: String,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		invalid: {
+			type: Boolean,
+			default: false
+		},
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		size: {
+			type: String,
+			default: void 0
+		},
+		width: {
+			type: String,
+			default: void 0
+		},
+		name: {
+			type: String,
+			default: void 0
+		},
+		id: {
+			type: String,
+			default: void 0
+		},
+		ariaLabel: {
+			type: String,
+			default: void 0
+		},
+		ariaDescribedby: {
+			type: String,
+			default: void 0
+		},
+		ariaErrormessage: {
+			type: String,
+			default: void 0
+		},
+		ariaLabelledby: {
+			type: String,
+			default: void 0
+		}
+	},
+	emits: {
+		"update:modelValue": (value) => value !== void 0,
+		blur: (event) => event instanceof Event
+	},
+	setup(props, { emit }) {
+		const flatOptions = computed(() => props.options.flatMap((option) => isGroup(option) ? option.options : [option]));
+		const handlePkChange = (event) => {
+			const detail = event.detail;
+			const raw = Array.isArray(detail?.value) ? detail?.value[0] : detail?.value;
+			const match = flatOptions.value.find((option) => toStringValue(option.value) === toStringValue(raw));
+			emit("update:modelValue", match ? match.value : raw ?? "");
+		};
+		const handleFocusOut = (event) => {
+			emit("blur", event);
+		};
+		const renderOption = (option) => h("pk-option", {
+			key: toStringValue(option.value),
+			value: toStringValue(option.value),
+			disabled: option.disabled || void 0
+		}, { default: () => [option.status ? h("pk-status", {
+			slot: "start",
+			status: option.status
+		}) : null, option.label] });
+		return () => h("pk-select", {
+			value: toStringValue(props.modelValue),
+			...props.placeholder !== void 0 ? { placeholder: props.placeholder } : {},
+			disabled: props.disabled || void 0,
+			invalid: props.invalid || void 0,
+			clearable: props.clearable || void 0,
+			...props.size ? { size: props.size } : {},
+			...props.width ? { width: props.width } : {},
+			...props.name ? { name: props.name } : {},
+			...props.id ? { id: props.id } : {},
+			...props.ariaLabel ? { "aria-label": props.ariaLabel } : {},
+			...props.ariaDescribedby ? { "aria-describedby": props.ariaDescribedby } : {},
+			...props.ariaErrormessage ? { "aria-errormessage": props.ariaErrormessage } : {},
+			...props.ariaLabelledby ? { "aria-labelledby": props.ariaLabelledby } : {},
+			onPkChange: handlePkChange,
+			onFocusout: handleFocusOut
+		}, { default: () => props.options.map((option) => isGroup(option) ? h("pk-option-group", {
+			key: option.group,
+			label: option.group
+		}, { default: () => option.options.map(renderOption) }) : renderOption(option)) });
+	}
+});
+var PkSelectInputElement = SelectInput;
+//#endregion
+export { PkSelectInputElement, SelectInput };
+
+//# sourceMappingURL=SelectInput.js.map

package/dist/components/SelectInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInput.js","names":[],"sources":["../../src/components/SelectInput.ts"],"sourcesContent":["import { computed, defineComponent, h, type PropType } from 'vue';\nimport type { PkSelectSize } from '@verbb/plugin-kit-web/components/select/pk-select.js';\nimport type { PkStatusVariant } from '@verbb/plugin-kit-web/components/status/pk-status.js';\nimport '@verbb/plugin-kit-web/components/select.js';\nimport '@verbb/plugin-kit-web/components/status.js';\n\nexport type SelectInputOption = {\n    value: unknown;\n    label: string;\n    disabled?: boolean;\n    status?: string;\n};\n\nexport type SelectInputOptionGroup = {\n    group: string;\n    options: SelectInputOption[];\n};\n\nexport type SelectInputProps = {\n    options: Array<SelectInputOption | SelectInputOptionGroup>;\n    modelValue?: unknown;\n    placeholder?: string;\n    disabled?: boolean;\n    invalid?: boolean;\n    clearable?: boolean;\n    size?: PkSelectSize;\n    /** When `full`, stretch the select host to the available width (table cells). */\n    width?: 'full';\n    name?: string;\n    id?: string;\n    'aria-label'?: string;\n    'aria-describedby'?: string;\n    'aria-errormessage'?: string;\n    'aria-labelledby'?: string;\n};\n\nconst isGroup = (option: SelectInputOption | SelectInputOptionGroup): option is SelectInputOptionGroup => {\n    return typeof option === 'object' && option !== null && 'group' in option;\n};\n\nconst toStringValue = (value: unknown): string => {\n    return value === undefined || value === null ? '' : String(value);\n};\n\n/**\n * Convenience facade over `<pk-select>` matching React `SelectInput` ergonomics:\n * an `options[]` array plus `v-model`, instead of slotted `<pk-option>` children.\n *\n * `pk-select` is string-valued, so option values are stringified for the element and\n * mapped back to their original value on `pk-change`.\n */\nexport const SelectInput = defineComponent({\n    name: 'PkSelectInput',\n    props: {\n        options: { type: Array as PropType<Array<SelectInputOption | SelectInputOptionGroup>>, required: true },\n        modelValue: { type: null as unknown as PropType<unknown>, default: undefined },\n        placeholder: { type: String, default: undefined },\n        disabled: { type: Boolean, default: false },\n        invalid: { type: Boolean, default: false },\n        clearable: { type: Boolean, default: false },\n        size: { type: String as PropType<PkSelectSize>, default: undefined },\n        width: { type: String as PropType<'full'>, default: undefined },\n        name: { type: String, default: undefined },\n        id: { type: String, default: undefined },\n        ariaLabel: { type: String, default: undefined },\n        ariaDescribedby: { type: String, default: undefined },\n        ariaErrormessage: { type: String, default: undefined },\n        ariaLabelledby: { type: String, default: undefined },\n    },\n    emits: {\n        'update:modelValue': (value: unknown) => value !== undefined,\n        blur: (event: Event) => event instanceof Event,\n    },\n    setup(props, { emit }) {\n        const flatOptions = computed(() => props.options.flatMap((option) => (isGroup(option) ? option.options : [option])));\n\n        const handlePkChange = (event: Event): void => {\n            const detail = (event as CustomEvent<{ value: string | string[] }>).detail;\n            // SelectInput is single-value; if the CE ever emits an array, take the first entry.\n            const raw = Array.isArray(detail?.value) ? detail?.value[0] : detail?.value;\n            const match = flatOptions.value.find((option) => toStringValue(option.value) === toStringValue(raw));\n\n            emit('update:modelValue', match ? match.value : raw ?? '');\n        };\n\n        const handleFocusOut = (event: Event): void => {\n            emit('blur', event);\n        };\n\n        const renderOption = (option: SelectInputOption) => h(\n            'pk-option',\n            {\n                key: toStringValue(option.value),\n                value: toStringValue(option.value),\n                disabled: option.disabled || undefined,\n            },\n            {\n                default: () => [\n                    option.status\n                        ? h('pk-status', {\n                            // Named slot on the option — start decoration before the label.\n                            slot: 'start',\n                            status: option.status as PkStatusVariant,\n                        })\n                        : null,\n                    option.label,\n                ],\n            },\n        );\n\n        return () => h(\n            'pk-select',\n            {\n                value: toStringValue(props.modelValue),\n                ...(props.placeholder !== undefined ? { placeholder: props.placeholder } : {}),\n                disabled: props.disabled || undefined,\n                invalid: props.invalid || undefined,\n                clearable: props.clearable || undefined,\n                ...(props.size ? { size: props.size } : {}),\n                ...(props.width ? { width: props.width } : {}),\n                ...(props.name ? { name: props.name } : {}),\n                ...(props.id ? { id: props.id } : {}),\n                ...(props.ariaLabel ? { 'aria-label': props.ariaLabel } : {}),\n                ...(props.ariaDescribedby ? { 'aria-describedby': props.ariaDescribedby } : {}),\n                ...(props.ariaErrormessage ? { 'aria-errormessage': props.ariaErrormessage } : {}),\n                ...(props.ariaLabelledby ? { 'aria-labelledby': props.ariaLabelledby } : {}),\n                onPkChange: handlePkChange,\n                // React maps `onBlur` → `onFocusOut`; Vue consumers listen for `@blur`.\n                onFocusout: handleFocusOut,\n            },\n            {\n                default: () => props.options.map((option) => (isGroup(option)\n                    ? h(\n                        'pk-option-group',\n                        { key: option.group, label: option.group },\n                        { default: () => option.options.map(renderOption) },\n                    )\n                    : renderOption(option))),\n            },\n        );\n    },\n});\n\nexport const PkSelectInputElement = SelectInput;\n"],"mappings":"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"}

package/dist/components/Separator.d.ts

@@ -0,0 +1,9 @@
+/** Vue facade over `<pk-separator>`. Behavior and styles live in the web component. */
+export declare const Separator: import('vue').DefineComponent<{}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const PkSeparatorElement: import('vue').DefineComponent<{}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export type SeparatorProps = Record<string, unknown>;
+//# sourceMappingURL=Separator.d.ts.map

package/dist/components/Separator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../src/components/Separator.ts"],"names":[],"mappings":"AACA,OAAO,+CAA+C,CAAC;AAEvD,uFAAuF;AACvF,eAAO,MAAM,SAAS;;2OAGpB,CAAC;AAEH,eAAO,MAAM,kBAAkB;;2OAAY,CAAC;AAE5C,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC"}