@livestorm/ui-vue 2.0.5 → 4.0.0

package/dist/types/src/components/UiBanner/UiBanner.vue.d.ts

@@ -9,6 +9,14 @@ export interface UiBannerProps {
      * @values full-width, horizontal, vertical
      */
     variant?: 'full-width' | 'horizontal' | 'vertical';
+    /**
+     * Title text; the default slot overrides it
+     */
+    title?: string;
+    /**
+     * Description text; the description slot overrides it
+     */
+    description?: string;
     /**
      * Show or hide the icon
      */
@@ -58,11 +66,13 @@ type __VLS_ModelProps = {
     'closed'?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_1: {}, __VLS_3: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
     description?: (props: typeof __VLS_3) => any;
+} & {
+    action?: (props: typeof __VLS_5) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "banner-action": () => any;
@@ -73,8 +83,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     onClose?: (() => any) | undefined;
     "onUpdate:closed"?: ((value: boolean) => any) | undefined;
 }>, {
+    title: string;
     variant: "full-width" | "horizontal" | "vertical";
     color: "neutral" | "primary" | "success" | "warning" | "danger";
+    description: string;
     showIcon: boolean;
     actionLabel: string;
     actionDisabled: boolean;

package/dist/types/src/components/UiButton/UiButton.vue.d.ts

@@ -3,6 +3,8 @@ import { type ButtonVariant, type ButtonColor } from '../../composables/useButto
 import type { RouteLocationRaw } from 'vue-router';
 export type Variant = ButtonVariant;
 export type Color = ButtonColor;
+declare const TEXT_STYLES: readonly ["action", "body"];
+export type TextStyle = typeof TEXT_STYLES[number];
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -11,7 +13,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         default: string;
     };
     size: {
-        type: StringConstructor;
+        type: () => Size;
         default: string;
         validator: (value: Size) => boolean;
     };
@@ -40,6 +42,15 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: (BooleanConstructor | StringConstructor)[];
         default: undefined;
     };
+    /**
+     * `body` sets the label in the regular body text style and its icons one step smaller, the look of a
+     * `UiDropdownTrigger` of variant `tertiary`, so a button reads as one more control beside such triggers.
+     */
+    textStyle: {
+        type: () => TextStyle;
+        default: string;
+        validator: (value: TextStyle) => boolean;
+    };
     loading: {
         type: BooleanConstructor;
         default: boolean;
@@ -64,11 +75,34 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: () => RouteLocationRaw;
         default: undefined;
     };
+    /**
+     * Renders the label as a link that flows and wraps inside running text: no box, the surrounding font size,
+     * the tertiary colour. Without `to` or `href` it is a focusable `role="button"` span, since a `<button>`
+     * cannot break across lines.
+     */
+    inline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {
     component: import("vue").ComputedRef<{
+        is: string;
+        props: {
+            role: string;
+            tabindex: number;
+            'aria-disabled': any;
+            to?: undefined;
+            href?: undefined;
+            type?: undefined;
+            disabled?: undefined;
+        };
+    } | {
         is: string;
         props: {
             to: any;
+            role?: undefined;
+            tabindex?: undefined;
+            'aria-disabled'?: undefined;
             href?: undefined;
             type?: undefined;
             disabled?: undefined;
@@ -77,6 +111,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         is: string;
         props: {
             href: any;
+            role?: undefined;
+            tabindex?: undefined;
+            'aria-disabled'?: undefined;
             to?: undefined;
             type?: undefined;
             disabled?: undefined;
@@ -86,6 +123,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         props: {
             type: any;
             disabled: any;
+            role?: undefined;
+            tabindex?: undefined;
+            'aria-disabled'?: undefined;
             to?: undefined;
             href?: undefined;
         };
@@ -98,64 +138,68 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     }>[] | undefined>;
     hasLabel: import("vue").ComputedRef<boolean>;
     isLink: import("vue").ComputedRef<boolean>;
-    iconSizeClasses: import("vue").ComputedRef<{
-        'size-3': boolean;
-        'size-4': boolean;
-        'size-5': boolean;
+    iconSizeClasses: import("vue").ComputedRef<"size-3" | "size-4" | "size-5" | "size-6" | "size-7" | "size-2.5" | "size-3.5">;
+    trailingIconSizeClasses: import("vue").ComputedRef<"size-4" | "size-5" | "size-6" | "size-2.5" | "size-3.5">;
+    shape: import("vue").ComputedRef<{
+        height: string;
+        square: string;
+        radius: string;
     }>;
     buttonClasses: import("vue").ComputedRef<(string | {
-        'size-8': boolean;
-        'size-10': boolean;
-        'size-12': boolean;
-        'grid place-items-center'?: undefined;
-        'h-8 text-action-button-sm'?: undefined;
-        'h-10 text-action-button-md'?: undefined;
-        'h-12 text-action-button-lg'?: undefined;
+        'grid place-items-center': boolean;
+        'text-content-legends-medium-md'?: undefined;
+        'text-content-text-md-regular'?: undefined;
+        'text-content-text-lg-regular'?: undefined;
+        'text-action-button-sm'?: undefined;
+        'text-action-button-md'?: undefined;
+        'text-action-button-lg'?: undefined;
         'inline-flex'?: undefined;
     } | {
-        'grid place-items-center': boolean;
-        'size-8'?: undefined;
-        'size-10'?: undefined;
-        'size-12'?: undefined;
-        'h-8 text-action-button-sm'?: undefined;
-        'h-10 text-action-button-md'?: undefined;
-        'h-12 text-action-button-lg'?: undefined;
+        'text-content-legends-medium-md': boolean;
+        'text-content-text-md-regular': boolean;
+        'text-content-text-lg-regular': boolean;
+        'grid place-items-center'?: undefined;
+        'text-action-button-sm'?: undefined;
+        'text-action-button-md'?: undefined;
+        'text-action-button-lg'?: undefined;
         'inline-flex'?: undefined;
     } | {
-        'h-8 text-action-button-sm': boolean;
-        'h-10 text-action-button-md': boolean;
-        'h-12 text-action-button-lg': boolean;
-        'size-8'?: undefined;
-        'size-10'?: undefined;
-        'size-12'?: undefined;
+        'text-action-button-sm': boolean;
+        'text-action-button-md': boolean;
+        'text-action-button-lg': boolean;
         'grid place-items-center'?: undefined;
+        'text-content-legends-medium-md'?: undefined;
+        'text-content-text-md-regular'?: undefined;
+        'text-content-text-lg-regular'?: undefined;
         'inline-flex'?: undefined;
     } | {
         'inline-flex': boolean;
-        'size-8'?: undefined;
-        'size-10'?: undefined;
-        'size-12'?: undefined;
         'grid place-items-center'?: undefined;
-        'h-8 text-action-button-sm'?: undefined;
-        'h-10 text-action-button-md'?: undefined;
-        'h-12 text-action-button-lg'?: undefined;
+        'text-content-legends-medium-md'?: undefined;
+        'text-content-text-md-regular'?: undefined;
+        'text-content-text-lg-regular'?: undefined;
+        'text-action-button-sm'?: undefined;
+        'text-action-button-md'?: undefined;
+        'text-action-button-lg'?: undefined;
     })[]>;
     bgClasses: import("vue").ComputedRef<string>;
     focusRingClasses: string;
     textClasses: import("vue").ComputedRef<string[]>;
     borderClasses: import("vue").ComputedRef<string[]>;
+    decorationClass: import("vue").ComputedRef<"" | "[text-decoration-line:var(--control-link-decoration)] underline-offset-3">;
     overlayClasses: import("vue").ComputedRef<string[]>;
     isSquare: import("vue").ComputedRef<boolean>;
     finalDisabled: import("vue").ComputedRef<any>;
     labelFinal: import("vue").ComputedRef<any>;
     onClick: (event: Event) => void;
+    onInlineKeydown: (event: KeyboardEvent) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "mouseenter" | "mouseleave")[], "click" | "mouseenter" | "mouseleave", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     variant: {
         type: () => Variant;
         default: string;
     };
     size: {
-        type: StringConstructor;
+        type: () => Size;
         default: string;
         validator: (value: Size) => boolean;
     };
@@ -184,6 +228,15 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: (BooleanConstructor | StringConstructor)[];
         default: undefined;
     };
+    /**
+     * `body` sets the label in the regular body text style and its icons one step smaller, the look of a
+     * `UiDropdownTrigger` of variant `tertiary`, so a button reads as one more control beside such triggers.
+     */
+    textStyle: {
+        type: () => TextStyle;
+        default: string;
+        validator: (value: TextStyle) => boolean;
+    };
     loading: {
         type: BooleanConstructor;
         default: boolean;
@@ -208,12 +261,21 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: () => RouteLocationRaw;
         default: undefined;
     };
+    /**
+     * Renders the label as a link that flows and wraps inside running text: no box, the surrounding font size,
+     * the tertiary colour. Without `to` or `href` it is a focusable `role="button"` span, since a `<button>`
+     * cannot break across lines.
+     */
+    inline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     onMouseenter?: ((...args: any[]) => any) | undefined;
     onMouseleave?: ((...args: any[]) => any) | undefined;
     onClick?: ((...args: any[]) => any) | undefined;
 }>, {
-    size: string;
+    size: "xs" | "sm" | "md" | "lg";
     label: string;
     type: string;
     icon: string | boolean;
@@ -224,27 +286,29 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     color: "primary" | "neutral" | "warning" | "success" | "error" | "neutral-invert";
     showIconLeft: boolean;
     iconRight: string | boolean;
+    textStyle: "body" | "action";
     loading: boolean;
     imageSource: string;
     tooltip: string | Record<string, any>;
+    inline: boolean;
 }, {}, {
     RenderSlot: ({ vnodes }: {
         vnodes: any;
     }) => any;
     UiLoader: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         size: {
-            type: StringConstructor;
+            type: () => Size;
             default: string;
-            validator: (value: string) => boolean;
+            validator: (value: Size) => boolean;
         };
     }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         size: {
-            type: StringConstructor;
+            type: () => Size;
             default: string;
-            validator: (value: string) => boolean;
+            validator: (value: Size) => boolean;
         };
     }>> & Readonly<{}>, {
-        size: string;
+        size: "xs" | "sm" | "md" | "lg";
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     UiTooltip: {
         new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("../UiTooltip/UiTooltip.vue").UiTooltipProps> & Readonly<{

package/dist/types/src/components/UiButtonGroup/UiButtonGroup.vue.d.ts

@@ -1,10 +1,12 @@
-import type { ButtonGroupColor, ButtonGroupSize } from './types';
+import type { ButtonGroupColor, ButtonGroupSize, ButtonGroupVariant } from './types';
 interface UiButtonGroupProps {
     modelValue?: string;
     defaultValue?: string;
     disabled?: boolean;
     size?: ButtonGroupSize;
     color?: ButtonGroupColor;
+    /** `strong` fills the selected item with the color; `light` raises it on the surface and writes its label in the color. */
+    variant?: ButtonGroupVariant;
     name?: string;
     orientation?: 'horizontal' | 'vertical';
     /**
@@ -13,6 +15,8 @@ interface UiButtonGroupProps {
      * Set to true to allow clearing the selection by clicking the active item.
      */
     allowDeselect?: boolean;
+    /** When false, the group hugs its items instead of filling its container. */
+    fullWidth?: boolean;
 }
 declare var __VLS_11: {};
 type __VLS_Slots = {} & {
@@ -26,11 +30,13 @@ declare const __VLS_base: import("vue").DefineComponent<UiButtonGroupProps, {},
     orientation: "horizontal" | "vertical";
     size: ButtonGroupSize;
     disabled: boolean;
+    variant: ButtonGroupVariant;
     color: ButtonGroupColor;
-    defaultValue: string;
     name: string;
+    defaultValue: string;
     modelValue: string;
     allowDeselect: boolean;
+    fullWidth: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/types/src/components/UiButtonGroup/UiButtonGroupItem.vue.d.ts

@@ -2,6 +2,8 @@ interface UiButtonGroupItemProps {
     value: string;
     disabled?: boolean;
     ariaLabel?: string;
+    /** Icon class (e.g. "i-ph-text-align-left") rendered before the slot, sized per group size. */
+    icon?: string;
 }
 declare var __VLS_9: {};
 type __VLS_Slots = {} & {
@@ -9,6 +11,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<UiButtonGroupItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiButtonGroupItemProps> & Readonly<{}>, {
     ariaLabel: string;
+    icon: string;
     disabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/types/src/components/UiButtonGroup/types.d.ts

@@ -1,10 +1,14 @@
 import type { ComputedRef, InjectionKey } from 'vue';
-export type ButtonGroupSize = 'sm' | 'md' | 'lg';
+export type ButtonGroupSize = 'xs' | 'sm' | 'md' | 'lg';
 export type ButtonGroupColor = 'neutral' | 'neutral-invert' | 'primary' | 'success' | 'warning' | 'error';
+export type ButtonGroupVariant = 'strong' | 'light';
 export interface ButtonGroupRegister {
     register(value: string, el: HTMLElement): void;
     unregister(value: string): void;
 }
 export declare const BUTTON_GROUP_SIZE_KEY: InjectionKey<ComputedRef<ButtonGroupSize>>;
 export declare const BUTTON_GROUP_COLOR_KEY: InjectionKey<ComputedRef<ButtonGroupColor>>;
+export declare const BUTTON_GROUP_VARIANT_KEY: InjectionKey<ComputedRef<ButtonGroupVariant>>;
 export declare const BUTTON_GROUP_REGISTER_KEY: InjectionKey<ButtonGroupRegister>;
+export declare const BUTTON_GROUP_RAIL_RADIUS: Record<ButtonGroupSize, string>;
+export declare const BUTTON_GROUP_INNER_RADIUS: Record<ButtonGroupSize, string>;

package/dist/types/src/components/UiChoice/UiChoice.vue.d.ts

@@ -0,0 +1,71 @@
+import type { RadioValue } from '../UiInputRadio/types';
+import type { ChoiceControl, ChoiceValue, ControlPosition } from './types';
+interface UiChoiceProps {
+    /**
+     * The control rendered in the row
+     */
+    control: ChoiceControl;
+    /**
+     * The label text
+     */
+    label: string;
+    /**
+     * Supporting text under the label, announced with the control
+     */
+    description?: string;
+    /**
+     * Info tooltip next to the label
+     */
+    labelInfo?: string;
+    /**
+     * The value this row selects. Required when `control` is `radio`; `null` is a valid value.
+     * A radio row goes inside a UiInputRadioGroup, which owns the selection.
+     */
+    value?: RadioValue;
+    /**
+     * Switch and checkbox: whether the row is on. A radio reads its group instead.
+     */
+    modelValue?: ChoiceValue;
+    /**
+     * Whether the row is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the row uses the small height
+     * @default false
+     */
+    compact?: boolean;
+    /**
+     * Which side of the text the control sits on
+     * @default 'end'
+     */
+    controlPosition?: ControlPosition;
+}
+type __VLS_Slots = {
+    /** Radio only: extra content under the text, such as a field the option configures */
+    content?(): unknown;
+    /** Radio only: an icon or a logo before the text */
+    icon?(): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<UiChoiceProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<UiChoiceProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    value: RadioValue;
+    disabled: boolean;
+    description: string;
+    modelValue: ChoiceValue;
+    labelInfo: string;
+    controlPosition: ControlPosition;
+    compact: boolean;
+}, {}, {}, {}, 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/src/components/UiChoice/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './UiChoice.vue';
+export type { ChoiceControl, ChoiceValue, ControlPosition } from './types';

package/dist/types/src/components/UiChoice/types.d.ts

@@ -0,0 +1,7 @@
+import type { InjectionKey } from 'vue';
+export type ChoiceControl = 'radio' | 'switch' | 'checkbox';
+export type ChoiceValue = boolean;
+/** Which side of the text a radio, checkbox or switch sits on */
+export type ControlPosition = 'start' | 'end';
+/** Provided by UiChoice, which draws the option row around the control it wraps */
+export declare const CHOICE_ROW_KEY: InjectionKey<boolean>;

package/dist/types/src/components/UiColorField/UiColorField.vue.d.ts

@@ -11,8 +11,8 @@ declare const __VLS_export: import("vue").DefineComponent<UiColorFieldProps, {},
     label: string;
     disabled: boolean;
     modelValue: string;
-    placeholder: string;
     id: string;
+    placeholder: string;
     defaultColor: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/types/src/components/UiColorPicker/UiColorPicker.vue.d.ts

@@ -6,14 +6,14 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<UiColorPickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
+    change: (value: string) => any;
     "update:color": (color: Color) => any;
     "update:selectedPresetValue": (value: string) => any;
-    change: (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<UiColorPickerProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onChange?: ((value: string) => any) | undefined;
     "onUpdate:color"?: ((color: Color) => any) | undefined;
     "onUpdate:selectedPresetValue"?: ((value: string) => any) | undefined;
-    onChange?: ((value: string) => any) | undefined;
 }>, {
     disabled: boolean;
     variant: import("./types").UiColorPickerVariant;

package/dist/types/src/components/UiCombobox/UiCombobox.types.d.ts

@@ -0,0 +1,47 @@
+import type { FieldSize } from '../../composables/useControlShape';
+export type UiComboboxSize = FieldSize;
+export interface UiComboboxOption {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+    /** Shown instead of the description, typically why the option is disabled. */
+    hint?: string;
+}
+export interface UiComboboxGroup<T extends UiComboboxOption = UiComboboxOption> {
+    label: string;
+    options: T[];
+}
+/** A selectable row after the options, picked like an option but emitted as `action`. `icon` is a complete icon class such as `i-ph-user-plus`. */
+export interface UiComboboxAction {
+    id: string;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+}
+export interface UiComboboxProps<T extends UiComboboxOption = UiComboboxOption> {
+    modelValue?: string;
+    items?: UiComboboxGroup<T>[];
+    /** Selectable rows after the options. */
+    actions?: UiComboboxAction[];
+    loading?: boolean;
+    size?: UiComboboxSize;
+    placeholder?: string;
+    disabled?: boolean;
+    label?: string;
+    ariaLabel?: string;
+    /** Translated result count, announced through a polite live region while the list is open. */
+    resultsLabel?: string;
+    id?: string;
+    /** Rows shown before the list scrolls, with a peek of the next one. All rows show when unset. */
+    maxVisibleOptions?: number;
+    /** Options show a checkbox and the list stays open after a pick, so several can be picked in a row. */
+    multiple?: boolean;
+    /** Values of the options shown checked when `multiple` is set. Picking one of them emits `deselect`. */
+    selected?: string[];
+    /**
+     * 'trigger' matches the list to the field. 'compact' caps it at 480px, so on a wide field part of the
+     * page behind stays visible, such as a list that updates while picking.
+     */
+    width?: 'trigger' | 'compact';
+}

package/dist/types/src/components/UiCombobox/UiCombobox.vue.d.ts

@@ -0,0 +1,40 @@
+import type { UiComboboxAction, UiComboboxOption, UiComboboxProps } from './UiCombobox.types';
+declare const __VLS_export: <T extends UiComboboxOption>(__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<UiComboboxProps<T> & {
+        onSelect?: ((option: T) => any) | undefined;
+        "onUpdate:open"?: ((open: boolean) => any) | undefined;
+        onAction?: ((id: string) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+        onDeselect?: ((option: T) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        /** Closes the list, for a pick that leads somewhere else, such as a dialog. */
+        close: () => void;
+    }>) => void;
+    attrs: any;
+    slots: {
+        item?: (props: {
+            option: T;
+        }) => unknown;
+        empty?: () => unknown;
+        action?: (props: {
+            action: UiComboboxAction;
+        }) => unknown;
+        /** Pinned under the options, outside their scroll: `close` closes the list. Hidden from assistive tech, so keep anything focusable out of the Tab order (`tabindex="-1"`) and redundant with Escape. */
+        footer?: (props: {
+            close: () => void;
+        }) => unknown;
+    };
+    emit: ((evt: "select", option: T) => void) & ((evt: "update:open", open: boolean) => void) & ((evt: "action", id: string) => void) & ((evt: "update:modelValue", value: string) => void) & ((evt: "deselect", option: T) => void);
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/types/src/components/UiCombobox/index.d.ts

@@ -0,0 +1,2 @@
+export { default as UiCombobox } from './UiCombobox.vue';
+export * from './UiCombobox.types';

package/dist/types/src/components/UiDataTable/UiDataTable.types.d.ts

@@ -0,0 +1,46 @@
+export interface UiDataTableColumn<TData> {
+    /**
+     * Unique column id. Also names the per-column slots:
+     * `#cell-<id>` and `#header-<id>`.
+     */
+    id: string;
+    /** Header label. An empty string renders an empty header cell. */
+    header: string;
+    /**
+     * Row property rendered by default. Omit for columns rendered
+     * entirely through their `#cell-<id>` slot.
+     */
+    accessorKey?: keyof TData & string;
+    /**
+     * Shows the sort affordance on the header. Sorting logic stays in the
+     * consumer: bind `v-model:sorting` and sort/refetch the data yourself.
+     * @default false
+     */
+    sortable?: boolean;
+    /**
+     * Content alignment. Textual data stays left-aligned; reserve `right`
+     * for numeric data.
+     * @default 'left'
+     */
+    align?: 'left' | 'right';
+    /** Fixed column width as a CSS value (e.g. '160px', '20%'). */
+    width?: string;
+    /**
+     * Minimum column width as a CSS length (e.g. '160px'). The column never
+     * shrinks below it: when the columns do not fit, the table grows wider
+     * than its region, which scrolls horizontally.
+     */
+    minWidth?: string;
+    /**
+     * Keeps the header and the values of the column on one line: the column
+     * grows to fit them instead of wrapping, and the table grows wider than
+     * its region when needed, as with `minWidth`.
+     * @default false
+     */
+    nowrap?: boolean;
+}
+export interface UiDataTableSort {
+    /** Column id being sorted. */
+    id: string;
+    direction: 'asc' | 'desc';
+}