@groupteknology/vuno 2.0.0 → 4.0.0

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

@@ -0,0 +1,200 @@
+<script setup>
+import { computed, nextTick, ref, useId, useTemplateRef } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import FormLabel from "#vuno/components/FormLabel/FormLabel.vue";
+import TreeViewNode from "./internal/TreeViewNode/TreeViewNode.vue";
+defineOptions({ name: "TreeView", inheritAttrs: false });
+const active = defineModel("active", { type: null, ...{ default: void 0 } });
+const selected = defineModel("selected", { type: Array, ...{ default: () => [] } });
+const expanded = defineModel("expanded", { type: Array, ...{ default: () => [] } });
+const props = defineProps({
+  id: { type: String, required: false, default: void 0 },
+  hideLabel: { type: Boolean, required: false, default: false },
+  items: { type: Array, required: true },
+  label: { type: String, required: true },
+  multiselect: { type: Boolean, required: false, default: false },
+  size: { type: String, required: false, default: "sm" },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const emit = defineEmits(["select", "toggle"]);
+const ui = useTheme(
+  "treeView",
+  () => props.ui,
+  () => ({ size: props.size })
+);
+const tree = useTemplateRef("tree");
+const uid = useId();
+const focusedKey = ref();
+const treeId = computed(() => props.id ?? uid);
+const labelId = computed(() => `${treeId.value}__label`);
+const keyOf = (value) => `${typeof value}:${String(value)}`;
+const keysOf = (values) => new Set(values.map(keyOf));
+const expandedKeys = computed(() => keysOf(expanded.value));
+const selectedKeys = computed(() => keysOf(selected.value));
+const activeKey = computed(() => active.value === void 0 ? void 0 : keyOf(active.value));
+const layout = computed(() => {
+  const byKey = /* @__PURE__ */ new Map();
+  let index = 0;
+  const build = (items, depth, parent) => items.map((item) => {
+    const key = keyOf(item.value);
+    const id = `${treeId.value}-node-${index++}`;
+    const node = {
+      id,
+      children: [],
+      depth,
+      disabled: Boolean(item.disabled),
+      expanded: Boolean(item.children?.length) && expandedKeys.value.has(key),
+      item,
+      key,
+      labelId: `${id}__label`,
+      parentKey: parent?.key,
+      subtreeId: `${id}-subtree`
+    };
+    byKey.set(key, node);
+    node.children = build(item.children ?? [], depth + 1, node);
+    return node;
+  });
+  return { byKey, roots: build(props.items, 0) };
+});
+const reachable = computed(() => {
+  const result = [];
+  const walk = (nodes) => {
+    for (const node of nodes) {
+      if (node.disabled) continue;
+      result.push(node);
+      if (node.expanded) walk(node.children);
+    }
+  };
+  walk(layout.value.roots);
+  return result;
+});
+const focusKey = computed(() => {
+  const current = focusedKey.value;
+  if (current && reachable.value.some((node) => node.key === current)) return current;
+  return reachable.value[0]?.key;
+});
+function focusNode(node) {
+  if (!node) return;
+  focusedKey.value = node.key;
+  void nextTick(() => tree.value?.querySelector(`[data-tree-key="${CSS.escape(node.key)}"]`)?.focus());
+}
+function select(node, event) {
+  if (node.disabled) return;
+  focusedKey.value = node.key;
+  if (props.multiselect && (event.ctrlKey || event.metaKey)) {
+    selected.value = selectedKeys.value.has(node.key) ? selected.value.filter((value) => keyOf(value) !== node.key) : [...selected.value, node.item.value];
+  } else {
+    selected.value = [node.item.value];
+    active.value = node.item.value;
+  }
+  emit("select", node.item, event);
+}
+function toggle(node, event, force) {
+  if (node.disabled || !node.children.length) return;
+  const open = force ?? !node.expanded;
+  const rest = expanded.value.filter((value) => keyOf(value) !== node.key);
+  expanded.value = open ? [...rest, node.item.value] : rest;
+  emit("toggle", node.item, open, event);
+}
+function selectRange(node, toStart) {
+  const index = reachable.value.indexOf(node);
+  if (index < 0) return;
+  const range = toStart ? reachable.value.slice(0, index + 1) : reachable.value.slice(index);
+  const values = [...selected.value];
+  for (const entry of range) if (!values.some((value) => keyOf(value) === entry.key)) values.push(entry.item.value);
+  selected.value = values;
+}
+function move(node, step) {
+  const index = reachable.value.indexOf(node);
+  focusNode(index < 0 ? reachable.value[0] : reachable.value[index + step]);
+}
+function activate(node, event) {
+  if (node.item.href) {
+    tree.value?.querySelector(`[data-tree-key="${CSS.escape(node.key)}"]`)?.click();
+    return;
+  }
+  select(node, event);
+}
+function onKeydown(event, node) {
+  if (node.disabled) return;
+  const multi = props.multiselect && (event.ctrlKey || event.metaKey);
+  switch (event.key) {
+    case "ArrowDown":
+      event.preventDefault();
+      move(node, 1);
+      break;
+    case "ArrowUp":
+      event.preventDefault();
+      move(node, -1);
+      break;
+    case "ArrowRight":
+      if (!node.children.length) return;
+      event.preventDefault();
+      if (node.expanded) focusNode(node.children.find((child) => !child.disabled));
+      else toggle(node, event, true);
+      break;
+    case "ArrowLeft":
+      event.preventDefault();
+      if (node.expanded) toggle(node, event, false);
+      else if (node.parentKey) focusNode(layout.value.byKey.get(node.parentKey));
+      break;
+    case "End":
+    case "Home": {
+      event.preventDefault();
+      const toStart = event.key === "Home";
+      if (multi && event.shiftKey) selectRange(node, toStart);
+      focusNode(toStart ? reachable.value[0] : reachable.value.at(-1));
+      break;
+    }
+    case "Enter":
+      event.preventDefault();
+      if (node.children.length) toggle(node, event);
+      activate(node, event);
+      break;
+    case " ":
+      event.preventDefault();
+      activate(node, event);
+      break;
+    default:
+      if (multi && (event.key === "a" || event.key === "A")) {
+        event.preventDefault();
+        selected.value = [...selected.value, ...reachable.value.filter((entry) => !selectedKeys.value.has(entry.key)).map((entry) => entry.item.value)];
+      }
+  }
+}
+</script>
+
+<template>
+    <FormLabel
+        v-if="!props.hideLabel"
+        :id="labelId"
+    >
+        {{ props.label }}
+    </FormLabel>
+
+    <ul
+        :id="treeId"
+        ref="tree"
+        v-bind="$attrs"
+        :aria-label="props.hideLabel ? props.label : void 0"
+        :aria-labelledby="props.hideLabel ? void 0 : labelId"
+        :aria-multiselectable="props.multiselect || void 0"
+        :class="ui.root"
+        role="tree"
+    >
+        <TreeViewNode
+            v-for="node in layout.roots"
+            :key="node.key"
+            :activeKey="activeKey"
+            :focusKey="focusKey"
+            :node="node"
+            :selectedKeys="selectedKeys"
+            :size="props.size"
+            :ui="props.ui"
+            @focus-node="focusedKey = $event"
+            @keydown="onKeydown"
+            @select="select"
+            @toggle="toggle"
+        />
+    </ul>
+</template>

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

@@ -0,0 +1,29 @@
+import type { TreeViewEvent, TreeViewItem, TreeViewProps, TreeViewValue } from './TreeView.types.js';
+type __VLS_Props = TreeViewProps;
+type __VLS_ModelProps = {
+    'active'?: TreeViewValue | undefined;
+    'selected'?: TreeViewValue[];
+    'expanded'?: TreeViewValue[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (item: TreeViewItem, event: TreeViewEvent) => any;
+    toggle: (item: TreeViewItem, expanded: boolean, event: TreeViewEvent) => any;
+    "update:expanded": (value: TreeViewValue[]) => any;
+    "update:selected": (value: TreeViewValue[]) => any;
+    "update:active": (value: TreeViewValue | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((item: TreeViewItem, event: TreeViewEvent) => any) | undefined;
+    onToggle?: ((item: TreeViewItem, expanded: boolean, event: TreeViewEvent) => any) | undefined;
+    "onUpdate:expanded"?: ((value: TreeViewValue[]) => any) | undefined;
+    "onUpdate:selected"?: ((value: TreeViewValue[]) => any) | undefined;
+    "onUpdate:active"?: ((value: TreeViewValue | undefined) => any) | undefined;
+}>, {
+    size: import("./TreeView.types.js").TreeViewSize;
+    hideLabel: boolean;
+    id: string;
+    ui: import("../../types/slots.js").ComponentUi<"treeView">;
+    multiselect: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/TreeView/internal/TreeViewNode/TreeViewNode.d.vue.ts

@@ -0,0 +1,22 @@
+import type { TreeViewEvent, TreeViewNode as TreeViewNodeState, TreeViewProps } from '#vuno/components/TreeView/TreeView.types';
+type Props = {
+    activeKey?: string;
+    focusKey?: string;
+    node: TreeViewNodeState;
+    selectedKeys: Set<string>;
+    size: NonNullable<TreeViewProps['size']>;
+    ui?: TreeViewProps['ui'];
+};
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (node: TreeViewNodeState, event: TreeViewEvent) => any;
+    toggle: (node: TreeViewNodeState, event: TreeViewEvent) => any;
+    keydown: (event: KeyboardEvent, node: TreeViewNodeState) => any;
+    focusNode: (key: string) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onSelect?: ((node: TreeViewNodeState, event: TreeViewEvent) => any) | undefined;
+    onToggle?: ((node: TreeViewNodeState, event: TreeViewEvent) => any) | undefined;
+    onKeydown?: ((event: KeyboardEvent, node: TreeViewNodeState) => any) | undefined;
+    onFocusNode?: ((key: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/TreeView/internal/TreeViewNode/TreeViewNode.vue

@@ -0,0 +1,122 @@
+<script setup>
+import { computed } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import TreeViewRow from "#vuno/components/TreeView/internal/TreeViewRow/TreeViewRow.vue";
+defineOptions({ name: "TreeViewNode" });
+const props = defineProps({
+  activeKey: { type: String, required: false },
+  focusKey: { type: String, required: false },
+  node: { type: Object, required: true },
+  selectedKeys: { type: Set, required: true },
+  size: { type: String, required: true },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["focusNode", "keydown", "select", "toggle"]);
+const isLink = computed(() => Boolean(props.node.item.href));
+const isBranch = computed(() => props.node.children.length > 0);
+const isActive = computed(() => props.activeKey === props.node.key);
+const isSelected = computed(() => props.selectedKeys.has(props.node.key));
+const ui = useTheme(
+  "treeView",
+  () => props.ui,
+  () => ({
+    active: isActive.value ? "true" : "false",
+    disabled: props.node.disabled ? "true" : "false",
+    expanded: props.node.expanded ? "true" : "false",
+    leaf: isBranch.value ? "false" : "true",
+    selected: isSelected.value && !props.node.disabled ? "true" : "false",
+    size: props.size,
+    withIcon: props.node.item.icon ? "true" : "false"
+  })
+);
+const offset = computed(() => {
+  const { depth } = props.node;
+  const withIcon = Boolean(props.node.item.icon);
+  if (isBranch.value) return withIcon ? depth + 1 + depth * 0.5 : depth + 1;
+  return withIcon ? depth + 2 + depth * 0.5 : depth + 2.5;
+});
+const treeitem = computed(() => ({
+  id: props.node.id,
+  "aria-current": isActive.value ? isLink.value ? "page" : "true" : void 0,
+  "aria-disabled": props.node.disabled || void 0,
+  "aria-expanded": isBranch.value ? props.node.expanded : void 0,
+  "aria-owns": isBranch.value ? props.node.subtreeId : void 0,
+  "aria-selected": props.node.disabled ? void 0 : isSelected.value,
+  "data-tree-key": props.node.key,
+  role: "treeitem",
+  tabindex: props.node.disabled ? void 0 : props.focusKey === props.node.key ? 0 : -1
+}));
+const wrapper = computed(() => isLink.value ? { class: ui.value.nodeLink, role: "none" } : { ...treeitem.value, class: ui.value.node });
+const listeners = computed(
+  () => isLink.value ? {} : {
+    click: onClick,
+    keydown: onKeydown,
+    focus: () => emit("focusNode", props.node.key)
+  }
+);
+function onClick(event) {
+  event.stopPropagation();
+  if (props.node.disabled) return;
+  emit("select", props.node, event);
+}
+function onKeydown(event) {
+  event.stopPropagation();
+  emit("keydown", event, props.node);
+}
+</script>
+
+<template>
+    <li
+        v-bind="wrapper"
+        v-on="listeners"
+    >
+        <a
+            v-if="isLink"
+            v-bind="treeitem"
+            :class="ui.node"
+            :href="props.node.disabled ? void 0 : props.node.item.href"
+            @click="onClick"
+            @focus="emit('focusNode', props.node.key)"
+            @keydown="onKeydown"
+        >
+            <TreeViewRow
+                :node="props.node"
+                :offset="offset"
+                :ui="ui"
+                @toggle="emit('toggle', props.node, $event)"
+            />
+        </a>
+
+        <TreeViewRow
+            v-else
+            :node="props.node"
+            :offset="offset"
+            :ui="ui"
+            @toggle="emit('toggle', props.node, $event)"
+        />
+
+        <ul
+            v-if="isBranch"
+            :id="props.node.subtreeId"
+            :aria-labelledby="props.node.labelId"
+            :class="ui.group"
+            :hidden="!props.node.expanded"
+            role="group"
+        >
+            <TreeViewNode
+                v-for="child in props.node.children"
+                :key="child.key"
+                :activeKey="props.activeKey"
+                :focusKey="props.focusKey"
+                :node="child"
+                :selectedKeys="props.selectedKeys"
+                :size="props.size"
+                :ui="props.ui"
+                @focus-node="emit('focusNode', $event)"
+                @keydown="(event, node) => emit('keydown', event, node)"
+                @select="(node, event) => emit('select', node, event)"
+                @toggle="(node, event) => emit('toggle', node, event)"
+            />
+        </ul>
+    </li>
+</template>

package/dist/runtime/app/components/TreeView/internal/TreeViewNode/TreeViewNode.vue.d.ts

@@ -0,0 +1,22 @@
+import type { TreeViewEvent, TreeViewNode as TreeViewNodeState, TreeViewProps } from '#vuno/components/TreeView/TreeView.types';
+type Props = {
+    activeKey?: string;
+    focusKey?: string;
+    node: TreeViewNodeState;
+    selectedKeys: Set<string>;
+    size: NonNullable<TreeViewProps['size']>;
+    ui?: TreeViewProps['ui'];
+};
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (node: TreeViewNodeState, event: TreeViewEvent) => any;
+    toggle: (node: TreeViewNodeState, event: TreeViewEvent) => any;
+    keydown: (event: KeyboardEvent, node: TreeViewNodeState) => any;
+    focusNode: (key: string) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onSelect?: ((node: TreeViewNodeState, event: TreeViewEvent) => any) | undefined;
+    onToggle?: ((node: TreeViewNodeState, event: TreeViewEvent) => any) | undefined;
+    onKeydown?: ((event: KeyboardEvent, node: TreeViewNodeState) => any) | undefined;
+    onFocusNode?: ((key: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/TreeView/internal/TreeViewRow/TreeViewRow.d.vue.ts

@@ -0,0 +1,15 @@
+import type { ResolvedSlots } from '#vuno/types/slots';
+import type { TreeViewEvent, TreeViewNode } from '#vuno/components/TreeView/TreeView.types';
+type Props = {
+    node: TreeViewNode;
+    /** La sangría del nivel, en `rem`: la calcula el nodo porque depende de su profundidad. */
+    offset: number;
+    ui: ResolvedSlots<'treeView'>;
+};
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: (event: TreeViewEvent) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onToggle?: ((event: TreeViewEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/TreeView/internal/TreeViewRow/TreeViewRow.vue

@@ -0,0 +1,50 @@
+<script setup>
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "TreeViewRow" });
+const props = defineProps({
+  node: { type: Object, required: true },
+  offset: { type: Number, required: true },
+  ui: { type: Object, required: true }
+});
+const emit = defineEmits(["toggle"]);
+function onToggle(event) {
+  if (props.node.disabled) return;
+  if (props.node.item.href) event.preventDefault();
+  emit("toggle", event);
+}
+</script>
+
+<template>
+    <div
+        :class="props.ui.nodeLabel"
+        :style="{ paddingInlineStart: `${props.offset}rem` }"
+    >
+        <span
+            v-if="props.node.children.length"
+            aria-hidden="true"
+            :class="props.ui.toggle"
+            data-tree-toggle
+            @click.stop="onToggle"
+        >
+            <Icon
+                :class="props.ui.toggleIcon"
+                name="carbon:caret-down"
+            />
+        </span>
+
+        <span :class="props.ui.details">
+            <Icon
+                v-if="props.node.item.icon"
+                :class="props.ui.icon"
+                :name="props.node.item.icon"
+            />
+
+            <span
+                :id="props.node.labelId"
+                :class="props.ui.text"
+            >
+                {{ props.node.item.label }}
+            </span>
+        </span>
+    </div>
+</template>

package/dist/runtime/app/components/TreeView/internal/TreeViewRow/TreeViewRow.vue.d.ts

@@ -0,0 +1,15 @@
+import type { ResolvedSlots } from '#vuno/types/slots';
+import type { TreeViewEvent, TreeViewNode } from '#vuno/components/TreeView/TreeView.types';
+type Props = {
+    node: TreeViewNode;
+    /** La sangría del nivel, en `rem`: la calcula el nodo porque depende de su profundidad. */
+    offset: number;
+    ui: ResolvedSlots<'treeView'>;
+};
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: (event: TreeViewEvent) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onToggle?: ((event: TreeViewEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/UnorderedList/UnorderedList.context.d.ts

@@ -0,0 +1,31 @@
+import type { InjectionKey, Ref } from 'vue';
+/**
+ * Marcador que pinta cada `ListItem` de una lista.
+ *
+ * `counter` es el contador propio de Vuno —un `::before` con `counter(item)`
+ * que cuelga a la izquierda—, `native` deja el marcador al navegador y `dash` y
+ * `square` son los dos niveles de la lista no ordenada: `–` en el primero y `▪`
+ * en el segundo.
+ */
+export type ListMarker = 'counter' | 'dash' | 'native' | 'square';
+/**
+ * Lo que una lista decide y sus elementos —y sus listas hijas— necesitan.
+ *
+ * En Vuno estas decisiones viven en clases del contenedor y bajan por
+ * selectores de descendencia (`.vuno--list--expressive .vuno--list--nested`,
+ * `.vuno--list--unordered > .vuno--list__item::before`). Aquí cada `ListItem`
+ * resuelve su propio tema, así que las recibe.
+ *
+ * Que el contexto exista ya significa «estoy dentro de una lista»: es lo que
+ * permite que una lista anidada se reconozca sola en vez de exigir `nested` en
+ * cada nivel, como obliga React.
+ */
+export type ListContext = {
+    /** `body-02` en lugar de `body-01`; se hereda hacia las listas anidadas. */
+    expressive: Ref<boolean>;
+    /** Marcador que corresponde a los elementos directos de esta lista. */
+    marker: Ref<ListMarker>;
+    /** Segundo nivel o más: cambia sangría, marcador y relleno del elemento. */
+    nested: Ref<boolean>;
+};
+export declare const listKey: InjectionKey<ListContext>;

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

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

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

@@ -0,0 +1,18 @@
+import type { UnorderedListProps } from './UnorderedList.types.js';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<UnorderedListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UnorderedListProps> & Readonly<{}>, {
+    nested: boolean;
+    ui: import("../../types/slots.js").ComponentUi<"list">;
+    isExpressive: 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/UnorderedList/UnorderedList.theme.d.ts

@@ -0,0 +1,55 @@
+export declare const listTheme: Record<"list", {
+    readonly compoundVariants: [{
+        readonly class: {
+            readonly ordered: "[counter-reset:item]";
+        };
+        readonly native: "false";
+        readonly nested: "false";
+    }, {
+        readonly class: {
+            readonly ordered: "list-decimal";
+        };
+        readonly native: "true";
+        readonly nested: "false";
+    }];
+    readonly slots: {
+        readonly item: "text-(--vuno-text-primary)";
+        readonly ordered: "m-0 list-none border-0 p-0 text-sm leading-5 font-normal tracking-[0.16px]";
+        readonly unordered: "m-0 list-none border-0 p-0 text-sm leading-5 font-normal tracking-[0.16px]";
+    };
+    readonly variants: {
+        readonly expressive: {
+            readonly false: {};
+            readonly true: {
+                readonly ordered: "text-base leading-6 tracking-normal";
+                readonly unordered: "text-base leading-6 tracking-normal";
+            };
+        };
+        readonly marker: {
+            readonly counter: {
+                readonly item: "relative before:absolute before:-start-6 before:[counter-increment:item] before:content-[counter(item)_'.']";
+            };
+            readonly dash: {
+                readonly item: "relative before:absolute before:-start-4 before:content-['–']";
+            };
+            readonly native: {};
+            readonly square: {
+                readonly item: "relative before:absolute before:-start-3 before:content-['▪︎']";
+            };
+        };
+        readonly native: {
+            readonly false: {};
+            readonly true: {};
+        };
+        readonly nested: {
+            readonly false: {
+                readonly unordered: "ms-4";
+            };
+            readonly true: {
+                readonly item: "ps-1";
+                readonly ordered: "ms-8 list-[lower-latin]";
+                readonly unordered: "ms-8";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,35 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const listTheme = defineTheme("list", {
+  compoundVariants: [
+    /* Solo la lista ordenada con contador necesita la cuenta, y solo el primer nivel la abre. */
+    { class: { ordered: "[counter-reset:item]" }, native: "false", nested: "false" },
+    /* La lista ordenada nativa de primer nivel recupera el marcador decimal del navegador. */
+    { class: { ordered: "list-decimal" }, native: "true", nested: "false" }
+  ],
+  slots: {
+    item: "text-(--vuno-text-primary)",
+    ordered: "m-0 list-none border-0 p-0 text-sm leading-5 font-normal tracking-[0.16px]",
+    unordered: "m-0 list-none border-0 p-0 text-sm leading-5 font-normal tracking-[0.16px]"
+  },
+  variants: {
+    /* `body-02`. La escala expresiva es para contenido editorial; la productiva para producto. */
+    expressive: {
+      false: {},
+      true: { ordered: "text-base leading-6 tracking-normal", unordered: "text-base leading-6 tracking-normal" }
+    },
+    marker: {
+      counter: { item: "relative before:absolute before:-start-6 before:[counter-increment:item] before:content-[counter(item)_'.']" },
+      /* – en guion medio, no un punto: es el marcador de primer nivel de Vuno. */
+      dash: { item: "relative before:absolute before:-start-4 before:content-['\u2013']" },
+      native: {},
+      /* ▪ con selector de variación textual, para que ningún sistema lo pinte como emoji. */
+      square: { item: "relative before:absolute before:-start-3 before:content-['\u25AA\uFE0E']" }
+    },
+    native: { false: {}, true: {} },
+    nested: {
+      false: { unordered: "ms-4" },
+      /* Segundo nivel y siguientes: 32 px de sangría, letras en la ordenada y 4 px de relleno en el elemento. */
+      true: { item: "ps-1", ordered: "ms-8 list-[lower-latin]", unordered: "ms-8" }
+    }
+  }
+});

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

@@ -0,0 +1,19 @@
+import type { ComponentUi } from '#vuno/types/slots';
+export type UnorderedListProps = {
+    /**
+     * Escala expresiva: `body-02` de 16 px en lugar de `body-01` de 14 px.
+     * Vuno la reserva para contenido editorial; en producto la productiva es
+     * casi siempre la correcta. Una lista dentro de otra expresiva la hereda.
+     */
+    isExpressive?: boolean;
+    /**
+     * Segundo nivel de la lista: sangría de 32 px y `▪` en lugar de `–`.
+     *
+     * No hace falta declararla. Una lista dentro de otra lista lo detecta sola,
+     * a diferencia de React, que obliga a pasarla en cada nivel. Se conserva
+     * para el caso en que el anidamiento no sea de componente —un nivel
+     * renderizado aparte— y para mantener el contrato de Vuno.
+     */
+    nested?: boolean;
+    ui?: ComponentUi<'list'>;
+};