@groupteknology/vuno 2.0.0 → 4.0.0

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

@@ -0,0 +1,35 @@
+import type { CheckboxGroupProps, CheckboxGroupValue } from './CheckboxGroup.types.js';
+type __VLS_Props = CheckboxGroupProps;
+type __VLS_ModelProps = {
+    modelValue?: CheckboxGroupValue | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: CheckboxGroupValue | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: CheckboxGroupValue | undefined) => any) | undefined;
+}>, {
+    disabled: boolean;
+    invalid: boolean;
+    warn: boolean;
+    orientation: import("#vuno/types/control").ControlOrientation;
+    name: string;
+    helperText: string;
+    readonly: boolean;
+    items: import("#vuno/types/control").OptionItem[];
+    ui: import("../../types/slots.js").ComponentUi<"checkboxGroup">;
+    invalidText: string;
+    warnText: 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/CheckboxGroup/CheckboxGroup.theme.d.ts

@@ -0,0 +1,63 @@
+/**
+ * El grupo de casillas: leyenda `label-01`, las opciones y, debajo, la fila de
+ * validación.
+ *
+ * La separación entre opciones no es una sola: apiladas dejan 6 px y en línea
+ * 16 px, así que vive en la variante de orientación y no en un `gap` único. Es
+ * la misma geometría del grupo de radios, y por la misma razón: las dos listas
+ * se leen en la misma columna de un formulario.
+ *
+ * Apiladas hay además un tirón de 2 px hacia arriba. No es un ajuste a ojo: el
+ * sistema de origen lo escribe sobre la primera fila —`label + wrapper`— para
+ * descontar el desplazamiento con el que la caja arranca dentro de su fila, y
+ * como el resto va en flujo normal, subir el contenedor entero produce
+ * exactamente el mismo resultado con una regla en vez de con un selector de
+ * hermanos. En línea el origen lo anula, así que aquí tampoco está.
+ *
+ * Los 7 px sobre la fila de validación son dos números del origen sumados: la
+ * última fila deja 3 px por debajo y el mensaje pide 4 px por encima. Escritos
+ * aparte obligarían a que el grupo conociera la caja de la casilla.
+ *
+ * `validation` sirve a los tres textos —ayuda, aviso y error— porque el sistema
+ * de origen les da el mismo hueco. El icono solo aparece en aviso y error, y el
+ * `gap` de 8 px lo sangra únicamente entonces: sin icono no hay hueco que
+ * separar y la ayuda arranca alineada con la leyenda.
+ *
+ * Apagar el grupo apaga también la leyenda y el texto de ayuda, no solo las
+ * casillas. Se resuelve con `in-[:disabled]` —cualquier ancestro deshabilitado—
+ * y no con una variante: es la misma herencia por contenedor que declara el
+ * sistema de origen, así que también responde al `fieldset` apagado que ponga
+ * quien consume el grupo.
+ */
+export declare const checkboxGroupTheme: Record<"checkboxGroup", {
+    readonly slots: {
+        readonly helper: "text-xs/[1rem] tracking-[0.32px] text-(--vuno-text-helper) in-[:disabled]:text-(--vuno-text-disabled)";
+        readonly icon: "mt-px ms-[3px] me-px size-4 shrink-0";
+        readonly legend: "mb-2 text-xs/[1rem] tracking-[0.32px] text-(--vuno-text-secondary) in-[:disabled]:text-(--vuno-text-disabled)";
+        /** El texto de validación hereda el color del texto; solo el error se pinta. */
+        readonly message: "text-(--vuno-text-primary)";
+        readonly options: "flex";
+        readonly root: "border-0 p-0";
+        readonly validation: "mt-[7px] flex w-full items-start gap-2";
+    };
+    readonly variants: {
+        readonly orientation: {
+            readonly horizontal: {
+                readonly options: "flex-row flex-wrap gap-4";
+            };
+            readonly vertical: {
+                readonly options: "-mt-0.5 flex-col gap-1.5";
+            };
+        };
+        readonly state: {
+            readonly default: {};
+            readonly invalid: {
+                readonly icon: "text-(--vuno-support-error)";
+                readonly message: "text-(--vuno-text-error)";
+            };
+            readonly warn: {
+                readonly icon: "text-(--vuno-support-warning)";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,24 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const checkboxGroupTheme = defineTheme("checkboxGroup", {
+  slots: {
+    helper: "text-xs/[1rem] tracking-[0.32px] text-(--vuno-text-helper) in-[:disabled]:text-(--vuno-text-disabled)",
+    icon: "mt-px ms-[3px] me-px size-4 shrink-0",
+    legend: "mb-2 text-xs/[1rem] tracking-[0.32px] text-(--vuno-text-secondary) in-[:disabled]:text-(--vuno-text-disabled)",
+    /** El texto de validación hereda el color del texto; solo el error se pinta. */
+    message: "text-(--vuno-text-primary)",
+    options: "flex",
+    root: "border-0 p-0",
+    validation: "mt-[7px] flex w-full items-start gap-2"
+  },
+  variants: {
+    orientation: {
+      horizontal: { options: "flex-row flex-wrap gap-4" },
+      vertical: { options: "-mt-0.5 flex-col gap-1.5" }
+    },
+    state: {
+      default: {},
+      invalid: { icon: "text-(--vuno-support-error)", message: "text-(--vuno-text-error)" },
+      warn: { icon: "text-(--vuno-support-warning)" }
+    }
+  }
+});

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

@@ -0,0 +1,42 @@
+import type { ControlOrientation, OptionItem, OptionValue } from '#vuno/types/control';
+import type { ComponentUi } from '#vuno/types/slots';
+export type CheckboxGroupProps = {
+    /**
+     * Nombre con el que las casillas del grupo viajan en el formulario.
+     *
+     * No existe en el sistema de origen, donde cada casilla lo declara. Aquí
+     * hace falta porque el grupo también puede dibujarlas desde `items`, y sin
+     * un nombre compartido esa vía no enviaría nada.
+     */
+    name?: string;
+    disabled?: boolean;
+    helperText?: string;
+    invalid?: boolean;
+    invalidText?: string;
+    /**
+     * Las opciones declaradas por datos, en vez de como `Checkbox` en el slot.
+     *
+     * Reutiliza el contrato de opción que ya comparten el resto de las listas
+     * del paquete, del que el grupo consume `disabled`, `label` y `value`:
+     * `description` e `icon` no tienen sitio en una casilla y se ignoran.
+     */
+    items?: OptionItem[];
+    legendText: string;
+    orientation?: ControlOrientation;
+    /**
+     * Impide el cambio sin sacar las casillas del recorrido de foco, y
+     * predomina sobre el error y el aviso: lo que no se puede cambiar no se
+     * reclama.
+     *
+     * En el sistema de origen se llama `readOnly`. Aquí conserva la grafía que
+     * ya usan `Checkbox`, `RadioButtonGroup` y el resto de los controles del
+     * paquete: dos nombres para el mismo estado dentro del mismo formulario
+     * cuestan más que la diferencia con el original.
+     */
+    readonly?: boolean;
+    ui?: ComponentUi<'checkboxGroup'>;
+    warn?: boolean;
+    warnText?: string;
+};
+/** Los valores marcados. Un grupo admite cero, uno o varios. */
+export type CheckboxGroupValue = OptionValue[];

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

@@ -0,0 +1,104 @@
+<script setup>
+import { computed, provide, useId } from "vue";
+import { useIcons, useTheme } from "#vuno/composables/useTheme";
+import { cn } from "#vuno/utils/theme";
+import Checkbox from "#vuno/components/Checkbox/Checkbox.vue";
+import { checkboxGroupContextKey } from "./internal/context";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "CheckboxGroup" });
+const model = defineModel({ type: null, ...{ default: void 0 } });
+const props = defineProps({
+  name: { type: String, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false, default: false },
+  helperText: { type: String, required: false, default: void 0 },
+  invalid: { type: Boolean, required: false, default: false },
+  invalidText: { type: String, required: false, default: void 0 },
+  items: { type: Array, required: false, default: () => [] },
+  legendText: { type: String, required: true },
+  orientation: { type: String, required: false, default: "vertical" },
+  readonly: { type: Boolean, required: false, default: false },
+  ui: { type: Object, required: false, default: void 0 },
+  warn: { type: Boolean, required: false, default: false },
+  warnText: { type: String, required: false, default: void 0 }
+});
+const icons = useIcons();
+const uid = useId();
+const messageId = `${uid}-message`;
+const invalid = computed(() => !props.readonly && props.invalid);
+const warn = computed(() => !props.readonly && !props.invalid && props.warn);
+const message = computed(() => invalid.value ? props.invalidText : warn.value ? props.warnText : props.helperText);
+const stateIcon = computed(() => invalid.value ? icons.value.notifyError : warn.value ? icons.value.notifyWarning : void 0);
+const ui = useTheme(
+  "checkboxGroup",
+  () => props.ui,
+  () => ({
+    orientation: props.orientation,
+    state: invalid.value ? "invalid" : warn.value ? "warn" : "default"
+  })
+);
+function isSelected(value) {
+  return (model.value ?? []).includes(value);
+}
+function toggle(value, checked) {
+  const current = model.value ?? [];
+  if (!checked) return void (model.value = current.filter((entry) => entry !== value));
+  if (current.includes(value)) return;
+  model.value = [...current, value];
+}
+provide(checkboxGroupContextKey, {
+  invalid,
+  readonly: computed(() => props.readonly)
+});
+</script>
+
+<template>
+    <fieldset
+        :aria-describedby="message ? messageId : void 0"
+        :class="ui.root"
+        :data-invalid="invalid || void 0"
+        :data-readonly="props.readonly || void 0"
+        :disabled="props.disabled"
+    >
+        <!--
+            El estado inválido viaja como `data-invalid` y no como `aria-invalid`: un `fieldset`
+            se expone como `role="group"`, donde `aria-invalid` no está permitido y cada lector de
+            pantalla lo trata a su manera. El atributo de datos es además el gancho de tematización.
+            Solo lectura viaja igual y por la misma razón, con una limitación conocida: `role="group"`
+            tampoco admite `aria-readonly`, así que el estado se ve pero no se anuncia, que es donde
+            está también el sistema de origen.
+        -->
+        <legend :class="ui.legend">{{ props.legendText }}</legend>
+
+        <div :class="ui.options">
+            <Checkbox
+                v-for="item in props.items"
+                :key="String(item.value)"
+                :disabled="item.disabled"
+                :labelText="item.label"
+                :modelValue="isSelected(item.value)"
+                :name="props.name"
+                :value="String(item.value)"
+                @update:model-value="toggle(item.value, $event)"
+            />
+            <slot />
+        </div>
+
+        <div
+            v-if="message"
+            :class="ui.validation"
+        >
+            <Icon
+                v-if="stateIcon"
+                :class="ui.icon"
+                :name="stateIcon"
+            />
+
+            <p
+                :id="messageId"
+                :class="cn(ui.helper, (props.invalid || props.warn) && ui.message)"
+            >
+                {{ message }}
+            </p>
+        </div>
+    </fieldset>
+</template>

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

@@ -0,0 +1,35 @@
+import type { CheckboxGroupProps, CheckboxGroupValue } from './CheckboxGroup.types.js';
+type __VLS_Props = CheckboxGroupProps;
+type __VLS_ModelProps = {
+    modelValue?: CheckboxGroupValue | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: CheckboxGroupValue | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: CheckboxGroupValue | undefined) => any) | undefined;
+}>, {
+    disabled: boolean;
+    invalid: boolean;
+    warn: boolean;
+    orientation: import("#vuno/types/control").ControlOrientation;
+    name: string;
+    helperText: string;
+    readonly: boolean;
+    items: import("#vuno/types/control").OptionItem[];
+    ui: import("../../types/slots.js").ComponentUi<"checkboxGroup">;
+    invalidText: string;
+    warnText: 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/CheckboxGroup/internal/context.d.ts

@@ -0,0 +1,19 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+/**
+ * Lo que `CheckboxGroup` reparte a las casillas que lo componen.
+ *
+ * Solo viajan los dos estados que una casilla dentro de un grupo puede
+ * **pintar o impedir**. Deshabilitado no está porque no hace falta: el grupo es
+ * un `fieldset` y el navegador ya deshabilita a sus descendientes, de modo que
+ * el atributo, el comportamiento y las variantes `disabled:*` del tema
+ * funcionan sin que nadie los reenvíe. El aviso tampoco, porque dentro de un
+ * grupo el mensaje de cada casilla se calla —eso es lo que hace el sistema de
+ * origen— y un aviso sin mensaje no cambia nada de lo que se ve.
+ */
+export type CheckboxGroupContext = {
+    /** El error es del conjunto y se dibuja en el borde de cada caja. */
+    invalid: ComputedRef<boolean>;
+    /** Impide el cambio sin sacar las casillas del recorrido de foco. */
+    readonly: ComputedRef<boolean>;
+};
+export declare const checkboxGroupContextKey: InjectionKey<CheckboxGroupContext>;

package/dist/runtime/app/components/CheckboxGroup/internal/context.js

@@ -0,0 +1 @@
+export const checkboxGroupContextKey = Symbol("checkbox-group");

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

@@ -0,0 +1,21 @@
+import type { ClickableTileProps } from './ClickableTile.types.js';
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<ClickableTileProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ClickableTileProps> & Readonly<{}>, {
+    disabled: boolean;
+    icon: string;
+    to: import("vue-router").RouteLocationRaw;
+    ui: import("../../types/slots.js").ComponentUi<"tile">;
+    href: string;
+    rel: string;
+    target: 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/ClickableTile/ClickableTile.types.d.ts

@@ -0,0 +1,25 @@
+import type { RouteLocationRaw } from 'vue-router';
+import type { ComponentUi } from '#vuno/types/slots';
+export type ClickableTileProps = {
+    /**
+     * Un `<a>` no admite `disabled`. Igual que `Link`, la tile deshabilitada
+     * pierde el destino, conserva el papel con `role="link"`, lo anuncia con
+     * `aria-disabled` y sale del recorrido de foco.
+     */
+    disabled?: boolean;
+    href?: string;
+    /**
+     * Icono de la esquina inferior derecha. Vuno recomienda la flecha
+     * —`carbon:arrow-right`— con el color `$icon-interactive` para indicar que
+     * la tile navega, pero no la pone de serie: mientras no exista, la tile no
+     * dibuja nada. Deshabilitada el icono desaparece, porque anuncia un destino
+     * que ya no se puede seguir.
+     */
+    icon?: string;
+    /** Sustituye al `noopener` que Vuno añade con `target="_blank"`. */
+    rel?: string;
+    target?: string;
+    /** Destino de `NuxtLink`. Es la extensión de Vuno sobre el contrato de origen. */
+    to?: RouteLocationRaw;
+    ui?: ComponentUi<'tile'>;
+};

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

@@ -0,0 +1,67 @@
+<script setup>
+import { computed, useAttrs } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import { NuxtLink } from "#components";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "ClickableTile", inheritAttrs: false });
+const props = defineProps({
+  disabled: { type: Boolean, required: false, default: false },
+  href: { type: String, required: false, default: void 0 },
+  icon: { type: String, required: false, default: void 0 },
+  rel: { type: String, required: false, default: void 0 },
+  target: { type: String, required: false, default: void 0 },
+  to: { type: null, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+defineSlots();
+const attrs = useAttrs();
+const routed = computed(() => !props.disabled && props.to !== void 0);
+const root = computed(() => routed.value ? NuxtLink : "a");
+const activatable = computed(() => !props.disabled && props.to === void 0 && props.href === void 0);
+const rootAttributes = computed(() => {
+  const contract = {
+    "aria-disabled": props.disabled ? "true" : void 0,
+    href: props.disabled || routed.value ? void 0 : props.href,
+    rel: props.rel ?? (props.target === "_blank" ? "noopener" : void 0),
+    role: props.disabled ? "link" : void 0,
+    tabindex: props.disabled ? -1 : activatable.value ? 0 : void 0,
+    target: props.target,
+    to: routed.value ? props.to : void 0
+  };
+  for (const [key, value] of Object.entries(contract)) if (value === void 0) delete contract[key];
+  return { ...attrs, ...contract };
+});
+const ui = useTheme(
+  "tile",
+  () => props.ui,
+  () => ({ disabled: String(props.disabled), interactive: "true", variant: "clickable" })
+);
+function blockDisabled(event) {
+  if (!props.disabled) return;
+  event.preventDefault();
+  event.stopImmediatePropagation();
+}
+function activateWithKey(event) {
+  if (!activatable.value || event.key !== "Enter" && event.key !== " ") return;
+  const target = event.currentTarget;
+  event.preventDefault();
+  target.click();
+}
+</script>
+
+<template>
+    <component
+        :is="root"
+        v-bind="rootAttributes"
+        :class="ui.root"
+        @click.capture="blockDisabled"
+        @keydown="activateWithKey"
+    >
+        <slot />
+        <Icon
+            v-if="props.icon"
+            :class="ui.icon"
+            :name="props.icon"
+        />
+    </component>
+</template>

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

@@ -0,0 +1,21 @@
+import type { ClickableTileProps } from './ClickableTile.types.js';
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<ClickableTileProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ClickableTileProps> & Readonly<{}>, {
+    disabled: boolean;
+    icon: string;
+    to: import("vue-router").RouteLocationRaw;
+    ui: import("../../types/slots.js").ComponentUi<"tile">;
+    href: string;
+    rel: string;
+    target: 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/CodeSnippet/CodeSnippet.d.vue.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/CodeSnippet.theme.d.ts

@@ -0,0 +1,101 @@
+export declare const codeSnippetTheme: Record<"codeSnippet", {
+    readonly compoundVariants: [{
+        readonly class: {
+            readonly root: "pe-0 ps-0";
+        };
+        readonly noCopy: "true";
+        readonly type: "single";
+    }, {
+        readonly class: {
+            readonly pre: "pe-0";
+        };
+        readonly noCopy: "true";
+        readonly type: "multi";
+    }, {
+        readonly class: {
+            readonly root: "inline-block cursor-auto hover:bg-(--vuno-layer-01) active:bg-(--vuno-layer-01)";
+        };
+        readonly noCopy: "true";
+        readonly type: "inline";
+    }, {
+        readonly class: {
+            readonly container: "pb-4";
+        };
+        readonly expanded: "true";
+        readonly type: "multi";
+    }, {
+        readonly class: {
+            readonly pre: "break-words whitespace-pre-wrap";
+        };
+        readonly type: "multi";
+        readonly wrapText: "true";
+    }, {
+        readonly class: {
+            readonly root: "text-(--vuno-text-disabled)";
+        };
+        readonly disabled: "true";
+        readonly type: "multi";
+    }, {
+        readonly class: {
+            readonly root: "text-(--vuno-text-disabled)";
+        };
+        readonly disabled: "true";
+        readonly type: "single";
+    }];
+    readonly slots: {
+        readonly code: "font-mono text-xs leading-4 tracking-[0.32px]";
+        readonly container: "relative";
+        /** Se funde en el `ui` del botón, así que `tailwind-merge` resuelve los choques. */
+        readonly 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)";
+        readonly 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.
+         */
+        readonly 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)";
+        readonly 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)";
+        readonly expandIcon: "transition-transform duration-(--vuno-duration-moderate-01) ease-(--vuno-easing-standard-productive) group-disabled:text-(--vuno-icon-disabled) motion-reduce:transition-none";
+        readonly expandLabel: "relative -top-px";
+        readonly live: "sr-only";
+        readonly pre: "m-0 font-mono text-xs leading-4 tracking-[0.32px]";
+        readonly root: "group";
+    };
+    readonly variants: {
+        readonly disabled: {
+            readonly false: {};
+            readonly true: {};
+        };
+        readonly expanded: {
+            readonly false: {};
+            readonly true: {
+                readonly expandIcon: "rotate-180";
+            };
+        };
+        readonly noCopy: {
+            readonly false: {};
+            readonly true: {};
+        };
+        readonly type: {
+            readonly inline: {
+                readonly code: "px-2 whitespace-pre";
+                readonly 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]";
+            };
+            readonly multi: {
+                readonly container: "order-1 w-full overflow-auto [--snippet-fade:to_right] rtl:[--snippet-fade:to_left] [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) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) group-focus-within:[mask-image:none] motion-reduce:transition-none";
+                readonly copy: "end-2 top-2 z-10";
+                readonly pre: "pb-6 pe-6";
+                readonly 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]";
+            };
+            readonly single: {
+                readonly container: "flex h-full min-w-0 items-center overflow-x-auto ps-4 [--snippet-fade:to_right] rtl:[--snippet-fade:to_left] [mask-image:linear-gradient(var(--snippet-fade),#000_calc(100%_-_2rem),transparent_100%)] focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) group-focus-within:[mask-image:none]";
+                readonly pre: "pe-8 whitespace-pre";
+                readonly 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]";
+            };
+        };
+        readonly wrapText: {
+            readonly false: {};
+            readonly true: {};
+        };
+    };
+}>;