@groupteknology/vuno 2.0.0 → 4.0.0

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

@@ -0,0 +1,84 @@
+import { defineTheme } from "#vuno/utils/theme";
+const fade = "[--snippet-fade:to_right] rtl:[--snippet-fade:to_left]";
+const focusOutline = "focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus)";
+export const codeSnippetTheme = defineTheme("codeSnippet", {
+  compoundVariants: [
+    /* Sin botón de copiar no hay hueco que reservar al final. */
+    { class: { root: "pe-0 ps-0" }, noCopy: "true", type: "single" },
+    { class: { pre: "pe-0" }, noCopy: "true", type: "multi" },
+    /*
+     * El `inline` sin copia deja de ser un control: ni cursor de mano ni
+     * cambio al posar el ratón. Vuno además lo pasa a `inline-block`.
+     */
+    { class: { root: "inline-block cursor-auto hover:bg-(--vuno-layer-01) active:bg-(--vuno-layer-01)" }, noCopy: "true", type: "inline" },
+    /* El aire que separa la última línea de la acción de replegar. */
+    { class: { container: "pb-4" }, expanded: "true", type: "multi" },
+    /* Vuno solo envuelve en `multi`; una línea envuelta dejaría de serlo. */
+    { class: { pre: "break-words whitespace-pre-wrap" }, type: "multi", wrapText: "true" },
+    { class: { root: "text-(--vuno-text-disabled)" }, disabled: "true", type: "multi" },
+    { class: { root: "text-(--vuno-text-disabled)" }, disabled: "true", type: "single" }
+  ],
+  slots: {
+    code: "font-mono text-xs leading-4 tracking-[0.32px]",
+    container: "relative",
+    /** Se funde en el `ui` del botón, así que `tailwind-merge` resuelve los choques. */
+    copy: "absolute end-0 top-0 hover:bg-(--vuno-layer-hover-01) focus:shadow-none focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) active:bg-(--vuno-layer-active-01)",
+    copyIcon: "group-disabled:text-(--vuno-icon-disabled)",
+    /**
+     * El fallo de copia no es un estado de Vuno: ahí el portapapeles no
+     * falla. Va en absoluto bajo el bloque porque la raíz es una fila y un
+     * aviso en flujo se colocaría al lado del código en vez de debajo.
+     */
+    error: "absolute inset-x-0 top-full z-10 border-t border-(--vuno-support-error) bg-(--vuno-notification-background-error) px-4 py-2 text-xs text-(--vuno-support-error)",
+    /* El borde del botón se apaga al enfocar: sin eso compite con el contorno, que es la señal. */
+    expand: "absolute end-0 bottom-0 z-10 h-8 bg-(--vuno-layer-01) ps-4 pe-4 text-(--vuno-text-primary) hover:bg-(--vuno-layer-hover-01) hover:text-(--vuno-text-primary) active:text-(--vuno-text-primary) focus:border-transparent focus:shadow-none focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) active:bg-(--vuno-layer-active-01) disabled:bg-(--vuno-layer-01) disabled:text-(--vuno-text-disabled) disabled:hover:bg-(--vuno-layer-01)",
+    expandIcon: "transition-transform duration-(--vuno-duration-moderate-01) ease-(--vuno-easing-standard-productive) group-disabled:text-(--vuno-icon-disabled) motion-reduce:transition-none",
+    expandLabel: "relative -top-px",
+    live: "sr-only",
+    pre: "m-0 font-mono text-xs leading-4 tracking-[0.32px]",
+    root: "group"
+  },
+  variants: {
+    disabled: {
+      false: {},
+      /* Vuno deja el fondo donde está y apaga solo el texto y los iconos. */
+      true: {}
+    },
+    expanded: {
+      false: {},
+      true: { expandIcon: "rotate-180" }
+    },
+    noCopy: {
+      false: {},
+      true: {}
+    },
+    type: {
+      inline: {
+        code: "px-2 whitespace-pre",
+        root: "relative inline cursor-pointer rounded-[4px] border border-transparent bg-(--vuno-layer-01) p-0 text-(--vuno-text-primary) hover:bg-(--vuno-layer-hover-01) focus:border-(--vuno-focus) focus:outline-none active:bg-(--vuno-layer-active-01) forced-colors:focus:text-[Highlight] forced-colors:focus:outline-solid forced-colors:focus:outline-1 forced-colors:focus:outline-[Highlight]"
+      },
+      multi: {
+        container: `order-1 w-full overflow-auto ${fade} [mask-composite:intersect] [mask-image:linear-gradient(var(--snippet-fade),#000_calc(100%_-_2rem),transparent_100%),linear-gradient(to_bottom,#000_calc(100%_-_1rem),transparent_100%)] transition-[max-height] duration-(--vuno-duration-moderate-01) ease-(--vuno-easing-standard-productive) ${focusOutline} group-focus-within:[mask-image:none] motion-reduce:transition-none`,
+        copy: "end-2 top-2 z-10",
+        /*
+         * El desplazamiento vive en el contenedor y no aquí. El contenedor es
+         * el que lleva `role="textbox"` y `tabindex`, así que es el único que
+         * se puede alcanzar con el teclado: una segunda región desplazable en
+         * el `pre` dejaba las líneas largas fuera del alcance de quien no usa
+         * ratón. Es también donde lo pone el sistema de origen.
+         */
+        pre: "pb-6 pe-6",
+        root: "relative flex w-full max-w-3xl min-w-0 bg-(--vuno-layer-01) p-4 text-(--vuno-text-primary) forced-colors:[outline:1px_solid_transparent]"
+      },
+      single: {
+        container: `flex h-full min-w-0 items-center overflow-x-auto ps-4 ${fade} [mask-image:linear-gradient(var(--snippet-fade),#000_calc(100%_-_2rem),transparent_100%)] ${focusOutline} group-focus-within:[mask-image:none]`,
+        pre: "pe-8 whitespace-pre",
+        root: "relative flex h-10 w-full max-w-3xl min-w-0 items-center bg-(--vuno-layer-01) pe-10 text-(--vuno-text-primary) forced-colors:[outline:1px_solid_transparent]"
+      }
+    },
+    wrapText: {
+      false: {},
+      true: {}
+    }
+  }
+});

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

@@ -0,0 +1,53 @@
+import type { ComponentUi } from '#vuno/types/slots';
+import type { TooltipSide } from '#vuno/components/Tooltip/Tooltip.types';
+export type CodeSnippetType = 'inline' | 'multi' | 'single';
+export type CodeSnippetLanguage = 'text' | 'typescript' | 'vue';
+/**
+ * Vuno nombra `align` a la colocación del aviso de la acción de copiar y
+ * admite también las variantes `-start` y `-end`. Aquí el aviso lo pone
+ * `Tooltip`, que solo resuelve los cuatro lados, así que el contrato reutiliza
+ * su tipo en vez de prometer alineaciones que nadie colocaría.
+ */
+export type CodeSnippetAlign = TooltipSide;
+export type CodeSnippetProps = {
+    /** Lado por el que aparece el aviso de la acción de copiar. */
+    align?: CodeSnippetAlign;
+    /**
+     * Nombre de la región desplazable. Vuno la expone como caja de texto de
+     * solo lectura para que el teclado pueda entrar a desplazarla, y una caja
+     * de texto sin nombre no se puede anunciar.
+     */
+    ariaLabel?: string;
+    /** El texto que se muestra y el que se copia: son el mismo, sin reformatear. */
+    code: string;
+    /** Descripción de la acción de copiar; es su nombre accesible y su aviso. */
+    copyButtonDescription?: string;
+    /** Solo `single` y `multi`. Vuno deja `inline` sin tratamiento visual propio. */
+    disabled?: boolean;
+    /** Lo que sustituye a la descripción mientras dura la confirmación de copia. */
+    feedback?: string;
+    feedbackTimeout?: number;
+    hideCopyButton?: boolean;
+    /** Lenguaje usado para resaltar el código sin modificar el texto copiado. */
+    language?: CodeSnippetLanguage;
+    /**
+     * Filas visibles como máximo en `multi` sin desplegar. Con `0` no hay
+     * límite y tampoco aparece la acción de desplegar.
+     */
+    maxCollapsedNumberOfRows?: number;
+    /** Filas visibles como máximo una vez desplegado. Con `0` crece sin tope. */
+    maxExpandedNumberOfRows?: number;
+    /** Altura mínima reservada sin desplegar, en filas. */
+    minCollapsedNumberOfRows?: number;
+    /**
+     * Altura mínima reservada al desplegar, en filas. Si el contenido encoge
+     * por debajo, Vuno vuelve a plegar: desplegar ya no aportaba nada.
+     */
+    minExpandedNumberOfRows?: number;
+    showLessText?: string;
+    showMoreText?: string;
+    type?: CodeSnippetType;
+    ui?: ComponentUi<'codeSnippet'>;
+    /** Solo tiene efecto en `multi`: `inline` y `single` conservan una línea. */
+    wrapText?: boolean;
+};

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

@@ -0,0 +1,232 @@
+<script setup>
+import { computed, onBeforeUnmount, ref, watch } from "vue";
+import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
+import Button from "#vuno/components/Button/Button.vue";
+import Tooltip from "#vuno/components/Tooltip/Tooltip.vue";
+import { tokenizeCode } from "./syntax";
+defineOptions({ name: "CodeSnippet", inheritAttrs: false });
+const props = defineProps({
+  align: { type: String, required: false, default: "bottom" },
+  ariaLabel: { type: String, required: false, default: void 0 },
+  code: { type: String, required: true },
+  copyButtonDescription: { type: String, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false },
+  feedback: { type: String, required: false, default: void 0 },
+  feedbackTimeout: { type: Number, required: false, default: 2e3 },
+  hideCopyButton: { type: Boolean, required: false, default: false },
+  language: { type: String, required: false, default: "text" },
+  maxCollapsedNumberOfRows: { type: Number, required: false, default: 15 },
+  maxExpandedNumberOfRows: { type: Number, required: false, default: 0 },
+  minCollapsedNumberOfRows: { type: Number, required: false, default: 3 },
+  minExpandedNumberOfRows: { type: Number, required: false, default: 16 },
+  showLessText: { type: String, required: false, default: "Mostrar menos" },
+  showMoreText: { type: String, required: false, default: "Mostrar m\xE1s" },
+  type: { type: String, required: false, default: "single" },
+  ui: { type: Object, required: false, default: void 0 },
+  wrapText: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["click"]);
+const rowHeight = 16;
+const icons = useIcons();
+const messages = useMessages();
+const codeEl = ref(null);
+const copied = ref(false);
+const copyFailed = ref(false);
+const expanded = ref(false);
+const measured = ref(null);
+const preEl = ref(null);
+const copyDescription = computed(() => props.copyButtonDescription ?? messages.value.codeCopy);
+const feedbackText = computed(() => props.feedback ?? messages.value.codeCopied);
+const isInline = computed(() => props.type === "inline");
+const isMulti = computed(() => props.type === "multi");
+const regionLabel = computed(() => props.ariaLabel ?? messages.value.codeRegion);
+const tooltipText = computed(() => copied.value ? feedbackText.value : copyDescription.value);
+const contentHeight = computed(() => measured.value ?? props.code.split("\n").length * rowHeight);
+const syntaxTokens = computed(() => tokenizeCode(props.code, props.language));
+const syntaxClass = {
+  angleBracket: "text-(--vuno-syntax-angle-bracket)",
+  attribute: "text-(--vuno-syntax-attribute-name)",
+  comment: "text-(--vuno-syntax-comment)",
+  keyword: "text-(--vuno-syntax-keyword)",
+  number: "text-(--vuno-syntax-number)",
+  string: "text-(--vuno-syntax-special-string)",
+  tag: "text-(--vuno-syntax-tag-name)"
+};
+const expandable = computed(() => isMulti.value && props.maxCollapsedNumberOfRows > 0 && (props.maxExpandedNumberOfRows <= 0 || props.maxExpandedNumberOfRows > props.maxCollapsedNumberOfRows) && contentHeight.value > props.maxCollapsedNumberOfRows * rowHeight);
+const containerStyle = computed(() => {
+  if (!isMulti.value) return void 0;
+  const maximum = expanded.value ? props.maxExpandedNumberOfRows : props.maxCollapsedNumberOfRows;
+  const minimum = expanded.value ? props.minExpandedNumberOfRows : props.minCollapsedNumberOfRows;
+  return {
+    maxHeight: maximum > 0 ? `${maximum * rowHeight}px` : void 0,
+    minHeight: minimum > 0 ? `${minimum * rowHeight}px` : void 0
+  };
+});
+const ui = useTheme(
+  "codeSnippet",
+  () => props.ui,
+  () => ({
+    disabled: props.disabled ? "true" : "false",
+    expanded: expanded.value ? "true" : "false",
+    noCopy: props.hideCopyButton ? "true" : "false",
+    type: props.type,
+    wrapText: props.wrapText ? "true" : "false"
+  })
+);
+let timer;
+async function copy(event) {
+  emit("click", event);
+  copyFailed.value = false;
+  try {
+    await navigator.clipboard.writeText(props.code);
+  } catch {
+    copied.value = false;
+    copyFailed.value = true;
+    clearTimeout(timer);
+    return;
+  }
+  copied.value = true;
+  clearTimeout(timer);
+  timer = setTimeout(() => copied.value = false, props.feedbackTimeout);
+}
+watch(contentHeight, (height) => {
+  if (!expanded.value || props.minExpandedNumberOfRows <= 0) return;
+  if (height <= props.minExpandedNumberOfRows * rowHeight) expanded.value = false;
+});
+watch(preEl, (element, _previous, onCleanup) => {
+  if (!element || typeof ResizeObserver === "undefined") return;
+  const observer = new ResizeObserver(() => measured.value = codeEl.value?.getBoundingClientRect().height || null);
+  observer.observe(element);
+  onCleanup(() => observer.disconnect());
+});
+onBeforeUnmount(() => clearTimeout(timer));
+</script>
+
+<template>
+    <!-- Sin copia, el `inline` deja de ser un control: un botón inerte seguiría en el recorrido del tabulador. -->
+    <span
+        v-if="isInline && props.hideCopyButton"
+        v-bind="$attrs"
+        :class="ui.root"
+    >
+        <code :class="ui.code">
+            <template
+                v-for="(token, index) in syntaxTokens"
+                :key="index"
+            >
+                <span
+                    v-if="token.kind !== 'plain'"
+                    :class="syntaxClass[token.kind]"
+                    :data-syntax="token.kind"
+                >
+                    {{ token.value }}
+                </span>
+                <template v-else>{{ token.value }}</template>
+            </template>
+        </code>
+    </span>
+
+    <Tooltip
+        v-else-if="isInline"
+        :side="props.align"
+        :text="tooltipText"
+    >
+        <button
+            v-bind="$attrs"
+            :aria-label="copyDescription"
+            :class="ui.root"
+            :disabled="props.disabled"
+            type="button"
+            @click="copy"
+        >
+            <code :class="ui.code">
+                <template
+                    v-for="(token, index) in syntaxTokens"
+                    :key="index"
+                >
+                    <span
+                        v-if="token.kind !== 'plain'"
+                        :class="syntaxClass[token.kind]"
+                        :data-syntax="token.kind"
+                    >
+                        {{ token.value }}
+                    </span>
+                    <template v-else>{{ token.value }}</template>
+                </template>
+            </code>
+        </button>
+    </Tooltip>
+
+    <div
+        v-else
+        v-bind="$attrs"
+        :class="ui.root"
+    >
+        <div
+            :aria-label="regionLabel"
+            :aria-multiline="isMulti ? 'true' : void 0"
+            aria-readonly="true"
+            :class="ui.container"
+            role="textbox"
+            :style="containerStyle"
+            :tabindex="props.disabled ? void 0 : 0"
+        >
+            <pre
+                ref="preEl"
+                :class="ui.pre"
+            ><code
+            ref="codeEl"
+            :class="ui.code"
+        ><template
+                v-for="(token, index) in syntaxTokens"
+                :key="index"
+            ><span
+                    v-if="token.kind !== 'plain'"
+                    :class="syntaxClass[token.kind]"
+                    :data-syntax="token.kind"
+                >{{ token.value }}</span><template v-else>{{ token.value }}</template></template></code></pre>
+        </div>
+
+        <Tooltip
+            v-if="!props.hideCopyButton"
+            :side="props.align"
+            :text="tooltipText"
+        >
+            <Button
+                :disabled="props.disabled"
+                :icon="copied ? icons.codeCopied : icons.codeCopy"
+                :iconDescription="copyDescription"
+                kind="ghost"
+                :size="isMulti ? 'sm' : 'md'"
+                :ui="{ base: ui.copy, icon: ui.copyIcon }"
+                @click="copy"
+            />
+        </Tooltip>
+
+        <Button
+            v-if="expandable"
+            :disabled="props.disabled"
+            :icon="icons.dropdownOpen"
+            kind="ghost"
+            :label="expanded ? props.showLessText : props.showMoreText"
+            size="sm"
+            :ui="{ base: ui.expand, icon: ui.expandIcon, label: ui.expandLabel }"
+            @click="expanded = !expanded"
+        />
+
+        <p
+            v-if="copyFailed"
+            :class="ui.error"
+            role="alert"
+        >
+            {{ messages.codeCopyFailed }}
+        </p>
+
+        <span
+            aria-live="polite"
+            :class="ui.live"
+        >
+            {{ copied ? messages.codeCopiedAnnouncement : "" }}
+        </span>
+    </div>
+</template>

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

@@ -0,0 +1,25 @@
+import type { CodeSnippetProps } from './CodeSnippet.types.js';
+declare const __VLS_export: import("vue").DefineComponent<CodeSnippetProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<CodeSnippetProps> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    align: import("./CodeSnippet.types.js").CodeSnippetAlign;
+    type: import("./CodeSnippet.types.js").CodeSnippetType;
+    wrapText: boolean;
+    ui: import("../../types/slots.js").ComponentUi<"codeSnippet">;
+    ariaLabel: string;
+    copyButtonDescription: string;
+    feedback: string;
+    feedbackTimeout: number;
+    hideCopyButton: boolean;
+    language: import("./CodeSnippet.types.js").CodeSnippetLanguage;
+    maxCollapsedNumberOfRows: number;
+    maxExpandedNumberOfRows: number;
+    minCollapsedNumberOfRows: number;
+    minExpandedNumberOfRows: number;
+    showLessText: string;
+    showMoreText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/CodeSnippet/syntax.d.ts

@@ -0,0 +1,8 @@
+import type { CodeSnippetLanguage } from './CodeSnippet.types.js';
+export type CodeSnippetTokenKind = 'angleBracket' | 'attribute' | 'comment' | 'keyword' | 'number' | 'plain' | 'string' | 'tag';
+export type CodeSnippetToken = {
+    kind: CodeSnippetTokenKind;
+    value: string;
+};
+/** Divide el código en fragmentos visuales conservando cada carácter original. */
+export declare function tokenizeCode(code: string, language: CodeSnippetLanguage): CodeSnippetToken[];

package/dist/runtime/app/components/CodeSnippet/syntax.js

@@ -0,0 +1,28 @@
+const keywords = /* @__PURE__ */ new Set(["async", "await", "const", "else", "export", "false", "from", "function", "if", "import", "interface", "let", "null", "return", "true", "type", "undefined", "var"]);
+const typescriptPattern = /\/\*[\s\S]*?\*\/|\/\/[^\n]*|"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\b[A-Za-z_$][\w$]*\b|\b\d+(?:\.\d+)?\b/g;
+const vuePattern = /<!--[\s\S]*?-->|\/\*[\s\S]*?\*\/|\/\/[^\n]*|<\/?[A-Za-z][\w.-]*|\/?>|"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|[:@]?[A-Za-z_][\w:.-]*(?=\s*=)|\b[A-Za-z_$][\w$]*\b|\b\d+(?:\.\d+)?\b/g;
+export function tokenizeCode(code, language) {
+  if (language === "text" || code.length === 0) return [{ kind: "plain", value: code }];
+  const pattern = language === "vue" ? vuePattern : typescriptPattern;
+  const tokens = [];
+  let cursor = 0;
+  for (const match of code.matchAll(pattern)) {
+    const index = match.index ?? cursor;
+    if (index > cursor) tokens.push({ kind: "plain", value: code.slice(cursor, index) });
+    const followedByEquals = /^\s*=/.test(code.slice(index + match[0].length));
+    tokens.push({ kind: kindOf(match[0], language, followedByEquals), value: match[0] });
+    cursor = index + match[0].length;
+  }
+  if (cursor < code.length) tokens.push({ kind: "plain", value: code.slice(cursor) });
+  return tokens;
+}
+function kindOf(value, language, followedByEquals) {
+  if (value.startsWith("<!--") || value.startsWith("/*") || value.startsWith("//")) return "comment";
+  if (value.startsWith('"') || value.startsWith("'")) return "string";
+  if (/^\d/.test(value)) return "number";
+  if (keywords.has(value)) return "keyword";
+  if (language === "vue" && value.startsWith("<")) return "tag";
+  if (language === "vue" && /^\/?>$/.test(value)) return "angleBracket";
+  if (language === "vue" && followedByEquals) return "attribute";
+  return "plain";
+}

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

@@ -0,0 +1,21 @@
+import type { ColumnProps } from './Column.types.js';
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<ColumnProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColumnProps> & Readonly<{}>, {
+    sm: import("./Column.types.js").ColumnValue;
+    md: import("./Column.types.js").ColumnValue;
+    lg: import("./Column.types.js").ColumnValue;
+    span: import("./Column.types.js").ColumnValue;
+    as: import("vue").Component | string;
+    max: import("./Column.types.js").ColumnValue;
+    xlg: import("./Column.types.js").ColumnValue;
+}, {}, {}, {}, 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/Column/Column.types.d.ts

@@ -0,0 +1,52 @@
+import type { Component } from 'vue';
+/** Puntos de ruptura de la retícula 2x. `span.ts` guarda su orden. */
+export type ColumnBreakpoint = 'lg' | 'max' | 'md' | 'sm' | 'xlg';
+/**
+ * Fracción de la retícula, resuelta en columnas enteras en cada punto de
+ * ruptura: `'50%'` son dos columnas en `sm`, cuatro en `md` y ocho desde `lg`.
+ * `'100%'` no cuenta columnas, ocupa de la primera línea a la última.
+ */
+export type ColumnPercent = '25%' | '50%' | '75%' | '100%';
+/**
+ * Ancho de una columna: un número de columnas, una fracción o `true` para dejar
+ * que la retícula la coloque sola —el `auto` de CSS Grid—. `0` la oculta.
+ */
+export type ColumnSpan = boolean | ColumnPercent | number;
+/**
+ * Ancho y posición a la vez. `offset` es la forma declarativa de «déjame tantas
+ * columnas por delante» y `start` la línea exacta; ambas describen la misma
+ * línea inicial, y `start` gana cuando se declaran las dos.
+ */
+export type ColumnPlacement = {
+    /** Línea final exclusiva. Con `start` describe el tramo sin contar columnas. */
+    end?: number;
+    /** Columnas libres por delante. `0` devuelve la colocación automática. */
+    offset?: number;
+    span?: ColumnSpan;
+    /** Línea inicial, contando desde 1. `0` devuelve la colocación automática. */
+    start?: number;
+};
+export type ColumnValue = ColumnPlacement | ColumnSpan;
+export type ColumnProps = {
+    /** Desde 320 px. Cuatro columnas. */
+    sm?: ColumnValue;
+    /** Desde 672 px. Ocho columnas. */
+    md?: ColumnValue;
+    /** Desde 1056 px. Dieciséis columnas. */
+    lg?: ColumnValue;
+    /**
+     * Raíz alternativa. Una columna es a menudo una región con nombre o un
+     * elemento de lista, y forzar un `div` obligaría a envolverla.
+     */
+    as?: Component | string;
+    /** Desde 1584 px. Dieciséis columnas. */
+    max?: ColumnValue;
+    /**
+     * Ancho y posición que no dependen del punto de ruptura. Es el valor de
+     * partida: cualquier punto de ruptura declarado lo sustituye desde su ancho
+     * hacia arriba.
+     */
+    span?: ColumnValue;
+    /** Desde 1312 px. Dieciséis columnas. */
+    xlg?: ColumnValue;
+};

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

@@ -0,0 +1,31 @@
+<script setup>
+import { computed } from "vue";
+import { resolveColumnGeometry } from "./span";
+defineOptions({ name: "Column" });
+const props = defineProps({
+  sm: { type: [Object, Boolean, String, Number], required: false, default: void 0 },
+  md: { type: [Object, Boolean, String, Number], required: false, default: void 0 },
+  lg: { type: [Object, Boolean, String, Number], required: false, default: void 0 },
+  as: { type: null, required: false, default: "div" },
+  max: { type: [Object, Boolean, String, Number], required: false, default: void 0 },
+  span: { type: [Object, Boolean, String, Number], required: false, default: void 0 },
+  xlg: { type: [Object, Boolean, String, Number], required: false, default: void 0 }
+});
+defineSlots();
+const geometry = computed(() => resolveColumnGeometry(props));
+</script>
+
+<template>
+    <component
+        :is="props.as"
+        :data-spans="geometry.spans || void 0"
+        data-vuno-column
+        :style="geometry.variables"
+    >
+        <slot />
+    </component>
+</template>
+
+<style scoped>
+[data-vuno-column]{--vuno-grid-mode-start:var(--vuno-grid-gutter-start);--vuno-grid-mode-end:var(--vuno-grid-gutter-end);grid-column-end:var(--vuno-column-end-sm,auto);grid-column-start:var(--vuno-column-start-sm,auto);margin-inline:var(--vuno-grid-gutter-start) var(--vuno-grid-gutter-end)}[data-vuno-column][data-spans~=sm]{--vuno-grid-columns:var(--vuno-column-columns-sm);display:var(--vuno-column-display-sm)}@media (min-width:42rem){[data-vuno-column]{grid-column-end:var(--vuno-column-end-md,auto);grid-column-start:var(--vuno-column-start-md,auto)}[data-vuno-column][data-spans~=md]{--vuno-grid-columns:var(--vuno-column-columns-md);display:var(--vuno-column-display-md)}}@media (min-width:66rem){[data-vuno-column]{grid-column-end:var(--vuno-column-end-lg,auto);grid-column-start:var(--vuno-column-start-lg,auto)}[data-vuno-column][data-spans~=lg]{--vuno-grid-columns:var(--vuno-column-columns-lg);display:var(--vuno-column-display-lg)}}@media (min-width:82rem){[data-vuno-column]{grid-column-end:var(--vuno-column-end-xlg,auto);grid-column-start:var(--vuno-column-start-xlg,auto)}[data-vuno-column][data-spans~=xlg]{--vuno-grid-columns:var(--vuno-column-columns-xlg);display:var(--vuno-column-display-xlg)}}@media (min-width:99rem){[data-vuno-column]{grid-column-end:var(--vuno-column-end-max,auto);grid-column-start:var(--vuno-column-start-max,auto)}[data-vuno-column][data-spans~=max]{--vuno-grid-columns:var(--vuno-column-columns-max);display:var(--vuno-column-display-max)}}
+</style>

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

@@ -0,0 +1,21 @@
+import type { ColumnProps } from './Column.types.js';
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<ColumnProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColumnProps> & Readonly<{}>, {
+    sm: import("./Column.types.js").ColumnValue;
+    md: import("./Column.types.js").ColumnValue;
+    lg: import("./Column.types.js").ColumnValue;
+    span: import("./Column.types.js").ColumnValue;
+    as: import("vue").Component | string;
+    max: import("./Column.types.js").ColumnValue;
+    xlg: import("./Column.types.js").ColumnValue;
+}, {}, {}, {}, 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/Column/span.d.ts

@@ -0,0 +1,22 @@
+import type { ColumnBreakpoint, ColumnProps } from './Column.types.js';
+/** De menor a mayor: el orden en que un valor se arrastra hacia arriba. */
+export declare const columnBreakpoints: readonly ColumnBreakpoint[];
+/** Variables y puntos de ruptura activos que `Column` lleva al marcado. */
+export type ColumnGeometry = {
+    /** Los puntos de ruptura que fijan ancho o visibilidad, separados por espacio. */
+    spans: string;
+    variables: Record<string, number | string>;
+};
+/**
+ * Resuelve la geometría de la columna en los cinco puntos de ruptura.
+ *
+ * Vuno emite una clase por punto de ruptura y deja que la cascada complete los
+ * huecos: `sm={4}` sin más vale a cualquier ancho porque su regla no lleva
+ * consulta de medios. Aquí el arrastre se hace antes, al resolver, para que cada
+ * punto de ruptura publique su valor efectivo completo. El resultado visible es
+ * el mismo y la hoja de estilos deja de depender del orden de sus reglas.
+ *
+ * La precedencia es la de Vuno en la práctica: `span` es el valor de partida y
+ * el punto de ruptura declarado más cercano por debajo lo sustituye.
+ */
+export declare function resolveColumnGeometry(props: Pick<ColumnProps, 'lg' | 'max' | 'md' | 'sm' | 'span' | 'xlg'>): ColumnGeometry;

package/dist/runtime/app/components/Column/span.js

@@ -0,0 +1,42 @@
+export const columnBreakpoints = ["sm", "md", "lg", "xlg", "max"];
+const breakpointColumns = { sm: 4, md: 8, lg: 16, max: 16, xlg: 16 };
+const percentFractions = { "25%": 0.25, "50%": 0.5, "75%": 0.75, "100%": 1 };
+export function resolveColumnGeometry(props) {
+  const spans = [];
+  const variables = {};
+  let inherited = {};
+  for (const breakpoint of columnBreakpoints) {
+    const columns = breakpointColumns[breakpoint];
+    inherited = { ...inherited, ...resolvePlacement(props[breakpoint], columns) };
+    const placement = { ...resolvePlacement(props.span, columns), ...inherited };
+    if (placement.start) variables[`--vuno-column-start-${breakpoint}`] = placement.start;
+    if (placement.end) variables[`--vuno-column-end-${breakpoint}`] = placement.end;
+    if (placement.columns === void 0 && !placement.display) continue;
+    spans.push(breakpoint);
+    variables[`--vuno-column-columns-${breakpoint}`] = placement.columns ?? 0;
+    variables[`--vuno-column-display-${breakpoint}`] = placement.display ?? "block";
+  }
+  return { spans: spans.join(" "), variables };
+}
+function trackSpan(span) {
+  return { columns: span, end: `span ${span}`, start: `span ${span}` };
+}
+function resolveSpan(span, columns) {
+  if (span === void 0 || typeof span === "boolean") return span ? { end: "auto", start: "auto" } : {};
+  if (typeof span === "string") {
+    if (span === "100%") return { end: "-1", start: "1" };
+    return trackSpan(Math.round(columns * percentFractions[span]));
+  }
+  if (span <= 0) return { display: "none" };
+  return { ...trackSpan(span), display: "block" };
+}
+function resolvePlacement(value, columns) {
+  if (value === void 0 || value === null) return {};
+  if (typeof value === "boolean") return value ? { end: "auto", start: "auto" } : {};
+  if (typeof value === "number" || typeof value === "string") return resolveSpan(value, columns);
+  const placement = resolveSpan(value.span, columns);
+  if (typeof value.offset === "number") placement.start = value.offset > 0 ? String(value.offset + 1) : "auto";
+  if (typeof value.start === "number") placement.start = value.start > 0 ? String(value.start) : "auto";
+  if (typeof value.end === "number") placement.end = String(value.end);
+  return placement;
+}