@groupteknology/vuno 3.0.0 → 4.0.0

package/dist/runtime/app/components/Tab/Tab.d.vue.ts

@@ -0,0 +1,21 @@
+import type { TabProps } from './Tab.types.js';
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TabProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TabProps> & Readonly<{}>, {
+    disabled: boolean;
+    icon: string;
+    label: string;
+    secondaryLabel: string;
+    ui: import("../../types/slots.js").ComponentUi<"tabs">;
+    dismissAriaLabel: string;
+}, {}, {}, {}, 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/runtime/app/components/Tab/Tab.types.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentUi } from '#vuno/types/slots';
+export type TabProps = {
+    disabled?: boolean;
+    /** Nombre del aspa. Por defecto nombra la pestaña que cierra. */
+    dismissAriaLabel?: string;
+    /**
+     * Icono de la pestaña, por nombre. Vuno lo coloca al final del rótulo,
+     * salvo cuando la pestaña es descartable: entonces pasa al inicio para
+     * dejar el final al aspa.
+     */
+    icon?: string;
+    /** Rótulo cuando no se usa el slot por omisión. */
+    label?: string;
+    /**
+     * Segunda línea bajo el rótulo. Vuno solo la dibuja en pestañas
+     * contenidas y sube la fila a 64 px cuando alguna la lleva.
+     */
+    secondaryLabel?: string;
+    ui?: ComponentUi<'tabs'>;
+};

package/dist/runtime/app/components/Tab/Tab.vue

@@ -0,0 +1,130 @@
+<script setup>
+import { computed, inject, nextTick, ref, useTemplateRef } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { tabListKey } from "#vuno/components/TabList/TabList.context";
+import { tabsKey } from "#vuno/components/Tabs/Tabs.context";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "Tab", inheritAttrs: false });
+const props = defineProps({
+  disabled: { type: Boolean, required: false, default: false },
+  dismissAriaLabel: { type: String, required: false, default: void 0 },
+  icon: { type: String, required: false, default: void 0 },
+  label: { type: String, required: false, default: void 0 },
+  secondaryLabel: { type: String, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const injected = inject(tabsKey);
+if (!injected) throw new Error("[Tab] debe usarse dentro de Tabs.");
+const context = injected;
+const listContext = inject(tabListKey, void 0);
+const element = useTemplateRef("element");
+const index = context.registerTab(() => element.value);
+const hoverOff = ref(false);
+const selected = computed(() => context.selectedIndex.value === index.value);
+const contained = computed(() => context.variant.value === "contained");
+const hasSecondaryLabel = computed(() => Boolean(props.secondaryLabel) && contained.value);
+const dismissLabel = computed(() => props.dismissAriaLabel ?? `Cerrar pesta\xF1a${props.label ? ` ${props.label}` : ""}`);
+const ui = useTheme(
+  "tabs",
+  () => props.ui,
+  () => ({
+    dismissable: String(context.dismissable.value),
+    fullWidth: String(Boolean(listContext?.fullWidth.value)),
+    size: context.size.value,
+    variant: context.variant.value,
+    vertical: String(context.vertical.value)
+  })
+);
+async function close() {
+  const list = element.value?.closest('[role="tablist"]');
+  const position = index.value;
+  context.requestClose(position);
+  await nextTick();
+  const tabs = [...list?.querySelectorAll('[role="tab"]:not(:disabled)') ?? []];
+  tabs[Math.min(position, tabs.length - 1)]?.focus();
+}
+function onKeydown(event) {
+  if (!context.dismissable.value || props.disabled || event.key !== "Delete") return;
+  event.preventDefault();
+  void close();
+}
+</script>
+
+<template>
+    <button
+        :id="context.tabId(index)"
+        ref="element"
+        :aria-controls="context.panelId(index)"
+        :aria-disabled="props.disabled"
+        :aria-selected="selected"
+        :class="ui.tab"
+        :data-hover-off="contained && hoverOff ? '' : void 0"
+        :disabled="props.disabled"
+        role="tab"
+        :tabindex="selected ? 0 : -1"
+        type="button"
+        v-bind="$attrs"
+        @click="context.select(index)"
+        @keydown="onKeydown"
+    >
+        <span :class="ui.labelWrapper">
+            <span
+                v-if="props.icon && context.dismissable.value"
+                :class="ui.iconLeft"
+            >
+                <Icon
+                    class="size-4"
+                    :name="props.icon"
+                />
+            </span>
+            <span :class="ui.label">
+                <slot>{{ props.label }}</slot>
+            </span>
+            <span
+                v-if="props.icon && !context.dismissable.value"
+                :class="ui.icon"
+            >
+                <Icon
+                    class="size-4"
+                    :name="props.icon"
+                />
+            </span>
+        </span>
+        <span
+            v-if="hasSecondaryLabel"
+            :class="ui.secondaryLabel"
+            data-secondary-label
+            :title="props.secondaryLabel"
+        >
+            {{ props.secondaryLabel }}
+        </span>
+    </button>
+    <span
+        v-if="context.dismissable.value"
+        :class="ui.close"
+    >
+        <!--
+            Fuera del árbol de accesibilidad salvo en la pestaña activa, como en el
+            sistema de origen: el camino anunciado para cerrar es la tecla Suprimir
+            sobre la propia pestaña, y un botón por pestaña multiplicaría el ruido
+            dentro de un `role="tablist"`, que solo admite pestañas.
+        -->
+        <button
+            :aria-hidden="selected ? 'false' : 'true'"
+            :aria-label="dismissLabel"
+            :class="ui.closeIcon"
+            :disabled="props.disabled"
+            tabindex="-1"
+            :title="dismissLabel"
+            type="button"
+            @click.stop="close"
+            @mouseenter="hoverOff = true"
+            @mouseleave="hoverOff = false"
+        >
+            <Icon
+                class="size-4"
+                name="carbon:close"
+            />
+        </button>
+    </span>
+</template>

package/dist/runtime/app/components/Tab/Tab.vue.d.ts

@@ -0,0 +1,21 @@
+import type { TabProps } from './Tab.types.js';
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TabProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TabProps> & Readonly<{}>, {
+    disabled: boolean;
+    icon: string;
+    label: string;
+    secondaryLabel: string;
+    ui: import("../../types/slots.js").ComponentUi<"tabs">;
+    dismissAriaLabel: string;
+}, {}, {}, {}, 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/runtime/app/components/TabList/TabList.context.d.ts

@@ -0,0 +1,12 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+/**
+ * Lo poco que una pestaña necesita saber de su lista y no de la raíz.
+ *
+ * `fullWidth` cambia cómo se recortan el rótulo y el icono dentro de cada
+ * pestaña, y es una decisión de la lista: es ella la que sabe si sus columnas
+ * se reparten el ancho.
+ */
+export type TabListContext = {
+    fullWidth: ComputedRef<boolean>;
+};
+export declare const tabListKey: InjectionKey<TabListContext>;

package/dist/runtime/app/components/TabList/TabList.context.js

@@ -0,0 +1 @@
+export const tabListKey = Symbol("tab-list");

package/dist/runtime/app/components/TabList/TabList.d.vue.ts

@@ -0,0 +1,23 @@
+import type { TabListProps } from './TabList.types.js';
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TabListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TabListProps> & Readonly<{}>, {
+    fullWidth: boolean;
+    ui: import("../../types/slots.js").ComponentUi<"tabs">;
+    ariaLabel: string;
+    activation: import("./TabList.types.js").TabListActivation;
+    nextAriaLabel: string;
+    previousAriaLabel: string;
+    scrollDebounceWait: number;
+    scrollIntoView: 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/runtime/app/components/TabList/TabList.types.d.ts

@@ -0,0 +1,34 @@
+import type { ComponentUi } from '#vuno/types/slots';
+/**
+ * `automatic` selecciona al llegar con las flechas y `manual` solo mueve el
+ * foco, dejando la selección a Enter o Espacio. Vuno usa `automatic` por
+ * defecto; `manual` es lo correcto cuando cambiar de panel cuesta —una
+ * consulta, un formulario a medio llenar— y recorrerlos todos sería peor.
+ */
+export type TabListActivation = 'automatic' | 'manual';
+export type TabListProps = {
+    activation?: TabListActivation;
+    /**
+     * Nombre del `tablist`. Vuno lo deja en manos del consumidor y un grupo
+     * de pestañas sin nombre se anuncia sin decir de qué elige.
+     */
+    ariaLabel?: string;
+    /**
+     * Reparte las pestañas contenidas en columnas iguales a partir de `lg`.
+     * Vuno lo reserva para menos de nueve pestañas: con más, cada columna
+     * queda tan estrecha que el rótulo se recorta.
+     */
+    fullWidth?: boolean;
+    /** Nombre de la flecha que avanza; solo lo lee la tecnología asistiva. */
+    nextAriaLabel?: string;
+    previousAriaLabel?: string;
+    /**
+     * Espera en milisegundos antes de recalcular si las flechas siguen
+     * haciendo falta. El desplazamiento es suave y la última medida hay que
+     * tomarla cuando se ha detenido, no mientras avanza.
+     */
+    scrollDebounceWait?: number;
+    /** Lleva la pestaña activa a la vista al montar. */
+    scrollIntoView?: boolean;
+    ui?: ComponentUi<'tabs'>;
+};

package/dist/runtime/app/components/TabList/TabList.vue

@@ -0,0 +1,166 @@
+<script setup>
+import { computed, inject, nextTick, onMounted, onScopeDispose, provide, ref, useTemplateRef, watch } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { tabsKey } from "#vuno/components/Tabs/Tabs.context";
+import { tabListKey } from "./TabList.context";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "TabList" });
+const props = defineProps({
+  activation: { type: String, required: false, default: "automatic" },
+  ariaLabel: { type: String, required: false, default: "Pesta\xF1as" },
+  fullWidth: { type: Boolean, required: false, default: false },
+  nextAriaLabel: { type: String, required: false, default: "Desplazar hacia delante" },
+  previousAriaLabel: { type: String, required: false, default: "Desplazar hacia atr\xE1s" },
+  scrollDebounceWait: { type: Number, required: false, default: 200 },
+  scrollIntoView: { type: Boolean, required: false, default: false },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const injected = inject(tabsKey);
+if (!injected) throw new Error("[TabList] debe usarse dentro de Tabs.");
+const context = injected;
+const canScrollBack = ref(false);
+const canScrollForward = ref(false);
+const list = useTemplateRef("list");
+let settle;
+let observer;
+const ui = useTheme(
+  "tabs",
+  () => props.ui,
+  () => ({ dismissable: String(context.dismissable.value), fullWidth: String(props.fullWidth), size: context.size.value, variant: context.variant.value, vertical: String(context.vertical.value) })
+);
+provide(tabListKey, { fullWidth: computed(() => props.fullWidth) });
+function allTabs() {
+  return [...list.value?.querySelectorAll('[role="tab"]') ?? []];
+}
+function measure() {
+  const node = list.value;
+  if (!node) return;
+  if (context.vertical.value) {
+    canScrollBack.value = node.scrollTop > 0;
+    canScrollForward.value = node.scrollTop + node.clientHeight + 1 < node.scrollHeight;
+    return;
+  }
+  const overflows = node.scrollWidth > node.clientWidth + 1;
+  const scrolled = Math.abs(node.scrollLeft);
+  canScrollBack.value = overflows && scrolled > 0;
+  canScrollForward.value = overflows && scrolled + node.clientWidth + 1 < node.scrollWidth;
+}
+function onScroll() {
+  measure();
+  if (settle) clearTimeout(settle);
+  settle = setTimeout(measure, props.scrollDebounceWait);
+}
+function isRtl() {
+  const node = list.value;
+  return Boolean(node) && getComputedStyle(node).direction === "rtl";
+}
+function scrollStep(direction) {
+  const node = list.value;
+  if (!node) return;
+  const step = node.scrollWidth / Math.max(allTabs().length, 1) * 1.5;
+  node.scrollBy({ behavior: "smooth", left: step * direction * (isRtl() ? -1 : 1) });
+}
+function reveal(tab) {
+  if (!tab || !(canScrollBack.value || canScrollForward.value)) return;
+  tab.scrollIntoView({ block: "nearest", inline: "nearest" });
+}
+function onKeydown(event) {
+  const forward = context.vertical.value ? "ArrowDown" : "ArrowRight";
+  const backward = context.vertical.value ? "ArrowUp" : "ArrowLeft";
+  if (![backward, forward, "End", "Home"].includes(event.key)) return;
+  const tabs = allTabs();
+  const enabled = tabs.filter((tab) => !tab.disabled);
+  if (enabled.length === 0) return;
+  const focused = enabled.indexOf(document.activeElement);
+  const current = focused === -1 ? enabled.indexOf(tabs[context.selectedIndex.value]) : focused;
+  const step = event.key === forward ? 1 : -1;
+  const target = event.key === "Home" ? enabled[0] : event.key === "End" ? enabled.at(-1) : enabled[(current + step + enabled.length) % enabled.length];
+  if (!target) return;
+  event.preventDefault();
+  target.focus();
+  reveal(target);
+  if (props.activation === "automatic") target.click();
+}
+watch(
+  () => context.selectedIndex.value,
+  async () => {
+    await nextTick();
+    reveal(allTabs()[context.selectedIndex.value]);
+  }
+);
+onMounted(() => {
+  measure();
+  const node = list.value;
+  if (!node) return;
+  if (props.scrollIntoView) allTabs()[context.selectedIndex.value]?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  const tabs = allTabs();
+  if (tabs[context.selectedIndex.value]?.disabled) {
+    const first = tabs.findIndex((tab) => !tab.disabled);
+    if (first !== -1) context.select(first);
+  }
+  if (typeof ResizeObserver === "undefined") return;
+  observer = new ResizeObserver(measure);
+  observer.observe(node);
+});
+onScopeDispose(() => {
+  if (settle) clearTimeout(settle);
+  observer?.disconnect();
+  observer = void 0;
+});
+</script>
+
+<template>
+    <div :class="ui.list">
+        <button
+            v-if="!context.vertical.value"
+            v-show="canScrollBack"
+            aria-hidden="true"
+            :aria-label="props.previousAriaLabel"
+            :class="ui.overflow"
+            data-direction="previous"
+            tabindex="-1"
+            type="button"
+            @click="scrollStep(-1)"
+        >
+            <Icon
+                class="size-4"
+                name="carbon:chevron-left"
+            />
+        </button>
+        <div
+            v-if="context.vertical.value && canScrollBack"
+            :class="ui.gradientTop"
+        />
+        <div
+            ref="list"
+            :aria-label="props.ariaLabel"
+            :aria-orientation="context.vertical.value ? 'vertical' : 'horizontal'"
+            :class="ui.tablist"
+            role="tablist"
+            @keydown="onKeydown"
+            @scroll="onScroll"
+        >
+            <slot />
+        </div>
+        <div
+            v-if="context.vertical.value && canScrollForward"
+            :class="ui.gradientBottom"
+        />
+        <button
+            v-if="!context.vertical.value"
+            v-show="canScrollForward"
+            aria-hidden="true"
+            :aria-label="props.nextAriaLabel"
+            :class="ui.overflow"
+            data-direction="next"
+            tabindex="-1"
+            type="button"
+            @click="scrollStep(1)"
+        >
+            <Icon
+                class="size-4"
+                name="carbon:chevron-right"
+            />
+        </button>
+    </div>
+</template>

package/dist/runtime/app/components/TabList/TabList.vue.d.ts

@@ -0,0 +1,23 @@
+import type { TabListProps } from './TabList.types.js';
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TabListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TabListProps> & Readonly<{}>, {
+    fullWidth: boolean;
+    ui: import("../../types/slots.js").ComponentUi<"tabs">;
+    ariaLabel: string;
+    activation: import("./TabList.types.js").TabListActivation;
+    nextAriaLabel: string;
+    previousAriaLabel: string;
+    scrollDebounceWait: number;
+    scrollIntoView: 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/runtime/app/components/TabPanel/TabPanel.d.vue.ts

@@ -0,0 +1,16 @@
+import type { TabPanelProps } from './TabPanel.types.js';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TabPanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TabPanelProps> & Readonly<{}>, {
+    ui: import("../../types/slots.js").ComponentUi<"tabs">;
+}, {}, {}, {}, 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/runtime/app/components/TabPanel/TabPanel.types.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentUi } from '#vuno/types/slots';
+export type TabPanelProps = {
+    ui?: ComponentUi<'tabs'>;
+};

package/dist/runtime/app/components/TabPanel/TabPanel.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { computed, inject, useTemplateRef } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { tabsKey } from "#vuno/components/Tabs/Tabs.context";
+defineOptions({ name: "TabPanel" });
+const props = defineProps({
+  ui: { type: Object, required: false, default: void 0 }
+});
+const context = inject(tabsKey);
+if (!context) throw new Error("[TabPanel] debe usarse dentro de Tabs.");
+const element = useTemplateRef("element");
+const index = context.registerPanel(() => element.value);
+const selected = computed(() => context.selectedIndex.value === index.value);
+const ui = useTheme(
+  "tabs",
+  () => props.ui,
+  () => ({ size: context.size.value, variant: context.variant.value, vertical: String(context.vertical.value) })
+);
+</script>
+
+<template>
+    <div
+        :id="context.panelId(index)"
+        ref="element"
+        :aria-labelledby="context.tabId(index)"
+        :class="ui.panel"
+        :hidden="!selected"
+        role="tabpanel"
+        tabindex="0"
+    >
+        <slot />
+    </div>
+</template>

package/dist/runtime/app/components/TabPanel/TabPanel.vue.d.ts

@@ -0,0 +1,16 @@
+import type { TabPanelProps } from './TabPanel.types.js';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TabPanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TabPanelProps> & Readonly<{}>, {
+    ui: import("../../types/slots.js").ComponentUi<"tabs">;
+}, {}, {}, {}, 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/runtime/app/components/TabPanels/TabPanels.d.vue.ts

@@ -0,0 +1,16 @@
+import type { TabPanelsProps } from './TabPanels.types.js';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TabPanelsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TabPanelsProps> & Readonly<{}>, {
+    ui: import("../../types/slots.js").ComponentUi<"tabs">;
+}, {}, {}, {}, 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/runtime/app/components/TabPanels/TabPanels.types.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentUi } from '#vuno/types/slots';
+export type TabPanelsProps = {
+    ui?: ComponentUi<'tabs'>;
+};

package/dist/runtime/app/components/TabPanels/TabPanels.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { inject } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { tabsKey } from "#vuno/components/Tabs/Tabs.context";
+defineOptions({ name: "TabPanels" });
+const props = defineProps({
+  ui: { type: Object, required: false, default: void 0 }
+});
+const context = inject(tabsKey);
+if (!context) throw new Error("[TabPanels] debe usarse dentro de Tabs.");
+const ui = useTheme(
+  "tabs",
+  () => props.ui,
+  () => ({ size: context.size.value, variant: context.variant.value, vertical: String(context.vertical.value) })
+);
+</script>
+
+<template>
+    <div :class="ui.panels">
+        <slot />
+    </div>
+</template>

package/dist/runtime/app/components/TabPanels/TabPanels.vue.d.ts

@@ -0,0 +1,16 @@
+import type { TabPanelsProps } from './TabPanels.types.js';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TabPanelsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TabPanelsProps> & Readonly<{}>, {
+    ui: import("../../types/slots.js").ComponentUi<"tabs">;
+}, {}, {}, {}, 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/runtime/app/components/Table/Table.d.vue.ts

@@ -1,33 +1,20 @@
-import type { VunoTableSort } from '#vuno/types/table';
-import type { VunoTableProps } from './Table.types.js';
-declare const __VLS_export: <TRow extends import("#vuno/types/table").VunoTableRow>(__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<(VunoTableProps<TRow> & {
-        selection?: (number | string)[];
-        sort?: null | VunoTableSort;
-    }) & {
-        onRowClick?: ((row: TRow) => any) | undefined;
-        "onUpdate:selection"?: ((value: (string | number)[]) => any) | undefined;
-        "onUpdate:sort"?: ((value: VunoTableSort | null) => any) | undefined;
-    }> & (typeof globalThis extends {
-        __VLS_PROPS_FALLBACK: infer P;
-    } ? P : {});
-    expose: (exposed: {}) => void;
-    attrs: any;
-    slots: {
-        [key: `cell-${string}`]: (props: {
-            row: TRow;
-            value: unknown;
-        }) => unknown;
-        empty?: () => unknown;
-    };
-    emit: ((evt: "rowClick", row: TRow) => void) & (((event: "update:selection", value: (string | number)[]) => void) & ((event: "update:sort", value: VunoTableSort | null) => void));
-}>) => import("vue").VNode & {
-    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+import type { TableProps } from '#vuno/components/DataTable/DataTable.types';
+type __VLS_Slots = {
+    default?: () => unknown;
 };
+declare const __VLS_base: import("vue").DefineComponent<TableProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TableProps> & Readonly<{}>, {
+    size: import("#vuno/components/DataTable/DataTable.types").DataTableLegacySize | import("#vuno/components/DataTable/DataTable.types").DataTableSize;
+    ui: import("#vuno/components/DataTable/DataTable.types").DataTableUi;
+    isSortable: boolean;
+    stickyHeader: boolean;
+    useStaticWidth: boolean;
+    useZebraStyles: 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_PrettifyLocal<T> = (T extends any ? {
-    [K in keyof T]: T[K];
-} : {
-    [K in keyof T as K]: T[K];
-}) & {};
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};