@groupteknology/vuno 2.0.0 → 4.0.0

package/dist/runtime/app/components/ComboBox/useComboBoxState.js

@@ -0,0 +1,205 @@
+import { computed, nextTick, ref } from "vue";
+import { fromOptionKey, toOptionKey } from "#vuno/components/Dropdown/option";
+export function useComboBoxState(options) {
+  const open = ref(false);
+  const highlighted = ref(-1);
+  const query = ref("");
+  const typing = ref(false);
+  const suggestion = ref("");
+  const selectedKey = computed(() => options.model.value === void 0 ? void 0 : toOptionKey(options.model.value));
+  const selectedLabel = computed(() => {
+    const key = selectedKey.value;
+    if (key === void 0) return "";
+    return options.items().find((item) => toOptionKey(item.value) === key)?.label ?? fromOptionKey(key);
+  });
+  const text = computed(() => typing.value ? query.value : selectedLabel.value);
+  const visibleItems = computed(() => {
+    const needle = typing.value ? query.value.trim() : "";
+    if (needle === "") return options.items();
+    if (options.typeahead()) return options.items().filter((item) => normalize(item.label).startsWith(normalize(needle)));
+    const filter = options.filter() ?? defaultFilter;
+    return options.items().filter((item) => filter(item, needle));
+  });
+  const selectableIndexes = computed(() => visibleItems.value.map((item, index) => item.disabled ? -1 : index).filter((index) => index >= 0));
+  const activeKey = computed(() => {
+    const item = visibleItems.value[highlighted.value];
+    return item ? toOptionKey(item.value) : void 0;
+  });
+  const clearable = computed(() => text.value !== "");
+  const isSelected = (item) => selectedKey.value !== void 0 && toOptionKey(item.value) === selectedKey.value;
+  function scrollHighlightIntoView() {
+    void nextTick(() => {
+      const key = activeKey.value;
+      if (!key) return;
+      options.list()?.querySelector(`#${CSS.escape(options.optionId(key))}`)?.scrollIntoView({ block: "nearest" });
+    });
+  }
+  function moveHighlight(step) {
+    const candidates = selectableIndexes.value;
+    if (candidates.length === 0) return;
+    const current = candidates.indexOf(highlighted.value);
+    const entry = step === 1 ? 0 : candidates.length - 1;
+    const next = current === -1 ? entry : (current + step + candidates.length) % candidates.length;
+    highlighted.value = candidates[next] ?? -1;
+    scrollHighlightIntoView();
+  }
+  function highlightEdge(edge) {
+    const candidates = selectableIndexes.value;
+    highlighted.value = (edge === "first" ? candidates[0] : candidates[candidates.length - 1]) ?? -1;
+    scrollHighlightIntoView();
+  }
+  function revert() {
+    typing.value = false;
+    query.value = "";
+    suggestion.value = "";
+    highlighted.value = -1;
+  }
+  function close(refocus = false) {
+    if (!open.value) return;
+    open.value = false;
+    highlighted.value = -1;
+    if (refocus) options.input()?.focus();
+  }
+  function openList(edge) {
+    if (options.disabled() || options.readonly() || open.value) return;
+    open.value = true;
+    if (edge) highlightEdge(edge);
+    else highlighted.value = visibleItems.value.findIndex(isSelected);
+    void nextTick(scrollHighlightIntoView);
+  }
+  function choose(item) {
+    if (item.disabled) return;
+    options.model.value = item.value;
+    revert();
+    close();
+  }
+  function clear() {
+    options.model.value = void 0;
+    revert();
+    options.onQuery("");
+    options.input()?.focus();
+  }
+  function toggle() {
+    if (options.disabled() || options.readonly()) return;
+    if (open.value) close(true);
+    else {
+      options.input()?.focus();
+      openList();
+    }
+  }
+  function commit() {
+    if (!typing.value) return;
+    const typed = query.value.trim();
+    if (typed === "") {
+      options.model.value = void 0;
+      revert();
+      return;
+    }
+    const match = options.items().find((item) => !item.disabled && normalize(item.label) === normalize(typed));
+    if (match) options.model.value = match.value;
+    else if (options.allowCustomValue()) options.model.value = typed;
+    revert();
+  }
+  function suggest(deleting) {
+    suggestion.value = "";
+    if (!options.typeahead() || deleting || query.value === "") return;
+    const match = visibleItems.value.find((item) => !item.disabled);
+    if (!match || match.label.length <= query.value.length) return;
+    suggestion.value = match.label;
+    void nextTick(() => {
+      const element = options.input();
+      if (!element || suggestion.value !== match.label) return;
+      element.value = match.label;
+      element.setSelectionRange(query.value.length, match.label.length);
+    });
+  }
+  function acceptSuggestion() {
+    const proposed = suggestion.value;
+    if (!proposed) return false;
+    const match = options.items().find((item) => item.label === proposed);
+    if (!match) return false;
+    choose(match);
+    return true;
+  }
+  function onInput(event) {
+    const element = event.target;
+    typing.value = true;
+    query.value = element.value;
+    options.onQuery(element.value);
+    if (!open.value) openList();
+    highlighted.value = selectableIndexes.value[0] ?? -1;
+    suggest(event.inputType?.startsWith("delete") ?? false);
+  }
+  function onAltKey(event) {
+    if (!event.altKey) return false;
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      openList();
+      return true;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      close();
+      return true;
+    }
+    return false;
+  }
+  function onNavigationKey(event) {
+    if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return false;
+    event.preventDefault();
+    if (open.value) moveHighlight(event.key === "ArrowDown" ? 1 : -1);
+    else openList(event.key === "ArrowDown" ? "first" : "last");
+    return true;
+  }
+  function onEnterKey(event) {
+    event.preventDefault();
+    const item = open.value ? visibleItems.value[highlighted.value] : void 0;
+    if (item) {
+      choose(item);
+      return;
+    }
+    if (!open.value && !typing.value) {
+      openList();
+      return;
+    }
+    commit();
+    close();
+  }
+  function onKeydown(event) {
+    if (options.disabled()) return;
+    if (options.readonly()) {
+      if (event.key !== "Tab") event.preventDefault();
+      return;
+    }
+    if (onAltKey(event)) return;
+    if (onNavigationKey(event)) return;
+    if (event.key === "Enter") {
+      onEnterKey(event);
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      if (open.value) close(true);
+      else revert();
+      return;
+    }
+    if (event.key === "Tab") {
+      if (acceptSuggestion()) return;
+      commit();
+      close();
+    }
+  }
+  function onFocusout(event, root) {
+    const next = event.relatedTarget;
+    if (next && (root?.contains(next) || options.list()?.contains(next))) return;
+    commit();
+    close();
+  }
+  return { onFocusout, onInput, onKeydown, activeKey, choose, clear, clearable, close, highlighted, isSelected, open, text, toggle, visibleItems };
+}
+function normalize(value) {
+  return value.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
+}
+function defaultFilter(item, query) {
+  return normalize(item.label).includes(normalize(query));
+}

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

@@ -0,0 +1,31 @@
+import type { ComboButtonProps } from './ComboButton.types.js';
+type __VLS_Props = ComboButtonProps;
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    click: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    disabled: boolean;
+    size: import("../MenuButton/MenuButton.types.js").MenuButtonSize;
+    ui: import("../../types/slots.js").ComponentUi<"menu">;
+    iconDescription: string;
+    portal: import("#vuno/types/base").PortalTarget;
+    menuAlignment: import("../MenuButton/MenuButton.types.js").MenuAlignment;
+}, {}, {}, {}, 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/ComboButton/ComboButton.types.d.ts

@@ -0,0 +1,22 @@
+import type { PortalTarget } from '#vuno/types/base';
+import type { ComponentUi } from '#vuno/types/slots';
+import type { MenuAlignment, MenuButtonSize } from '#vuno/components/MenuButton/MenuButton.types';
+export type ComboButtonProps = {
+    disabled?: boolean;
+    /**
+     * Nombre accesible del disparador del menú.
+     *
+     * Es el nombre que el sistema de origen resuelve con
+     * `translateWithId('combo-button.additional-actions')`: el caret no tiene
+     * texto visible y sin nombre no se puede anunciar ni distinguir de la
+     * acción principal. También nombra el panel.
+     */
+    iconDescription?: string;
+    /** La acción por defecto, la más probable. Es la única visible. */
+    label: string;
+    menuAlignment?: MenuAlignment;
+    portal?: PortalTarget;
+    /** El tamaño manda a la vez sobre los dos botones y sobre las filas del menú. */
+    size?: MenuButtonSize;
+    ui?: ComponentUi<'menu'>;
+};

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

@@ -0,0 +1,78 @@
+<script setup>
+import { computed, ref } from "vue";
+import Button from "#vuno/components/Button/Button.vue";
+import Menu from "#vuno/components/Menu/Menu.vue";
+import { useMenuWidth } from "#vuno/components/MenuButton/useMenuWidth";
+defineOptions({ name: "ComboButton" });
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const props = defineProps({
+  disabled: { type: Boolean, required: false, default: false },
+  iconDescription: { type: String, required: false, default: "M\xE1s acciones" },
+  label: { type: String, required: true },
+  menuAlignment: { type: String, required: false, default: "bottom" },
+  portal: { type: [String, Boolean], required: false, default: void 0 },
+  size: { type: String, required: false, default: "lg" },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const emit = defineEmits(["click"]);
+defineSlots();
+const root = ref(null);
+const centered = computed(() => props.menuAlignment === "bottom" || props.menuAlignment === "top");
+useMenuWidth({
+  enabled: () => centered.value,
+  measure: () => root.value,
+  open: () => open.value,
+  trigger: () => root.value?.querySelector('[aria-haspopup="menu"]') ?? null
+});
+const placement = computed(() => props.menuAlignment === "bottom" ? "bottom-end" : props.menuAlignment === "top" ? "top-end" : props.menuAlignment);
+const primaryWidth = { xs: "", sm: "min-w-[127px]", md: "min-w-[119px]", lg: "min-w-[111px]" };
+const primaryUi = {
+  /* Vuno: la acción principal ocupa su hueco y se recorta entre 111 y 239 px. */
+  base: "w-full max-w-[239px] min-w-[111px]",
+  /** La etiqueta larga se recorta con puntos suspensivos; el `title` la completa. */
+  label: "block overflow-hidden text-ellipsis whitespace-nowrap"
+};
+const triggerUi = computed(() => ({
+  icon: ["transition-transform duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) motion-reduce:transition-none", open.value ? "rotate-180" : ""]
+}));
+</script>
+
+<template>
+    <!-- La costura de 1 px deja ver el fondo entre los dos controles: son dos, no uno. -->
+    <div
+        ref="root"
+        class="inline-flex gap-px"
+    >
+        <div :class="primaryWidth[props.size]">
+            <Button
+                :disabled="props.disabled"
+                :label="props.label"
+                :size="props.size"
+                :title="props.label"
+                :ui="primaryUi"
+                @click="emit('click', $event)"
+            />
+        </div>
+
+        <Menu
+            v-model:open="open"
+            :placement="placement"
+            :portal="props.portal"
+            :size="props.size"
+            :ui="props.ui"
+        >
+            <template #trigger>
+                <Button
+                    :disabled="props.disabled"
+                    icon="carbon:chevron-down"
+                    :iconDescription="props.iconDescription"
+                    kind="primary"
+                    :size="props.size"
+                    :ui="triggerUi"
+                />
+            </template>
+
+            <slot />
+        </Menu>
+    </div>
+</template>

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

@@ -0,0 +1,31 @@
+import type { ComboButtonProps } from './ComboButton.types.js';
+type __VLS_Props = ComboButtonProps;
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    click: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    disabled: boolean;
+    size: import("../MenuButton/MenuButton.types.js").MenuButtonSize;
+    ui: import("../../types/slots.js").ComponentUi<"menu">;
+    iconDescription: string;
+    portal: import("#vuno/types/base").PortalTarget;
+    menuAlignment: import("../MenuButton/MenuButton.types.js").MenuAlignment;
+}, {}, {}, {}, 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/ContainedList/ContainedList.context.d.ts

@@ -0,0 +1,14 @@
+import type { InjectionKey, Ref } from 'vue';
+import type { ContainedListKind, ContainedListSize } from './ContainedList.types.js';
+/**
+ * Lo que la lista decide y cada fila necesita para pintarse. En Vuno estas
+ * tres decisiones viven en clases del contenedor y bajan por selectores de
+ * descendencia; aquí cada `ContainedListItem` resuelve su propio tema, así que
+ * las recibe.
+ */
+export type ContainedListContext = {
+    inset: Ref<boolean>;
+    kind: Ref<ContainedListKind>;
+    size: Ref<ContainedListSize>;
+};
+export declare const containedListKey: InjectionKey<ContainedListContext>;

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

@@ -0,0 +1 @@
+export const containedListKey = Symbol("contained-list");

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

@@ -0,0 +1,21 @@
+import type { ContainedListProps } from './ContainedList.types.js';
+type __VLS_Slots = {
+    action?: () => unknown;
+    default?: () => unknown;
+    label?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<ContainedListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContainedListProps> & Readonly<{}>, {
+    size: import("./ContainedList.types.js").ContainedListSize;
+    kind: import("./ContainedList.types.js").ContainedListKind;
+    label: string;
+    ui: import("../../types/slots.js").ComponentUi<"containedList">;
+    isInset: 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/ContainedList/ContainedList.theme.d.ts

@@ -0,0 +1,104 @@
+export declare const containedListTheme: Record<"containedList", {
+    readonly compoundVariants: [{
+        readonly class: {
+            readonly header: "h-8";
+        };
+        readonly kind: "on-page";
+        readonly size: "sm";
+    }, {
+        readonly class: {
+            readonly header: "h-10";
+        };
+        readonly kind: "on-page";
+        readonly size: "md";
+    }, {
+        readonly class: {
+            readonly header: "h-12";
+        };
+        readonly kind: "on-page";
+        readonly size: "lg";
+    }, {
+        readonly class: {
+            readonly header: "h-16";
+        };
+        readonly kind: "on-page";
+        readonly size: "xl";
+    }, {
+        readonly class: {
+            readonly content: "hover:bg-(--vuno-layer-hover-01) active:bg-(--vuno-layer-active-01)";
+        };
+        readonly clickable: "true";
+        readonly disabled: "false";
+    }, {
+        readonly class: {
+            readonly content: "cursor-not-allowed text-(--vuno-text-disabled)";
+        };
+        readonly clickable: "true";
+        readonly disabled: "true";
+    }];
+    readonly slots: {
+        readonly action: "pointer-events-none absolute inset-x-0 top-0 flex justify-end [&>*]:pointer-events-auto";
+        readonly content: "box-border block w-full px-4 text-sm leading-5 font-normal tracking-[0.16px] text-(--vuno-text-primary)";
+        readonly header: "sticky top-0 z-1 box-border flex items-center px-4";
+        readonly icon: "mt-0.5 size-4 shrink-0";
+        readonly item: "relative m-0 list-item list-none before:absolute before:bottom-0 before:h-px before:bg-(--vuno-border-subtle-00) before:content-[''] last-of-type:before:hidden forced-colors:before:pointer-events-none forced-colors:before:z-1 forced-colors:before:bg-[CanvasText] [&:not(:first-of-type)]:-mt-px";
+        readonly label: "w-full";
+        readonly list: "m-0 list-none p-0";
+        readonly root: "w-full";
+        readonly text: "min-w-0";
+    };
+    readonly variants: {
+        readonly clickable: {
+            readonly false: {};
+            readonly true: {
+                readonly content: "m-0 cursor-pointer appearance-none border-0 bg-transparent text-start font-sans no-underline transition-colors duration-(--vuno-duration-moderate-01) ease-(--vuno-easing-standard-productive) focus:outline-none focus:after:absolute focus:after:inset-0 focus:after:outline-solid focus:after:outline-2 focus:after:-outline-offset-2 focus:after:outline-(--vuno-focus) focus:after:content-[''] motion-reduce:transition-none";
+            };
+        };
+        readonly disabled: {
+            readonly false: {};
+            readonly true: {};
+        };
+        readonly inset: {
+            readonly false: {
+                readonly item: "before:inset-x-0";
+            };
+            readonly true: {
+                readonly item: "before:inset-x-4";
+            };
+        };
+        readonly kind: {
+            readonly disclosed: {
+                readonly header: "h-8 bg-(--vuno-layer-01) text-xs leading-4 font-normal tracking-[0.32px] text-(--vuno-text-secondary)";
+            };
+            readonly 'on-page': {
+                readonly header: "border-b border-(--vuno-border-subtle-00) bg-(--vuno-layer-background-01) text-sm leading-[1.125rem] font-semibold tracking-[0.16px] text-(--vuno-text-primary)";
+            };
+        };
+        readonly size: {
+            readonly sm: {
+                readonly content: "min-h-8 py-1.5";
+            };
+            readonly md: {
+                readonly content: "min-h-10 py-2.5";
+            };
+            readonly lg: {
+                readonly content: "min-h-12 py-3.5";
+            };
+            readonly xl: {
+                readonly content: "min-h-16 py-5.5";
+            };
+        };
+        readonly withAction: {
+            readonly false: {};
+            readonly true: {
+                readonly content: "pe-16";
+            };
+        };
+        readonly withIcon: {
+            readonly false: {};
+            readonly true: {
+                readonly content: "grid grid-cols-[1rem_1fr] gap-x-3";
+            };
+        };
+    };
+}>;

package/dist/runtime/app/components/ContainedList/ContainedList.theme.js

@@ -0,0 +1,48 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const containedListTheme = defineTheme("containedList", {
+  compoundVariants: [
+    /* Solo `on-page` iguala la altura de la cabecera a la de sus filas; `disclosed` mide siempre 32 px. */
+    { class: { header: "h-8" }, kind: "on-page", size: "sm" },
+    { class: { header: "h-10" }, kind: "on-page", size: "md" },
+    { class: { header: "h-12" }, kind: "on-page", size: "lg" },
+    { class: { header: "h-16" }, kind: "on-page", size: "xl" },
+    /* Vuno solo tiñe de estado la fila que de verdad se puede activar. */
+    { class: { content: "hover:bg-(--vuno-layer-hover-01) active:bg-(--vuno-layer-active-01)" }, clickable: "true", disabled: "false" },
+    { class: { content: "cursor-not-allowed text-(--vuno-text-disabled)" }, clickable: "true", disabled: "true" }
+  ],
+  slots: {
+    action: "pointer-events-none absolute inset-x-0 top-0 flex justify-end [&>*]:pointer-events-auto",
+    content: "box-border block w-full px-4 text-sm leading-5 font-normal tracking-[0.16px] text-(--vuno-text-primary)",
+    header: "sticky top-0 z-1 box-border flex items-center px-4",
+    icon: "mt-0.5 size-4 shrink-0",
+    item: "relative m-0 list-item list-none before:absolute before:bottom-0 before:h-px before:bg-(--vuno-border-subtle-00) before:content-[''] last-of-type:before:hidden forced-colors:before:pointer-events-none forced-colors:before:z-1 forced-colors:before:bg-[CanvasText] [&:not(:first-of-type)]:-mt-px",
+    label: "w-full",
+    list: "m-0 list-none p-0",
+    root: "w-full",
+    text: "min-w-0"
+  },
+  variants: {
+    clickable: {
+      false: {},
+      true: { content: "m-0 cursor-pointer appearance-none border-0 bg-transparent text-start font-sans no-underline transition-colors duration-(--vuno-duration-moderate-01) ease-(--vuno-easing-standard-productive) focus:outline-none focus:after:absolute focus:after:inset-0 focus:after:outline-solid focus:after:outline-2 focus:after:-outline-offset-2 focus:after:outline-(--vuno-focus) focus:after:content-[''] motion-reduce:transition-none" }
+    },
+    disabled: { false: {}, true: {} },
+    inset: {
+      false: { item: "before:inset-x-0" },
+      true: { item: "before:inset-x-4" }
+    },
+    kind: {
+      disclosed: { header: "h-8 bg-(--vuno-layer-01) text-xs leading-4 font-normal tracking-[0.32px] text-(--vuno-text-secondary)" },
+      "on-page": { header: "border-b border-(--vuno-border-subtle-00) bg-(--vuno-layer-background-01) text-sm leading-[1.125rem] font-semibold tracking-[0.16px] text-(--vuno-text-primary)" }
+    },
+    size: {
+      sm: { content: "min-h-8 py-1.5" },
+      md: { content: "min-h-10 py-2.5" },
+      lg: { content: "min-h-12 py-3.5" },
+      xl: { content: "min-h-16 py-5.5" }
+    },
+    /* La acción flota sobre el final de la fila: el texto se aparta 64 px para no pasar por debajo. */
+    withAction: { false: {}, true: { content: "pe-16" } },
+    withIcon: { false: {}, true: { content: "grid grid-cols-[1rem_1fr] gap-x-3" } }
+  }
+});

package/dist/runtime/app/components/ContainedList/ContainedList.types.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentUi } from '#vuno/types/slots';
+export type ContainedListKind = 'disclosed' | 'on-page';
+export type ContainedListSize = 'lg' | 'md' | 'sm' | 'xl';
+export type ContainedListProps = {
+    /**
+     * Sangra las líneas divisorias 16 px por cada lado en lugar de trazarlas de
+     * borde a borde. Vuno lo reserva para listas que conviven con otros
+     * componentes con divisorias, donde las líneas completas chocan entre sí.
+     */
+    isInset?: boolean;
+    /**
+     * `on-page` para una lista permanente de la página —tarjeta, barra
+     * lateral—; `disclosed` para una lista dentro de un contexto temporal
+     * —popover, capa— que ya aporta su propio borde o sombra.
+     */
+    kind?: ContainedListKind;
+    /** Nombre del grupo de filas; el slot `label` lo sustituye por contenido. */
+    label?: string;
+    /**
+     * Altura de fila: 32, 40, 48 o 64 px. En `on-page` la cabecera adopta la
+     * misma altura; en `disclosed` siempre mide 32 px.
+     */
+    size?: ContainedListSize;
+    ui?: ComponentUi<'containedList'>;
+};

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

@@ -0,0 +1,55 @@
+<script setup>
+import { computed, provide, toRef, useId } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { filled } from "#vuno/utils/slots";
+import { containedListKey } from "./ContainedList.context";
+defineOptions({ name: "ContainedList" });
+const props = defineProps({
+  isInset: { type: Boolean, required: false, default: false },
+  kind: { type: String, required: false, default: "on-page" },
+  label: { type: String, required: false, default: void 0 },
+  size: { type: String, required: false, default: "lg" },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const slots = defineSlots();
+const labelId = useId();
+const hasLabel = computed(() => Boolean(props.label) || filled(slots.label));
+const hasAction = computed(() => filled(slots.action));
+const hasItems = computed(() => filled(slots.default));
+provide(containedListKey, { inset: toRef(props, "isInset"), kind: toRef(props, "kind"), size: toRef(props, "size") });
+const ui = useTheme(
+  "containedList",
+  () => props.ui,
+  () => ({ inset: String(props.isInset), kind: props.kind, size: props.size })
+);
+</script>
+
+<template>
+    <div :class="ui.root">
+        <div
+            v-if="hasLabel"
+            :class="ui.header"
+        >
+            <div
+                :id="labelId"
+                :class="ui.label"
+            >
+                <slot name="label">{{ props.label }}</slot>
+            </div>
+            <div
+                v-if="hasAction"
+                :class="ui.action"
+            >
+                <slot name="action" />
+            </div>
+        </div>
+        <ul
+            v-if="hasItems"
+            :aria-labelledby="hasLabel ? labelId : void 0"
+            :class="ui.list"
+            role="list"
+        >
+            <slot />
+        </ul>
+    </div>
+</template>

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

@@ -0,0 +1,21 @@
+import type { ContainedListProps } from './ContainedList.types.js';
+type __VLS_Slots = {
+    action?: () => unknown;
+    default?: () => unknown;
+    label?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<ContainedListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContainedListProps> & Readonly<{}>, {
+    size: import("./ContainedList.types.js").ContainedListSize;
+    kind: import("./ContainedList.types.js").ContainedListKind;
+    label: string;
+    ui: import("../../types/slots.js").ComponentUi<"containedList">;
+    isInset: 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;
+    };
+};