@knitify/vue 2.0.0 → 2.1.0

package/dist/types/components/Field/types.d.ts

@@ -0,0 +1,35 @@
+export type KFieldProps = {
+    counter?: boolean;
+    disabled?: boolean;
+    /** A string shows it as the message; `true` marks the field invalid with no message. */
+    error?: string | boolean;
+    group?: boolean;
+    hint?: string;
+    horizontal?: boolean;
+    id?: string;
+    label?: string;
+    required?: boolean;
+    /**
+     * The text announced for a required group or button control (KSelect),
+     * where `aria-required` is not allowed. Defaults to `'required'`.
+     */
+    requiredLabel?: string;
+    /** A string shows it as the message; `true` marks the field successful with no message. */
+    success?: string | boolean;
+};
+export type KFieldSlotProps = {
+    id: string;
+    describedBy: string | undefined;
+    invalid: boolean;
+    required: boolean;
+    disabled: boolean;
+};
+export type KFieldSlots = {
+    default?(props: KFieldSlotProps): any;
+    label?(): any;
+    labelEnd?(): any;
+};
+export type KFieldCount = {
+    length: number;
+    max: number;
+};

package/dist/types/components/Flex/KFlex.vue.d.ts

@@ -0,0 +1,11 @@
+import type { KFlexProps, KFlexSlots } from './types';
+type __VLS_Slots = KFlexSlots;
+declare const __VLS_base: import("vue").DefineComponent<KFlexProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KFlexProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/Flex/types.d.ts

@@ -0,0 +1,26 @@
+import type { Size } from '../../types';
+/** Maps to core's `is-items-*`. */
+export type KFlexAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+/** Maps to core's `is-justify-*`. */
+export type KFlexJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+/** Space tokens, matching core's `is-gap-*`. `0` is a real gap. */
+export type KFlexGap = 0 | Size | '6xl';
+export type KFlexProps = {
+    /** Cross-axis alignment of the children. */
+    align?: KFlexAlign;
+    /** Element to render. Defaults to `div`. */
+    as?: string;
+    gap?: KFlexGap;
+    /** `inline-flex` instead of `flex`. */
+    inline?: boolean;
+    /** Main-axis distribution of the children. */
+    justify?: KFlexJustify;
+    /** Reverses the order along the main axis. */
+    reverse?: boolean;
+    /** Lays the children out top to bottom instead of left to right. */
+    vertical?: boolean;
+    wrap?: boolean;
+};
+export type KFlexSlots = {
+    default?(): any;
+};

package/dist/types/components/Input/KInput.vue.d.ts

@@ -8,8 +8,10 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     field: Readonly<import("vue").ShallowRef<HTMLTextAreaElement | null>>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clear: () => any;
     "update:modelValue": (value: string | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClear?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/types/components/Input/types.d.ts

@@ -2,12 +2,22 @@ export type KInputSlots = {
     prefix?(): any;
     suffix?(): any;
 };
+export type KInputEmits = {
+    /** The × emptied the field. */
+    clear: [];
+};
 export type KInputProps = {
     addonBordered?: boolean;
     /** Implies `textarea`. Growth is core's `Input.ts`, driven by this component. */
     autosize?: boolean;
+    /** Shows a × that clears the value while there is one. Not for textareas. */
+    clearable?: boolean;
+    /** The × button's accessible name. Default `'Clear'`. */
+    clearLabel?: string;
     disabled?: boolean;
     ghost?: boolean;
+    /** Shows a spinner as the last addon and marks the field busy. It stays editable. */
+    loading?: boolean;
     maxRows?: number;
     placeholder?: string;
     readonly?: boolean;

package/dist/types/components/Modal/types.d.ts

@@ -1,5 +1,5 @@
 import { ClassValue } from 'vue';
-export type KModalSize = 'sm' | 'md' | 'lg' | 'xl';
+export type KModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 export type KModalProps = {
     bodyClass?: ClassValue;
     /** Vertically centre the dialog rather than aligning it to the top. */
@@ -9,6 +9,8 @@ export type KModalProps = {
     containerClass?: ClassValue;
     dialogClass?: ClassValue;
     dialogLabel?: string;
+    /** Removes the header and footer borders that divide them from the body. */
+    flush?: boolean;
     /**
      * Focus the first focusable element on open. Core rebuilds its own instance
      * for `data-kt-modal-toggle` clicks and does not read this off the DOM, so it
@@ -31,6 +33,8 @@ export type KModalProps = {
     mainClass?: ClassValue;
     scrollable?: boolean;
     sidebarClass?: ClassValue;
+    /** Any CSS length, e.g. `'280px'`. Sets `--kt-modal-sidebar-width`. */
+    sidebarWidth?: string;
     size?: KModalSize;
     /** Ignore backdrop clicks, leaving an explicit dismiss the only way out. */
     staticBackdrop?: boolean;

package/dist/types/components/Pagination/KPagination.vue.d.ts

@@ -0,0 +1,13 @@
+import type { KPaginationProps } from './types';
+type __VLS_Props = KPaginationProps;
+type __VLS_ModelProps = {
+    'page'?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:page": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:page"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/components/Pagination/range.d.ts

@@ -0,0 +1,6 @@
+import type { KPaginationItem } from './types';
+/**
+ * The pages to show around `page`. The item count stays the same wherever the
+ * current page is, so the control doesn't change width as you page through.
+ */
+export declare function getPaginationRange(page: number, total: number, siblings: number, boundaries: number): KPaginationItem[];

package/dist/types/components/Pagination/types.d.ts

@@ -0,0 +1,20 @@
+import type { KButtonSize } from '../Button/types';
+export type KPaginationProps = {
+    /** Names the navigation landmark. */
+    ariaLabel?: string;
+    /** Pages shown at each end, before and after the ellipses. */
+    boundaries?: number;
+    disabled?: boolean;
+    /** Accessible name of the next-page button. */
+    nextLabel?: string;
+    /** Accessible name of the previous-page button. */
+    prevLabel?: string;
+    /** Pages shown either side of the current one. */
+    siblings?: number;
+    /** Passed to every page button. Defaults to `sm`. */
+    size?: KButtonSize;
+    /** Number of pages. */
+    total: number;
+};
+/** A page number, or a gap rendered as an ellipsis. */
+export type KPaginationItem = number | 'ellipsis';

package/dist/types/components/RadioCard/KRadioCard.vue.d.ts

@@ -0,0 +1,20 @@
+import type { KRadioCardProps, KRadioCardSlots } from './types';
+type __VLS_Props = KRadioCardProps;
+type __VLS_Slots = KRadioCardSlots;
+type __VLS_ModelProps = {
+    modelValue?: unknown;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/RadioCard/KRadioCardGroup.vue.d.ts

@@ -0,0 +1,11 @@
+import type { KRadioCardGroupSlots } from './types';
+type __VLS_Slots = KRadioCardGroupSlots;
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/RadioCard/types.d.ts

@@ -0,0 +1,25 @@
+export type KRadioCardProps = {
+    disabled?: boolean;
+    /**
+     * Sprite id of the illustration above the label, e.g. `kt-megaphoneColored`.
+     * The `media` slot overrides it.
+     */
+    icon?: string;
+    /** Text under the illustration. The default slot overrides it. */
+    label?: string;
+    /**
+     * Groups cards for keyboard navigation. Selection is driven by the shared
+     * `v-model`, so this is only needed when the group must also work natively —
+     * inside an uncontrolled form, say.
+     */
+    name?: string;
+    /** What the shared model is set to when this card is picked. */
+    value?: unknown;
+};
+export type KRadioCardSlots = {
+    default?(): any;
+    media?(): any;
+};
+export type KRadioCardGroupSlots = {
+    default?(): any;
+};

package/dist/types/components/SearchInput/KSearchInput.vue.d.ts

@@ -0,0 +1,22 @@
+import type { KSearchInputProps, KSearchInputSlots } from './types';
+type __VLS_Props = KSearchInputProps;
+type __VLS_Slots = KSearchInputSlots;
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    field: import("vue").ComputedRef<HTMLTextAreaElement | null | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/SearchInput/types.d.ts

@@ -0,0 +1,7 @@
+import type { KInputProps } from '../Input/types';
+export type KSearchInputProps = Omit<KInputProps, 'autosize' | 'maxRows' | 'rows' | 'textarea' | 'type'>;
+export type KSearchInputSlots = {
+    /** Replaces the search icon. */
+    prefix?(): any;
+    suffix?(): any;
+};

package/dist/types/components/SegmentedButtons/KSegmentedButton.vue.d.ts

@@ -0,0 +1,20 @@
+import type { KSegmentedButtonProps, KSegmentedButtonSlots } from './types';
+type __VLS_Props = KSegmentedButtonProps;
+type __VLS_Slots = KSegmentedButtonSlots;
+type __VLS_ModelProps = {
+    modelValue?: unknown;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/SegmentedButtons/KSegmentedButtons.vue.d.ts

@@ -0,0 +1,11 @@
+import type { KSegmentedButtonsProps, KSegmentedButtonsSlots } from './types';
+type __VLS_Slots = KSegmentedButtonsSlots;
+declare const __VLS_base: import("vue").DefineComponent<KSegmentedButtonsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KSegmentedButtonsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/SegmentedButtons/types.d.ts

@@ -0,0 +1,25 @@
+export type KSegmentedButtonsProps = {
+    /** Stretches across the container, splitting the width equally. */
+    block?: boolean;
+};
+export type KSegmentedButtonsSlots = {
+    default?(): any;
+};
+export type KSegmentedButtonProps = {
+    disabled?: boolean;
+    /** Sprite id of the icon before the label, e.g. `kt-preview`. */
+    icon?: string;
+    /** Segment text. The default slot overrides it. */
+    label?: string;
+    /**
+     * Groups segments for keyboard navigation. Selection is driven by the shared
+     * `v-model`, so this is only needed when the group must also work natively —
+     * inside an uncontrolled form, say.
+     */
+    name?: string;
+    /** What the shared model is set to when this segment is picked. */
+    value?: unknown;
+};
+export type KSegmentedButtonSlots = {
+    default?(): any;
+};

package/dist/types/components/Select/KSelect.vue.d.ts

@@ -7,9 +7,11 @@ type __VLS_ModelProps = {
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (value: string) => any;
+    clear: () => any;
     "update:modelValue": (value: string | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onChange?: ((value: string) => any) | undefined;
+    onClear?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -4,11 +4,17 @@ export type KSelectOption = {
     value: string;
 };
 export type KSelectProps = {
+    /** Shows a × that clears the selection while there is one. */
+    clearable?: boolean;
+    /** The × button's accessible name. Default `'Clear'`. */
+    clearLabel?: string;
     disabled?: boolean;
     /** Sprite href for the caret. */
     icon?: string;
     /** Renders the control inline rather than filling its container. */
     inline?: boolean;
+    /** Shows a spinner in place of the caret; the menu does not open while loading. */
+    loading?: boolean;
     menuClass?: ClassValue;
     /**
      * A bare string is used as both value and label.
@@ -23,6 +29,8 @@ export type KSelectProps = {
 };
 export type KSelectEmits = {
     change: [value: string];
+    /** The × cleared the selection; the model is now `undefined`. */
+    clear: [];
 };
 export type KSelectSlots = {
     /** Replaces the generated items. Give each one `data-kt-select-item`. */

package/dist/types/components/Skeleton/KSkeleton.vue.d.ts

@@ -0,0 +1,4 @@
+import type { KSkeletonProps } from './types';
+declare const __VLS_export: import("vue").DefineComponent<KSkeletonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KSkeletonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/components/Skeleton/types.d.ts

@@ -0,0 +1,19 @@
+export type KSkeletonShape = 'rect' | 'text' | 'circle' | 'rounded';
+export type KSkeletonAnimation = 'shimmer' | 'pulse' | 'none';
+/** A CSS length, or a number of pixels. */
+export type KSkeletonSize = string | number;
+export type KSkeletonProps = {
+    /** Defaults to `rect`. */
+    shape?: KSkeletonShape;
+    /**
+     * Defaults to the full width, or the base avatar size for a `circle`. With
+     * `lines`, the width of the whole group.
+     */
+    width?: KSkeletonSize;
+    /** For a `circle`, the diameter when `width` is not given. */
+    height?: KSkeletonSize;
+    /** Number of `text` lines; the last is shortened. Defaults to 1. */
+    lines?: number;
+    /** Defaults to `shimmer`. Always off under reduced motion. */
+    animation?: KSkeletonAnimation;
+};

package/dist/types/components/Table/KTable.vue.d.ts

@@ -1,6 +1,13 @@
 import type { KTableProps, KTableSlots } from './types';
 type __VLS_Slots = KTableSlots;
-declare const __VLS_base: import("vue").DefineComponent<KTableProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KTableProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<KTableProps, {
+    /** Hands every column back to automatic layout. */
+    reset: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    resize: (widths: number[]) => any;
+}, string, import("vue").PublicProps, Readonly<KTableProps> & Readonly<{
+    onResize?: ((widths: number[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/types/components/Table/KTableResizer.vue.d.ts

@@ -0,0 +1,4 @@
+import type { KTableResizerProps } from './types';
+declare const __VLS_export: import("vue").DefineComponent<KTableResizerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KTableResizerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/components/Table/types.d.ts

@@ -6,11 +6,36 @@ export type KTableSize = 'md' | 'lg' | 'xl';
  * colspans — stays yours.
  */
 export type KTableProps = {
-    borderless?: boolean;
     hoverable?: boolean;
+    /**
+     * How many leading columns stay put while the table scrolls sideways, up to
+     * 4. Wrap the table in an `overflow-x: auto` container.
+     */
+    pinStart?: number;
+    /** How many trailing columns stay put, up to 4 — e.g. an actions column. */
+    pinEnd?: number;
     size?: KTableSize;
-    striped?: boolean;
+    /**
+     * Pins the header to the top of the nearest scrolling ancestor — a
+     * height-capped `overflow: auto` wrapper, or the page. Offset it with the
+     * `--kt-table-sticky-top` CSS variable, e.g. below a fixed navbar.
+     */
+    stickyHeader?: boolean;
+};
+export type KTableEmits = {
+    /**
+     * A column was resized — dragged, stepped with the arrow keys, or reset by
+     * a double-click. Carries every column's width in px, header order.
+     */
+    (event: 'resize', widths: number[]): void;
+};
+export type KTableResizerProps = {
+    /** Names the handle for assistive tech, e.g. "Resize Title". */
+    label?: string;
 };
 export type KTableSlots = {
+    /** The table's rows — `<thead>`, `<tbody>` and so on. */
     default?(): any;
+    /** Rendered inside a `<tfoot>` — pass `<tr>`s, e.g. a totals row. */
+    footer?(): any;
 };

package/dist/types/components/Tabs/types.d.ts

@@ -1,11 +1,29 @@
-import type { ComputedRef, InjectionKey } from 'vue';
+import type { ClassValue, ComputedRef, InjectionKey } from 'vue';
 export type KTabsVariant = 'pills' | 'underline';
 export type KTabsProps = {
     /** Names the tablist. */
     ariaLabel?: string;
+    /** Classes for the panels' wrapper. */
+    contentClass?: ClassValue;
+    /**
+     * Disables every tab. The active panel stays visible, and `v-model` can
+     * still switch it.
+     */
+    disabled?: boolean;
+    /** Classes for the tablist, where the variant class also goes. */
+    listClass?: ClassValue;
+    /**
+     * Renders the tablist alone, without the panels' wrapper — for tabs that
+     * drive content elsewhere through `v-model`. The default slot is ignored.
+     */
+    noContent?: boolean;
     variant?: KTabsVariant;
 };
 export type KTabProps = {
+    /**
+     * Takes the tab out of roving focus and out of `v-model`'s reach — setting
+     * the model to its name is a no-op.
+     */
     disabled?: boolean;
     /** Matches this tab to its panel, and is what `v-model` holds. */
     name: string;
@@ -25,11 +43,15 @@ export type KTabsSlots = {
 };
 export type KTabsContext = {
     active: ComputedRef<string | undefined>;
+    disabled: ComputedRef<boolean>;
+    /** False under `noContent`, where there is no panel for a tab to control. */
+    hasPanels: ComputedRef<boolean>;
     /**
      * Core resolves a panel with `querySelector('#' + target)` without escaping,
-     * so the id is restricted to characters that are safe unquoted. Two names
-     * differing only in punctuation therefore collapse to the same id.
+     * so the id is restricted to characters that are safe unquoted.
      */
     panelId: (name: string) => string;
+    /** The tab's id, which its panel is labelled by. */
+    tabId: (name: string) => string;
 };
 export declare const tabsKey: InjectionKey<KTabsContext>;

package/dist/types/components/TagsInput/KTagsInput.vue.d.ts

@@ -0,0 +1,32 @@
+import type { KTagsInputProps, KTagsInputSlots } from './types';
+type __VLS_Props = KTagsInputProps;
+type __VLS_Slots = KTagsInputSlots;
+type __VLS_ModelProps = {
+    modelValue?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    add: (value: string) => boolean;
+    clear: () => never[];
+    focus: () => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    invalid: (value: string, reason: string) => any;
+    remove: (value: string, index: number) => any;
+    "update:modelValue": (value: string[]) => any;
+    add: (value: string) => any;
+    loadError: (error: unknown, query: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onInvalid?: ((value: string, reason: string) => any) | undefined;
+    onRemove?: ((value: string, index: number) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+    onAdd?: ((value: string) => any) | undefined;
+    onLoadError?: ((error: unknown, query: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/TagsInput/types.d.ts

@@ -0,0 +1,68 @@
+export type KTagsInputValidator = (tag: string, tags: string[]) => true | string;
+export type KTagsInputOption = {
+    label: string;
+    value: string;
+    data?: unknown;
+};
+export type KTagsInputLoader = (query: string, context: {
+    signal: AbortSignal;
+}) => Promise<(KTagsInputOption | string)[]>;
+export type KTagsInputProps = {
+    /** Dedupe treats "Design" and "design" as different tags. */
+    caseSensitive?: boolean;
+    /** Characters that commit a tag. Enter always commits. Default `',;'`. */
+    delimiters?: string;
+    disabled?: boolean;
+    ghost?: boolean;
+    max?: number;
+    /** Renders a hidden input holding the tags joined with commas. */
+    name?: string;
+    /** Shows a spinner and marks the field busy; combined with a pending `load`. */
+    loading?: boolean;
+    /** Loads suggestions for the typed text (debounced; stale requests aborted). */
+    load?: KTagsInputLoader;
+    /** Debounce before `load` runs, in ms. Default `250`. */
+    loadDelay?: number;
+    /** Shows the whole suggestion list on focus, before anything is typed. */
+    openOnFocus?: boolean;
+    /** Suggestions shown while typing. A bare string is both label and value. */
+    options?: (KTagsInputOption | string)[];
+    placeholder?: string;
+    /** Shows the tags but hides the text field and the remove buttons. */
+    readonly?: boolean;
+    /** Only listed options can become tags; others are rejected as `'not-in-list'`. */
+    restrict?: boolean;
+    rounded?: boolean;
+    sunken?: boolean;
+    transparent?: boolean;
+    /** Return `true` to accept, or a reason string to reject. */
+    validate?: KTagsInputValidator;
+};
+export type KTagsInputEmits = {
+    add: [value: string];
+    remove: [value: string, index: number];
+    /** `reason` is `'duplicate'`, `'max'`, `'not-in-list'`, or the string `validate` returned. */
+    invalid: [value: string, reason: string];
+    loadError: [error: unknown, query: string];
+};
+export type KTagsInputSlots = {
+    /** Replaces the tag's label. The remove button is still rendered after it. */
+    tag?(props: {
+        value: string;
+        label: string;
+        index: number;
+        remove: () => void;
+    }): any;
+    /**
+     * Replaces a suggestion row's content (default: the label). Focus stays in
+     * the text field and rows are picked with Enter or a click, so put nothing
+     * focusable or interactive inside.
+     */
+    option?(props: {
+        option: KTagsInputOption;
+        active: boolean;
+        index: number;
+    }): any;
+    prefix?(): any;
+    suffix?(): any;
+};

package/dist/types/components/TagsInput/useTagsInput.d.ts

@@ -0,0 +1,27 @@
+import type { ShallowRef } from 'vue';
+import Knitify from '@knitify/core';
+type TagsInputModuleConfig = NonNullable<ConstructorParameters<typeof Knitify.modules.TagsInput>[1]>;
+type TagsInputControls = {
+    add(value: string): boolean;
+    focus(): void;
+    getValues(): string[];
+    remove(value: string): boolean;
+    setLoading(loading: boolean): void;
+    setOptions(options: (string | {
+        label: string;
+        value: string;
+    })[]): void;
+    setValues(values: string[]): void;
+};
+type Options = {
+    root: Readonly<ShallowRef<HTMLElement | null>>;
+    /** Read inside a watcher, so every prop it touches triggers a rebuild. */
+    config: () => TagsInputModuleConfig;
+    /** Pushes the current model into a freshly built module. */
+    apply: (instance: TagsInputControls) => void;
+    listeners: Record<string, (event: CustomEvent) => void>;
+};
+export declare function useTagsInput({ root, config, apply, listeners }: Options): {
+    getInstance: () => TagsInputControls | undefined;
+};
+export {};