@livestorm/ui-vue 3.0.0 → 4.0.0

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<{
@@ -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,61 +138,61 @@ 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" | "size-4" | "size-5" | "size-6" | "size-7">;
+    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-6': boolean;
-        'size-8': boolean;
-        'size-10': boolean;
-        'size-12': boolean;
-        'grid place-items-center'?: undefined;
-        'h-6 text-action-button-sm'?: 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-6'?: undefined;
-        'size-8'?: undefined;
-        'size-10'?: undefined;
-        'size-12'?: undefined;
-        'h-6 text-action-button-sm'?: 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-6 text-action-button-sm': boolean;
-        'h-8 text-action-button-sm': boolean;
-        'h-10 text-action-button-md': boolean;
-        'h-12 text-action-button-lg': boolean;
-        'size-6'?: undefined;
-        '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-6'?: undefined;
-        'size-8'?: undefined;
-        'size-10'?: undefined;
-        'size-12'?: undefined;
         'grid place-items-center'?: undefined;
-        'h-6 text-action-button-sm'?: 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;
@@ -188,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;
@@ -212,6 +261,15 @@ 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;
@@ -228,9 +286,11 @@ 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;

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/types.d.ts

@@ -1,10 +1,14 @@
 import type { ComputedRef, InjectionKey } from 'vue';
 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';
+}

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

@@ -0,0 +1,136 @@
+import type { RouteLocationRaw } from 'vue-router';
+import type { UiTableSize } from '../UiTable/context';
+import type { UiDataTableColumn, UiDataTableSort } from './UiDataTable.types';
+export interface UiDataTableProps<TData> {
+    /** Column definitions. Each column can be customized via `#cell-<id>` and `#header-<id>` slots. */
+    columns: UiDataTableColumn<TData>[];
+    /** Rows, already sorted/filtered by the consumer. */
+    data: TData[];
+    /**
+     * Row heights: `md` = 40px header / 48px rows, `lg` = 48px header / 64px rows.
+     * @default 'md'
+     */
+    size?: UiTableSize;
+    /**
+     * Alternating row backgrounds. Preferred over row dividers.
+     * @default true
+     */
+    zebra?: boolean;
+    /**
+     * Renders skeleton rows instead of data.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Number of skeleton rows while loading.
+     * @default 5
+     */
+    skeletonRows?: number;
+    /**
+     * Current sort, controlled by the consumer (`v-model:sorting`). The table
+     * only renders the affordance and emits; sorting the data stays consumer-side.
+     * @default null
+     */
+    sorting?: UiDataTableSort | null;
+    /**
+     * Makes rows interactive: hover feedback, keyboard focus and `row-click` emits.
+     * @default false
+     */
+    rowClickable?: boolean;
+    /**
+     * Turns each row into a link to the returned location. The first cell holds
+     * a router link stretched over the row, so Cmd/Ctrl click, middle click and
+     * keyboard focus behave like any link. The first column's content sits
+     * inside the link, so it must hold no interactive content. Content of other
+     * cells that must stay interactive above the link (tooltips, buttons) needs
+     * `relative z-10`; the selection checkbox and `#actions` already sit above
+     * it. Takes precedence over `rowClickable`.
+     */
+    rowLink?: (row: TData) => RouteLocationRaw;
+    /**
+     * Adds a leftmost checkbox column with a select-all header. Selection is
+     * controlled through `v-model:selectedRowIds`; pass `getRowId` so ids stay
+     * stable across data changes.
+     * @default false
+     */
+    selectable?: boolean;
+    /**
+     * Selected row ids, controlled by the consumer (`v-model:selectedRowIds`).
+     * @default []
+     */
+    selectedRowIds?: string[];
+    /**
+     * How the `#actions` slot attaches to the row. `default` reveals it on
+     * hover, masking the cells behind bare action buttons; `floating` also
+     * reveals on hover but drops that backdrop for self-contained content
+     * like a UiActionBar; `menu` tucks it behind an always-visible trigger
+     * button that opens a popover on click.
+     * @default 'default'
+     */
+    actionsVariant?: 'default' | 'floating' | 'menu';
+    /**
+     * Whether a row has trailing actions. Rows that return false get an empty
+     * actions cell, so nothing reveals over them on hover. All rows have
+     * actions when omitted.
+     */
+    rowHasActions?: (row: TData) => boolean;
+    /**
+     * Id of the row whose hover actions stay shown without hover or focus,
+     * e.g. while a menu opened from them is open. Matches `getRowId`.
+     * @default null
+     */
+    revealedActionsRowId?: string | null;
+    /** Stable row identity; falls back to the row index. */
+    getRowId?: (row: TData, index: number) => string;
+}
+declare const __VLS_export: <TData extends Record<string, unknown>>(__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<UiDataTableProps<TData> & {
+        "onUpdate:sorting"?: ((sort: UiDataTableSort | null) => any) | undefined;
+        "onUpdate:selectedRowIds"?: ((ids: string[]) => any) | undefined;
+        onRowClick?: ((row: TData) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        table: import("@tanstack/vue-table").VueTable<{
+            rowSortingFeature: import("@tanstack/vue-table").TableFeature;
+            rowSelectionFeature: import("@tanstack/vue-table").TableFeature;
+        }, TData>;
+    }>) => void;
+    attrs: any;
+    slots: {
+        /** Trailing row actions, revealed on row hover/focus. */
+        actions?: (props: {
+            row: TData;
+        }) => unknown;
+        /**
+         * Rows after the data rows, in a second body of the same table, e.g. a
+         * teaser for rows the plan hides. They share the column grid and the
+         * zebra of the data rows. Render a `UiTableCell` per column, after an
+         * empty one when `selectable`, and end each row with an empty
+         * `UiTableActionsCell` when `hasActions`. The body is positioned, so an
+         * overlay over these rows can sit in a `UiTableRow` with `zebra` off.
+         */
+        'body-end'?: (props: {
+            columns: UiDataTableColumn<TData>[];
+            selectable: boolean;
+            hasActions: boolean;
+            actionsVariant: "default" | "floating" | "menu";
+        }) => unknown;
+    } & Partial<Record<`cell-${string}`, (props: {
+        row: TData;
+        value: unknown;
+    }) => unknown>> & Partial<Record<`header-${string}`, (props: {
+        column: UiDataTableColumn<TData>;
+    }) => unknown>>;
+    emit: ((evt: "update:sorting", sort: UiDataTableSort | null) => void) & ((evt: "update:selectedRowIds", ids: string[]) => void) & ((evt: "rowClick", row: TData) => 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];
+}) & {};