@groupteknology/vuno 2.0.0 → 4.0.0

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

@@ -0,0 +1,23 @@
+import type { InlineLoadingProps, InlineLoadingStatus } from './InlineLoading.types.js';
+type __VLS_Slots = {
+    description?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<InlineLoadingProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    success: () => any;
+}, string, import("vue").PublicProps, Readonly<InlineLoadingProps> & Readonly<{
+    onSuccess?: (() => any) | undefined;
+}>, {
+    description: string;
+    status: InlineLoadingStatus;
+    ui: import("../../types/slots.js").ComponentUi<"inlineLoading">;
+    iconDescription: string;
+    successDelay: number;
+}, {}, {}, {}, 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/InlineLoading/InlineLoading.theme.d.ts

@@ -0,0 +1,21 @@
+export declare const inlineLoadingTheme: Record<"inlineLoading", {
+    readonly slots: {
+        readonly animation: "relative me-2 flex items-center justify-center";
+        readonly assistive: "sr-only";
+        readonly icon: "size-4 shrink-0";
+        readonly root: "flex min-h-8 w-full items-center text-(--vuno-text-secondary)";
+        readonly text: "text-sm leading-[1.125rem] tracking-[0.16px]";
+    };
+    readonly variants: {
+        readonly status: {
+            readonly active: {};
+            readonly error: {
+                readonly icon: "text-(--vuno-support-error)";
+            };
+            readonly finished: {
+                readonly icon: "text-(--vuno-support-success)";
+            };
+            readonly inactive: {};
+        };
+    };
+}>;

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

@@ -0,0 +1,18 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const inlineLoadingTheme = defineTheme("inlineLoading", {
+  slots: {
+    animation: "relative me-2 flex items-center justify-center",
+    assistive: "sr-only",
+    icon: "size-4 shrink-0",
+    root: "flex min-h-8 w-full items-center text-(--vuno-text-secondary)",
+    text: "text-sm leading-[1.125rem] tracking-[0.16px]"
+  },
+  variants: {
+    status: {
+      active: {},
+      error: { icon: "text-(--vuno-support-error)" },
+      finished: { icon: "text-(--vuno-support-success)" },
+      inactive: {}
+    }
+  }
+});

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

@@ -0,0 +1,14 @@
+import type { ComponentUi } from '#vuno/types/slots';
+/** Los cuatro estados de Vuno, en el mismo orden público. */
+export type InlineLoadingStatus = 'active' | 'error' | 'finished' | 'inactive';
+export type InlineLoadingProps = {
+    /** Texto de estado junto al indicador. Es opcional y también admite el slot `description`. */
+    description?: string;
+    /** Nombre accesible del indicador. Sin él se usa el respaldo del estado. */
+    iconDescription?: string;
+    /** Estado del proceso. */
+    status?: InlineLoadingStatus;
+    /** Demora en milisegundos antes de emitir `success` al entrar en `finished`. */
+    successDelay?: number;
+    ui?: ComponentUi<'inlineLoading'>;
+};

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

@@ -0,0 +1,70 @@
+<script setup>
+import { computed, onBeforeUnmount, watch } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import Loading from "#vuno/components/Loading/Loading.vue";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "InlineLoading" });
+const props = defineProps({
+  description: { type: String, required: false, default: void 0 },
+  iconDescription: { type: String, required: false, default: void 0 },
+  status: { type: String, required: false, default: "active" },
+  successDelay: { type: Number, required: false, default: 1500 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const emit = defineEmits(["success"]);
+const slots = defineSlots();
+const ui = useTheme(
+  "inlineLoading",
+  () => props.ui,
+  () => ({ status: props.status })
+);
+const statusLabels = { active: "Cargando", error: "Error", finished: "Completado", inactive: "" };
+const iconLabel = computed(() => props.iconDescription ?? statusLabels[props.status]);
+const icon = computed(() => props.status === "finished" ? "carbon:checkmark-filled" : "carbon:error-filled");
+const hasText = computed(() => Boolean(props.description || slots.description));
+let timer;
+watch(
+  () => [props.status, props.successDelay],
+  ([status, delay]) => {
+    if (timer) clearTimeout(timer);
+    timer = status === "finished" ? setTimeout(() => emit("success"), delay) : void 0;
+  },
+  { immediate: true }
+);
+onBeforeUnmount(() => {
+  if (timer) clearTimeout(timer);
+});
+</script>
+
+<template>
+    <div
+        :aria-live="props.status === 'inactive' ? 'off' : 'assertive'"
+        :class="ui.root"
+    >
+        <div
+            v-if="props.status !== 'inactive'"
+            :class="ui.animation"
+        >
+            <Loading
+                v-if="props.status === 'active'"
+                :description="iconLabel"
+                small
+                :withOverlay="false"
+            />
+            <template v-else>
+                <Icon
+                    :class="ui.icon"
+                    :name="icon"
+                />
+                <!-- El icono es decorativo; el estado se expone como texto porque Vuno lo pone en el `<title>` del SVG. -->
+                <span :class="ui.assistive">{{ iconLabel }}</span>
+            </template>
+        </div>
+        <div
+            v-if="hasText"
+            :class="ui.text"
+        >
+            <slot name="description">{{ props.description }}</slot>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,23 @@
+import type { InlineLoadingProps, InlineLoadingStatus } from './InlineLoading.types.js';
+type __VLS_Slots = {
+    description?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<InlineLoadingProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    success: () => any;
+}, string, import("vue").PublicProps, Readonly<InlineLoadingProps> & Readonly<{
+    onSuccess?: (() => any) | undefined;
+}>, {
+    description: string;
+    status: InlineLoadingStatus;
+    ui: import("../../types/slots.js").ComponentUi<"inlineLoading">;
+    iconDescription: string;
+    successDelay: number;
+}, {}, {}, {}, 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/InlineNotification/InlineNotification.d.vue.ts

@@ -0,0 +1,27 @@
+import type { InlineNotificationProps } from './InlineNotification.types.js';
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<InlineNotificationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<InlineNotificationProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {
+    title: string;
+    kind: import("./InlineNotification.types.js").NotificationKind;
+    lowContrast: boolean;
+    hideCloseButton: boolean;
+    subtitle: string;
+    ui: import("../../types/slots.js").ComponentUi<"inlineNotification">;
+    closeButtonLabel: string;
+    statusIconDescription: string;
+    role: import("./InlineNotification.types.js").NotificationRole | null;
+}, {}, {}, {}, 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/InlineNotification/InlineNotification.theme.d.ts

@@ -0,0 +1,132 @@
+export declare const inlineNotificationTheme: Record<"inlineNotification", {
+    readonly compoundVariants: [{
+        readonly class: {
+            readonly root: "before:pointer-events-none before:absolute before:inset-0 before:border before:border-s-0 before:border-(--vuno-notify-accent) before:opacity-40 before:content-['']";
+        };
+        readonly lowContrast: "true";
+        readonly variant: "actionable";
+    }, {
+        readonly class: {
+            readonly root: "before:pointer-events-none before:absolute before:inset-0 before:border before:border-s-0 before:border-(--vuno-notify-accent) before:opacity-40 before:content-['']";
+        };
+        readonly lowContrast: "true";
+        readonly variant: "callout";
+    }, {
+        readonly class: {
+            readonly root: "before:pointer-events-none before:absolute before:inset-0 before:border before:border-s-0 before:border-(--vuno-notify-accent) before:opacity-40 before:content-['']";
+        };
+        readonly lowContrast: "true";
+        readonly variant: "inline";
+    }, {
+        readonly class: {
+            readonly action: "me-2 min-[42rem]:me-2";
+        };
+        readonly hideCloseButton: "true";
+        readonly variant: "actionable";
+    }, {
+        readonly class: {
+            readonly action: "me-2";
+        };
+        readonly hideCloseButton: "true";
+        readonly variant: "actionableToast";
+    }];
+    readonly slots: {
+        /** Clases que la acción entrega a `Button` por su prop `ui`. */
+        readonly action: "";
+        readonly actions: "flex";
+        readonly assistive: "sr-only";
+        readonly caption: "text-sm leading-[1.125rem] tracking-[0.16px] break-words";
+        readonly close: "flex shrink-0 cursor-pointer appearance-none items-center justify-center border-0 bg-transparent p-0 text-(--vuno-notify-icon) outline-none transition-[outline-color,background-color] duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-notify-focus) motion-reduce:transition-none forced-colors:focus:outline-[Highlight]";
+        readonly closeIcon: "size-4 shrink-0";
+        readonly content: "";
+        readonly details: "flex";
+        readonly icon: "size-5 shrink-0 text-(--vuno-notify-accent)";
+        readonly root: "relative flex h-auto border-s-[3px] border-s-(--vuno-notify-accent) bg-(--vuno-notify-background) text-(--vuno-notify-text) forced-colors:outline forced-colors:outline-solid forced-colors:outline-1 [&_a]:text-(--vuno-notify-link) [&_a]:no-underline [&_a:hover]:underline [&_a:focus]:outline-solid [&_a:focus]:outline-1 [&_a:focus]:outline-(--vuno-notify-link-focus)";
+        readonly subtitle: "text-sm leading-[1.125rem] tracking-[0.16px] break-words";
+        readonly textWrapper: "";
+        readonly title: "text-sm leading-[1.125rem] font-semibold tracking-[0.16px] break-words";
+    };
+    readonly variants: {
+        readonly hideCloseButton: {
+            readonly false: {};
+            readonly true: {};
+        };
+        readonly kind: {
+            readonly error: {
+                readonly root: "[--vuno-notify-support:var(--vuno-support-error)] [--vuno-notify-support-inverse:var(--vuno-support-error-inverse)] [--vuno-notify-surface:var(--vuno-notification-background-error)]";
+            };
+            readonly info: {
+                readonly root: "[--vuno-notify-support:var(--vuno-support-info)] [--vuno-notify-support-inverse:var(--vuno-support-info-inverse)] [--vuno-notify-surface:var(--vuno-notification-background-info)]";
+            };
+            readonly 'info-square': {
+                readonly root: "[--vuno-notify-support:var(--vuno-support-info)] [--vuno-notify-support-inverse:var(--vuno-support-info-inverse)] [--vuno-notify-surface:var(--vuno-notification-background-info)]";
+            };
+            readonly success: {
+                readonly root: "[--vuno-notify-support:var(--vuno-support-success)] [--vuno-notify-support-inverse:var(--vuno-support-success-inverse)] [--vuno-notify-surface:var(--vuno-notification-background-success)]";
+            };
+            readonly warning: {
+                readonly root: "[--vuno-notify-support:var(--vuno-support-warning)] [--vuno-notify-support-inverse:var(--vuno-support-warning-inverse)] [--vuno-notify-surface:var(--vuno-notification-background-warning)]";
+            };
+            readonly 'warning-alt': {
+                readonly root: "[--vuno-notify-support:var(--vuno-support-warning)] [--vuno-notify-support-inverse:var(--vuno-support-warning-inverse)] [--vuno-notify-surface:var(--vuno-notification-background-warning)]";
+            };
+        };
+        readonly lowContrast: {
+            readonly false: {
+                readonly root: "[--vuno-notify-accent:var(--vuno-notify-support-inverse)] [--vuno-notify-action-hover:var(--vuno-background-inverse-hover)] [--vuno-notify-background:var(--vuno-background-inverse)] [--vuno-notify-focus:var(--vuno-focus-inverse)] [--vuno-notify-icon:var(--vuno-icon-inverse)] [--vuno-notify-link:var(--vuno-link-inverse)] [--vuno-notify-link-focus:var(--vuno-link-inverse)] [--vuno-notify-tertiary:var(--vuno-notification-action-tertiary-inverse)] [--vuno-notify-tertiary-active:var(--vuno-notification-action-tertiary-inverse-active)] [--vuno-notify-tertiary-disabled:var(--vuno-notification-action-tertiary-inverse-text-on-color-disabled)] [--vuno-notify-tertiary-hover:var(--vuno-notification-action-tertiary-inverse-hover)] [--vuno-notify-tertiary-text:var(--vuno-notification-action-tertiary-inverse-text)] [--vuno-notify-text:var(--vuno-text-inverse)]";
+            };
+            readonly true: {
+                readonly root: "[--vuno-notify-accent:var(--vuno-notify-support)] [--vuno-notify-action-hover:var(--vuno-notification-action-hover,var(--vuno-layer-hover-01))] [--vuno-notify-background:var(--vuno-notify-surface)] [--vuno-notify-focus:var(--vuno-focus)] [--vuno-notify-icon:var(--vuno-icon-primary)] [--vuno-notify-link:var(--vuno-link-primary)] [--vuno-notify-link-focus:var(--vuno-focus)] [--vuno-notify-tertiary:var(--vuno-button-tertiary)] [--vuno-notify-tertiary-active:var(--vuno-button-tertiary-active)] [--vuno-notify-tertiary-disabled:var(--vuno-text-disabled)] [--vuno-notify-tertiary-hover:var(--vuno-button-tertiary-hover)] [--vuno-notify-tertiary-text:var(--vuno-text-inverse)] [--vuno-notify-text:var(--vuno-text-primary)]";
+            };
+        };
+        readonly variant: {
+            readonly actionable: {
+                readonly action: "h-8 mb-2 ms-10 text-(--vuno-notify-link) hover:bg-(--vuno-notify-action-hover) hover:text-(--vuno-notify-link) focus:border-transparent focus:shadow-none focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-notify-focus) active:bg-(--vuno-notify-action-hover) min-[42rem]:my-2 min-[42rem]:ms-0 min-[42rem]:me-0";
+                readonly caption: "pt-6";
+                readonly close: "absolute end-0 top-0 size-12 max-w-12 min-w-12 min-[42rem]:static";
+                readonly content: "flex flex-wrap text-sm leading-[1.125rem] tracking-[0.16px] break-words";
+                readonly root: "w-full max-w-72 min-h-12 min-w-72 flex-wrap min-[42rem]:max-w-[38rem] min-[42rem]:flex-nowrap min-[66rem]:max-w-[46rem] min-[99rem]:max-w-[52rem]";
+                readonly details: string;
+                readonly icon: string;
+                readonly textWrapper: string;
+                readonly title: string;
+            };
+            readonly actionableToast: {
+                readonly action: "mb-4 ms-[50px] border-(--vuno-notify-tertiary) bg-transparent px-4 text-(--vuno-notify-tertiary) hover:bg-(--vuno-notify-tertiary-hover) hover:text-(--vuno-notify-tertiary-text) focus:border-(--vuno-notify-focus) focus:bg-(--vuno-notify-tertiary) focus:text-(--vuno-notify-tertiary-text) focus:shadow-[inset_0_0_0_2px_var(--vuno-notify-focus),inset_0_0_0_1px_var(--vuno-notify-background)] active:border-transparent active:bg-(--vuno-notify-tertiary-active) active:text-(--vuno-notify-tertiary-text) disabled:border-transparent disabled:bg-transparent disabled:text-(--vuno-notify-tertiary-disabled) disabled:shadow-none";
+                readonly caption: "pt-6";
+                readonly close: "absolute end-0 top-0 size-12 max-w-12 min-w-12";
+                readonly content: "block text-sm leading-[1.125rem] tracking-[0.16px] break-words";
+                readonly details: "grow ms-[13px] me-12";
+                readonly icon: "mt-4 me-4";
+                readonly root: "w-full max-w-72 min-h-12 min-w-72 flex-wrap shadow-[0_2px_6px_0_rgb(0_0_0_/_0.2)]";
+                readonly textWrapper: "flex flex-wrap pt-[15px] pb-[23px]";
+                readonly title: "me-0";
+            };
+            readonly callout: {
+                readonly action: "h-8 mb-2 ms-10 text-(--vuno-notify-link) hover:bg-(--vuno-notify-action-hover) hover:text-(--vuno-notify-link) focus:border-transparent focus:shadow-none focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-notify-focus) active:bg-(--vuno-notify-action-hover) me-2 min-[42rem]:my-2 min-[42rem]:ms-0";
+                readonly root: "w-full max-w-72 min-h-12 min-w-72 flex-wrap min-[42rem]:max-w-[38rem] min-[42rem]:flex-nowrap min-[66rem]:max-w-[46rem] min-[99rem]:max-w-[52rem]";
+                readonly details: string;
+                readonly icon: string;
+                readonly textWrapper: string;
+                readonly title: string;
+            };
+            readonly inline: {
+                readonly close: "absolute end-0 top-0 size-12 max-w-12 min-w-12 min-[42rem]:static";
+                readonly root: "w-full max-w-72 min-h-12 min-w-72 flex-wrap min-[42rem]:max-w-[38rem] min-[42rem]:flex-nowrap min-[66rem]:max-w-[46rem] min-[99rem]:max-w-[52rem]";
+                readonly details: string;
+                readonly icon: string;
+                readonly textWrapper: string;
+                readonly title: string;
+            };
+            readonly toast: {
+                readonly caption: "pt-2";
+                readonly close: "ms-auto size-12 max-w-12 min-h-12 min-w-12 duration-[250ms] ease-[ease]";
+                readonly details: "mb-4 me-4 block";
+                readonly icon: "mt-4 me-4";
+                readonly root: "w-72 ps-[13px] shadow-[0_2px_6px_0_rgb(0_0_0_/_0.2)] min-[99rem]:w-88";
+                readonly subtitle: "mt-0 mb-4";
+                readonly title: "mt-4";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,116 @@
+import { defineTheme } from "#vuno/utils/theme";
+const lowContrastOutline = "before:pointer-events-none before:absolute before:inset-0 before:border before:border-s-0 before:border-(--vuno-notify-accent) before:opacity-40 before:content-['']";
+const flowBox = "w-full max-w-72 min-h-12 min-w-72 flex-wrap min-[42rem]:max-w-[38rem] min-[42rem]:flex-nowrap min-[66rem]:max-w-[46rem] min-[99rem]:max-w-[52rem]";
+const flowDetails = "grow ms-[13px] me-12 min-[42rem]:mx-[13px]";
+const ghostAction = "h-8 mb-2 ms-10 text-(--vuno-notify-link) hover:bg-(--vuno-notify-action-hover) hover:text-(--vuno-notify-link) focus:border-transparent focus:shadow-none focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-notify-focus) active:bg-(--vuno-notify-action-hover)";
+const flowText = { details: flowDetails, icon: "mt-[14px] me-4", textWrapper: "flex flex-wrap py-[15px]", title: "me-1" };
+const wrappedContent = "flex flex-wrap text-sm leading-[1.125rem] tracking-[0.16px] break-words";
+export const inlineNotificationTheme = defineTheme("inlineNotification", {
+  compoundVariants: [
+    /*
+     * El contorno tenue del bajo contraste. Vuno lo dibuja con un
+     * `::before` al 40 % de opacidad sobre los tres lados que no llevan el
+     * acento, y solo donde la notificación vive en el flujo: un toast ya
+     * se separa del fondo con su sombra.
+     */
+    { class: { root: lowContrastOutline }, lowContrast: "true", variant: "actionable" },
+    { class: { root: lowContrastOutline }, lowContrast: "true", variant: "callout" },
+    { class: { root: lowContrastOutline }, lowContrast: "true", variant: "inline" },
+    /*
+     * Sin cierre la acción pierde el vecino que la separaba del borde y
+     * Vuno le devuelve esos 8 px. Va aquí porque debe ganar al margen
+     * que la variante anula en pantallas anchas.
+     */
+    { class: { action: "me-2 min-[42rem]:me-2" }, hideCloseButton: "true", variant: "actionable" },
+    { class: { action: "me-2" }, hideCloseButton: "true", variant: "actionableToast" }
+  ],
+  slots: {
+    /** Clases que la acción entrega a `Button` por su prop `ui`. */
+    action: "",
+    actions: "flex",
+    assistive: "sr-only",
+    caption: "text-sm leading-[1.125rem] tracking-[0.16px] break-words",
+    close: "flex shrink-0 cursor-pointer appearance-none items-center justify-center border-0 bg-transparent p-0 text-(--vuno-notify-icon) outline-none transition-[outline-color,background-color] duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-notify-focus) motion-reduce:transition-none forced-colors:focus:outline-[Highlight]",
+    closeIcon: "size-4 shrink-0",
+    content: "",
+    details: "flex",
+    icon: "size-5 shrink-0 text-(--vuno-notify-accent)",
+    root: "relative flex h-auto border-s-[3px] border-s-(--vuno-notify-accent) bg-(--vuno-notify-background) text-(--vuno-notify-text) forced-colors:outline forced-colors:outline-solid forced-colors:outline-1 [&_a]:text-(--vuno-notify-link) [&_a]:no-underline [&_a:hover]:underline [&_a:focus]:outline-solid [&_a:focus]:outline-1 [&_a:focus]:outline-(--vuno-notify-link-focus)",
+    subtitle: "text-sm leading-[1.125rem] tracking-[0.16px] break-words",
+    textWrapper: "",
+    title: "text-sm leading-[1.125rem] font-semibold tracking-[0.16px] break-words"
+  },
+  variants: {
+    /* La combinación con `variant` vive en `compoundVariants`: solo importa con acción. */
+    hideCloseButton: {
+      false: {},
+      true: {}
+    },
+    kind: {
+      error: { root: "[--vuno-notify-support:var(--vuno-support-error)] [--vuno-notify-support-inverse:var(--vuno-support-error-inverse)] [--vuno-notify-surface:var(--vuno-notification-background-error)]" },
+      info: { root: "[--vuno-notify-support:var(--vuno-support-info)] [--vuno-notify-support-inverse:var(--vuno-support-info-inverse)] [--vuno-notify-surface:var(--vuno-notification-background-info)]" },
+      "info-square": { root: "[--vuno-notify-support:var(--vuno-support-info)] [--vuno-notify-support-inverse:var(--vuno-support-info-inverse)] [--vuno-notify-surface:var(--vuno-notification-background-info)]" },
+      success: { root: "[--vuno-notify-support:var(--vuno-support-success)] [--vuno-notify-support-inverse:var(--vuno-support-success-inverse)] [--vuno-notify-surface:var(--vuno-notification-background-success)]" },
+      warning: { root: "[--vuno-notify-support:var(--vuno-support-warning)] [--vuno-notify-support-inverse:var(--vuno-support-warning-inverse)] [--vuno-notify-surface:var(--vuno-notification-background-warning)]" },
+      "warning-alt": { root: "[--vuno-notify-support:var(--vuno-support-warning)] [--vuno-notify-support-inverse:var(--vuno-support-warning-inverse)] [--vuno-notify-surface:var(--vuno-notification-background-warning)]" }
+    },
+    /*
+     * `--vuno-notification-action-hover` solo existe en los temas claros,
+     * así que el valor de reserva conserva el realce del fantasma en
+     * `dark-gray` y `dark`. En alto contraste el terciario invierte otra vez sus
+     * fichas, porque el fondo de la notificación ya es oscuro.
+     */
+    lowContrast: {
+      false: {
+        root: "[--vuno-notify-accent:var(--vuno-notify-support-inverse)] [--vuno-notify-action-hover:var(--vuno-background-inverse-hover)] [--vuno-notify-background:var(--vuno-background-inverse)] [--vuno-notify-focus:var(--vuno-focus-inverse)] [--vuno-notify-icon:var(--vuno-icon-inverse)] [--vuno-notify-link:var(--vuno-link-inverse)] [--vuno-notify-link-focus:var(--vuno-link-inverse)] [--vuno-notify-tertiary:var(--vuno-notification-action-tertiary-inverse)] [--vuno-notify-tertiary-active:var(--vuno-notification-action-tertiary-inverse-active)] [--vuno-notify-tertiary-disabled:var(--vuno-notification-action-tertiary-inverse-text-on-color-disabled)] [--vuno-notify-tertiary-hover:var(--vuno-notification-action-tertiary-inverse-hover)] [--vuno-notify-tertiary-text:var(--vuno-notification-action-tertiary-inverse-text)] [--vuno-notify-text:var(--vuno-text-inverse)]"
+      },
+      true: { root: "[--vuno-notify-accent:var(--vuno-notify-support)] [--vuno-notify-action-hover:var(--vuno-notification-action-hover,var(--vuno-layer-hover-01))] [--vuno-notify-background:var(--vuno-notify-surface)] [--vuno-notify-focus:var(--vuno-focus)] [--vuno-notify-icon:var(--vuno-icon-primary)] [--vuno-notify-link:var(--vuno-link-primary)] [--vuno-notify-link-focus:var(--vuno-focus)] [--vuno-notify-tertiary:var(--vuno-button-tertiary)] [--vuno-notify-tertiary-active:var(--vuno-button-tertiary-active)] [--vuno-notify-tertiary-disabled:var(--vuno-text-disabled)] [--vuno-notify-tertiary-hover:var(--vuno-button-tertiary-hover)] [--vuno-notify-tertiary-text:var(--vuno-text-inverse)] [--vuno-notify-text:var(--vuno-text-primary)]" }
+    },
+    /*
+     * `actionable` y `actionableToast` son la misma pieza con las dos
+     * presentaciones que Vuno le permite. Se declaran por separado
+     * porque cambian a la vez la caja, el tipo de acción y dónde queda el
+     * cierre.
+     */
+    variant: {
+      actionable: {
+        ...flowText,
+        action: `${ghostAction} min-[42rem]:my-2 min-[42rem]:ms-0 min-[42rem]:me-0`,
+        caption: "pt-6",
+        close: "absolute end-0 top-0 size-12 max-w-12 min-w-12 min-[42rem]:static",
+        content: wrappedContent,
+        root: flowBox
+      },
+      actionableToast: {
+        action: "mb-4 ms-[50px] border-(--vuno-notify-tertiary) bg-transparent px-4 text-(--vuno-notify-tertiary) hover:bg-(--vuno-notify-tertiary-hover) hover:text-(--vuno-notify-tertiary-text) focus:border-(--vuno-notify-focus) focus:bg-(--vuno-notify-tertiary) focus:text-(--vuno-notify-tertiary-text) focus:shadow-[inset_0_0_0_2px_var(--vuno-notify-focus),inset_0_0_0_1px_var(--vuno-notify-background)] active:border-transparent active:bg-(--vuno-notify-tertiary-active) active:text-(--vuno-notify-tertiary-text) disabled:border-transparent disabled:bg-transparent disabled:text-(--vuno-notify-tertiary-disabled) disabled:shadow-none",
+        caption: "pt-6",
+        close: "absolute end-0 top-0 size-12 max-w-12 min-w-12",
+        content: "block text-sm leading-[1.125rem] tracking-[0.16px] break-words",
+        details: "grow ms-[13px] me-12",
+        icon: "mt-4 me-4",
+        root: "w-full max-w-72 min-h-12 min-w-72 flex-wrap shadow-[0_2px_6px_0_rgb(0_0_0_/_0.2)]",
+        textWrapper: "flex flex-wrap pt-[15px] pb-[23px]",
+        title: "me-0"
+      },
+      callout: {
+        ...flowText,
+        action: `${ghostAction} me-2 min-[42rem]:my-2 min-[42rem]:ms-0`,
+        root: flowBox
+      },
+      inline: {
+        ...flowText,
+        close: "absolute end-0 top-0 size-12 max-w-12 min-w-12 min-[42rem]:static",
+        root: flowBox
+      },
+      toast: {
+        caption: "pt-2",
+        close: "ms-auto size-12 max-w-12 min-h-12 min-w-12 duration-[250ms] ease-[ease]",
+        details: "mb-4 me-4 block",
+        icon: "mt-4 me-4",
+        root: "w-72 ps-[13px] shadow-[0_2px_6px_0_rgb(0_0_0_/_0.2)] min-[99rem]:w-88",
+        subtitle: "mt-0 mb-4",
+        title: "mt-4"
+      }
+    }
+  }
+});

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

@@ -0,0 +1,44 @@
+import type { ComponentUi } from '#vuno/types/slots';
+/**
+ * Los seis estados de Vuno. `info-square` y `warning-alt` no son estados
+ * nuevos: comparten color con `info` y `warning` y solo cambian el glifo, que
+ * es lo que Vuno ofrece cuando el círculo se confunde con otra cosa del
+ * lienzo.
+ */
+export type NotificationKind = 'error' | 'info' | 'info-square' | 'success' | 'warning' | 'warning-alt';
+/**
+ * Los roles de región viva que Vuno admite en una notificación que no exige
+ * respuesta. `alertdialog` no está aquí: lo usa `ActionableNotification`, que
+ * además atrapa el foco.
+ */
+export type NotificationRole = 'alert' | 'log' | 'status';
+/** Lo que comparten las cuatro variantes: estado, contraste, textos y cierre. */
+export type NotificationProps = {
+    /** Nombre accesible del botón de cierre. */
+    closeButtonLabel?: string;
+    hideCloseButton?: boolean;
+    kind?: NotificationKind;
+    /**
+     * Fondo teñido y texto primario en vez del fondo invertido. Vuno reserva
+     * el alto contraste para lo crítico y recomienda el bajo cuando hay duda,
+     * pero su valor predeterminado sigue siendo el alto.
+     */
+    lowContrast?: boolean;
+    /**
+     * Texto solo para lectores de pantalla que nombra el icono de estado.
+     * El sistema de origen lo rellena con `"<kind> icon"` cuando falta; aquí queda vacío
+     * porque el estado ya viaja en el título y un texto en inglés fijo no se
+     * puede traducir desde `app.config`.
+     */
+    statusIconDescription?: string;
+    subtitle?: string;
+    title?: string;
+    ui?: ComponentUi<'inlineNotification'>;
+};
+export type InlineNotificationProps = NotificationProps & {
+    /**
+     * `null` saca la notificación de la región viva. No es Vuno: existe para
+     * cuando el contenedor ya anuncia el cambio y el doble anuncio molesta.
+     */
+    role?: NotificationRole | null;
+};

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

@@ -0,0 +1,82 @@
+<script setup>
+import { onMounted, useTemplateRef } from "vue";
+import { useIcons, useTheme } from "#vuno/composables/useTheme";
+import { interactiveChildren, notificationIcons } from "./notification";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "InlineNotification" });
+const props = defineProps({
+  closeButtonLabel: { type: String, required: false, default: "Cerrar notificaci\xF3n" },
+  hideCloseButton: { type: Boolean, required: false, default: false },
+  kind: { type: String, required: false, default: "error" },
+  lowContrast: { type: Boolean, required: false, default: false },
+  statusIconDescription: { type: String, required: false, default: void 0 },
+  subtitle: { type: String, required: false, default: void 0 },
+  title: { type: String, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 },
+  role: { type: [String, null], required: false, default: "status" }
+});
+const emit = defineEmits(["close"]);
+defineSlots();
+const icons = useIcons();
+const text = useTemplateRef("text");
+const ui = useTheme(
+  "inlineNotification",
+  () => props.ui,
+  () => ({ kind: props.kind, lowContrast: props.lowContrast ? "true" : "false", variant: "inline" })
+);
+onMounted(() => {
+  if (!import.meta.env.DEV || interactiveChildren(text.value).length === 0) return;
+  console.warn("[InlineNotification] El cuerpo no debe contener elementos accionables: usa `ActionableNotification` o `Callout`.");
+});
+</script>
+
+<template>
+    <div
+        :class="ui.root"
+        :role="props.role ?? void 0"
+    >
+        <div :class="ui.details">
+            <Icon
+                :class="ui.icon"
+                :name="notificationIcons[props.kind]"
+            />
+            <span
+                v-if="props.statusIconDescription"
+                :class="ui.assistive"
+            >
+                {{ props.statusIconDescription }}
+            </span>
+            <div
+                ref="text"
+                :class="ui.textWrapper"
+            >
+                <div
+                    v-if="props.title"
+                    :class="ui.title"
+                >
+                    {{ props.title }}
+                </div>
+                <div
+                    v-if="props.subtitle"
+                    :class="ui.subtitle"
+                >
+                    {{ props.subtitle }}
+                </div>
+                <slot />
+            </div>
+        </div>
+        <button
+            v-if="!props.hideCloseButton"
+            :aria-label="props.closeButtonLabel"
+            :class="ui.close"
+            :title="props.closeButtonLabel"
+            type="button"
+            @click="emit('close')"
+        >
+            <Icon
+                :class="ui.closeIcon"
+                :name="icons.close"
+            />
+        </button>
+    </div>
+</template>

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

@@ -0,0 +1,27 @@
+import type { InlineNotificationProps } from './InlineNotification.types.js';
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<InlineNotificationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<InlineNotificationProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {
+    title: string;
+    kind: import("./InlineNotification.types.js").NotificationKind;
+    lowContrast: boolean;
+    hideCloseButton: boolean;
+    subtitle: string;
+    ui: import("../../types/slots.js").ComponentUi<"inlineNotification">;
+    closeButtonLabel: string;
+    statusIconDescription: string;
+    role: import("./InlineNotification.types.js").NotificationRole | null;
+}, {}, {}, {}, 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/InlineNotification/notification.d.ts

@@ -0,0 +1,14 @@
+import type { NotificationKind } from './InlineNotification.types.js';
+/**
+ * Los iconos de estado de Vuno, siempre rellenos.
+ *
+ * No salen de `useIcons()` a propósito. La configuración del módulo solo
+ * declara cuatro claves —`notifyError`, `notifyInfo`, `notifySuccess` y
+ * `notifyWarning`— y tres de ellas apuntan hoy al glifo de contorno, que no es
+ * el que Vuno usa en una notificación; además no hay clave para
+ * `info-square` ni para `warning-alt`. Mientras eso siga así, la familia fija
+ * aquí los nombres correctos: es preferible un icono fiel y no configurable a
+ * uno configurable y equivocado.
+ */
+export declare const notificationIcons: Record<NotificationKind, string>;
+export declare function interactiveChildren(root: HTMLElement | null | undefined): HTMLElement[];

package/dist/runtime/app/components/InlineNotification/notification.js

@@ -0,0 +1,12 @@
+export const notificationIcons = {
+  error: "carbon:error-filled",
+  info: "carbon:information-filled",
+  "info-square": "carbon:information-square-filled",
+  success: "carbon:checkmark-filled",
+  warning: "carbon:warning-filled",
+  "warning-alt": "carbon:warning-alt-filled"
+};
+const interactiveSelector = 'a[href], audio[controls], button, input:not([type="hidden"]), select, summary, textarea, video[controls], [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex^="-"])';
+export function interactiveChildren(root) {
+  return [...root?.querySelectorAll(interactiveSelector) ?? []];
+}