@aerogel/core 0.0.0-next.9a02fcd3bcf698211dd7a71d4c48257c96dd7832 → 0.0.0-next.9a1c5ba39a454b316eba36ec7bdf579fed3d95d2

package/package.json

@@ -1,52 +1,38 @@
 {
     "name": "@aerogel/core",
-    "description": "The Lightest Solid",
-    "version": "0.0.0-next.9a02fcd3bcf698211dd7a71d4c48257c96dd7832",
-    "main": "dist/aerogel-core.cjs.js",
-    "module": "dist/aerogel-core.esm.js",
-    "types": "dist/aerogel-core.d.ts",
+    "version": "0.0.0-next.9a1c5ba39a454b316eba36ec7bdf579fed3d95d2",
+    "type": "module",
     "sideEffects": false,
+    "exports": {
+        "types": "./dist/aerogel-core.d.ts",
+        "default": "./dist/aerogel-core.js"
+    },
+    "files": [
+        "src",
+        "dist"
+    ],
+    "license": "MIT",
+    "author": "Noel De Martin",
+    "repository": "github:NoelDeMartin/aerogel",
     "scripts": {
-        "build": "rm dist -rf && npm run build:js && npm run build:types",
-        "build:js": "noeldemartin-build-javascript",
-        "build:types": "noeldemartin-build-types",
-        "histoire": "histoire dev",
+        "build": "vite build && ./scripts/fix-types.sh",
         "lint": "noeldemartin-lint src",
-        "publish-next": "noeldemartin-publish-next",
         "test": "vitest --run",
-        "test:ci": "vitest --run --reporter verbose"
-    },
-    "engines": {
-        "node": ">=18.x"
+        "test:ci": "vitest --run --reporter verbose",
+        "verify": "noeldemartin-verify"
     },
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/NoelDeMartin/aerogeljs.git"
-    },
-    "keywords": [
-        "javascript",
-        "framework",
-        "solid"
-    ],
-    "author": "Noel De Martin",
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/NoelDeMartin/aerogeljs/issues"
+    "peerDependencies": {
+        "vue": "^3.5.0"
     },
     "dependencies": {
-        "@headlessui/vue": "^1.7.14",
-        "@noeldemartin/utils": "0.5.1-next.49cc6c9b4a20930cbf922a949135981791acc5c3",
-        "dompurify": "^3.0.3",
-        "marked": "^5.0.4",
+        "@noeldemartin/utils": "0.7.0-next.31cf84b4b57092d146528f27579439783aca71bb",
+        "dompurify": "^3.2.4",
+        "marked": "^15.0.7",
         "pinia": "^2.1.6",
-        "vue": "^3.3.0"
+        "reka-ui": "^2.2.0"
     },
     "devDependencies": {
-        "@aerogel/vite": "*",
-        "@histoire/plugin-vue": "^0.17.6",
-        "@types/dompurify": "^3.0.2",
-        "@types/marked": "^5.0.0",
-        "tailwindcss": "^3.3.5"
+        "@aerogel/vite": "*"
     },
     "eslintConfig": {
         "extends": [

package/src/bootstrap/bootstrap.test.ts

@@ -1,17 +1,16 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { createApp } from 'vue';
-import { mock } from '@noeldemartin/utils';
+import { mock } from '@noeldemartin/testing';
 import type { Component } from 'vue';
 
-import Events from '@/services/Events';
-import initialFocus from '@/directives/initial-focus';
+import Events from '@aerogel/core/services/Events';
+import measure from '@aerogel/core/directives/measure';
 
 import { bootstrap } from './index';
 
 describe('Aerogel', () => {
 
     beforeEach(() => {
-        vi.stubGlobal('document', { getElementById: () => null });
         vi.mock('vue', async () => {
             const vue = (await vi.importActual('vue')) as Object;
 
@@ -49,10 +48,7 @@ describe('Aerogel', () => {
         await bootstrap(rootComponent);
 
         // Assert
-        expect(vi.mocked(createApp).mock.results[0]?.value.directive).toHaveBeenCalledWith(
-            'initial-focus',
-            initialFocus,
-        );
+        expect(vi.mocked(createApp).mock.results[0]?.value.directive).toHaveBeenCalledWith('measure', measure);
     });
 
 });

package/src/bootstrap/index.ts

@@ -1,21 +1,25 @@
 import { createApp } from 'vue';
-import type { App, Component } from 'vue';
-
-import directives from '@/directives';
-import errors from '@/errors';
-import Events from '@/services/Events';
-import lang from '@/lang';
-import services from '@/services';
-import testing from '@/testing';
-import ui from '@/ui';
-import { installPlugins } from '@/plugins';
-import type { AerogelOptions } from '@/bootstrap/options';
-
-export { AerogelOptions };
-
-export async function bootstrapApplication(app: App, options: AerogelOptions = {}): Promise<void> {
+import { isDevelopment } from '@noeldemartin/utils';
+import type { App as AppInstance, Component } from 'vue';
+
+import App from '@aerogel/core/services/App';
+import directives from '@aerogel/core/directives';
+import errors from '@aerogel/core/errors';
+import Events from '@aerogel/core/services/Events';
+import lang from '@aerogel/core/lang';
+import services from '@aerogel/core/services';
+import testing from '@aerogel/core/testing';
+import ui from '@aerogel/core/ui';
+import { installPlugins } from '@aerogel/core/plugins';
+import type { AerogelOptions } from '@aerogel/core/bootstrap/options';
+
+export type { AerogelOptions };
+
+export async function bootstrapApplication(app: AppInstance, options: AerogelOptions = {}): Promise<void> {
     const plugins = [testing, directives, errors, lang, services, ui, ...(options.plugins ?? [])];
 
+    App.instance = app;
+
     await installPlugins(plugins, app, options);
     await options.install?.(app);
     await Events.emit('application-ready');
@@ -24,6 +28,11 @@ export async function bootstrapApplication(app: App, options: AerogelOptions = {
 export async function bootstrap(rootComponent: Component, options: AerogelOptions = {}): Promise<void> {
     const app = createApp(rootComponent);
 
+    if (isDevelopment()) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (window as any).$aerogel = app;
+    }
+
     await bootstrapApplication(app, options);
 
     app.mount('#app');
@@ -32,7 +41,7 @@ export async function bootstrap(rootComponent: Component, options: AerogelOption
     await Events.emit('application-mounted');
 }
 
-declare module '@/services/Events' {
+declare module '@aerogel/core/services/Events' {
     export interface EventsPayload {
         'application-ready': void;
         'application-mounted': void;

package/src/bootstrap/options.ts

@@ -1,6 +1,6 @@
 import type { App } from 'vue';
 
-import type { Plugin } from '@/plugins';
+import type { Plugin } from '@aerogel/core/plugins';
 
 export interface AerogelOptions {
     plugins?: Plugin[];

package/src/components/AGAppLayout.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import { UIComponents } from '@/ui/UI';
+import { UIComponents } from '@aerogel/core/ui/UI';
 
 import AGAppOverlays from './AGAppOverlays.vue';
 </script>

package/src/components/AGAppModals.vue

@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import UI from '@/ui/UI';
+import UI from '@aerogel/core/ui/UI';
 
 import AGModalContext from './modals/AGModalContext.vue';
 

package/src/components/AGAppOverlays.vue

@@ -11,7 +11,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
-import { useEvent } from '@/utils/composition/events';
+import { useEvent } from '@aerogel/core/utils/composition/events';
 
 import AGAppModals from './AGAppModals.vue';
 import AGAppSnackbars from './AGAppSnackbars.vue';

package/src/components/AGAppSnackbars.vue

@@ -1,5 +1,5 @@
 <template>
-    <div aria-live="assertive" class="z-60 pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:p-6">
+    <div aria-live="assertive" class="pointer-events-none fixed inset-0 z-50 flex items-end px-4 py-6 sm:p-6">
         <div class="flex w-full flex-col items-end space-y-4">
             <component
                 :is="snackbar.component"

package/src/components/composition.ts

@@ -0,0 +1,23 @@
+import { customRef } from 'vue';
+import type { Ref } from 'vue';
+
+import { getElement } from '@aerogel/core/components/utils';
+
+export function elementRef(): Ref<HTMLElement | undefined> {
+    return customRef((track, trigger) => {
+        let value: HTMLElement | undefined = undefined;
+
+        return {
+            get() {
+                track();
+
+                return value;
+            },
+            set(newValue) {
+                value = getElement(newValue);
+
+                trigger();
+            },
+        };
+    });
+}

package/src/components/contracts/Modal.ts

@@ -0,0 +1,16 @@
+import type { Ref } from 'vue';
+
+export interface IModal {
+    cancellable: Ref<boolean>;
+    close(result?: unknown): Promise<void>;
+}
+
+export interface IModalProps {
+    cancellable: boolean;
+    title: string | null;
+    description: string | null;
+}
+
+export interface IModalDefaultSlotProps {
+    close(result?: unknown): Promise<void>;
+}

package/src/components/contracts/index.ts

@@ -0,0 +1,2 @@
+export * from './Modal';
+export * from './shared';

package/src/components/contracts/shared.ts

@@ -0,0 +1,9 @@
+import type { Ref } from 'vue';
+
+export interface HasElement {
+    $el: Readonly<Ref<HTMLElement | undefined>>;
+}
+
+export interface __SetsElement {
+    __setElement(element?: HTMLElement): void;
+}

package/src/components/forms/AGButton.vue

@@ -7,8 +7,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { enumProp } from '@/utils/vue';
-import { Colors } from '@/components/constants';
+import { enumProp } from '@aerogel/core/utils/vue';
+import { Colors } from '@aerogel/core/components/constants';
 
 import AGHeadlessButton from '../headless/forms/AGHeadlessButton.vue';
 

package/src/components/forms/AGCheckbox.vue

@@ -24,9 +24,10 @@
 </template>
 
 <script setup lang="ts">
-import { componentRef, stringProp } from '@/utils/vue';
+import { componentRef, stringProp } from '@aerogel/core/utils/vue';
 
-import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
+import { useInputEmits } from '@aerogel/core/components/headless/forms/AGHeadlessInput';
+import type { IAGHeadlessInput } from '@aerogel/core/components/headless/forms/AGHeadlessInput';
 
 import AGHeadlessInput from '../headless/forms/AGHeadlessInput.vue';
 import AGHeadlessInputError from '../headless/forms/AGHeadlessInputError.vue';
@@ -35,7 +36,7 @@ import AGHeadlessInputLabel from '../headless/forms/AGHeadlessInputLabel.vue';
 
 defineProps({ name: stringProp() });
 defineOptions({ inheritAttrs: false });
-defineEmits(['update:modelValue']);
+defineEmits(useInputEmits());
 
 const $input = componentRef<IAGHeadlessInput>();
 </script>

package/src/components/forms/AGForm.vue

@@ -1,26 +1,25 @@
 <template>
-    <form @submit.prevent="submit">
+    <form @submit.prevent="form?.submit()">
         <slot />
     </form>
 </template>
 
 <script setup lang="ts">
-import { provide } from 'vue';
+import { provide, watchEffect } from 'vue';
 
-import { objectProp } from '@/utils/vue';
-import type Form from '@/forms/Form';
+import { objectProp } from '@aerogel/core/utils/vue';
+import type Form from '@aerogel/core/forms/Form';
 
+let offSubmit: (() => void) | undefined;
 const props = defineProps({ form: objectProp<Form>() });
-
 const emit = defineEmits<{ submit: [] }>();
 
-provide('form', props.form);
+watchEffect((onCleanup) => {
+    offSubmit?.();
+    offSubmit = props.form?.on('submit', () => emit('submit'));
 
-function submit() {
-    if (props.form && !props.form.submit()) {
-        return;
-    }
+    onCleanup(() => offSubmit?.());
+});
 
-    emit('submit');
-}
+provide('form', props.form);
 </script>

package/src/components/forms/AGInput.vue

@@ -4,6 +4,7 @@
         class="relative flex flex-col items-center"
         :class="className"
         v-bind="props"
+        @update:model-value="$emit('update:modelValue', $event)"
     >
         <AGHeadlessInputLabel class="sr-only" />
         <AGHeadlessInputInput
@@ -13,6 +14,7 @@
                 'ring-1 ring-red-500': $input?.errors,
             }"
         />
+        <AGHeadlessInputDescription />
         <div class="absolute bottom-0 left-0 translate-y-full">
             <AGHeadlessInputError class="mt-1 text-sm text-red-500" />
         </div>
@@ -20,17 +22,19 @@
 </template>
 
 <script setup lang="ts">
-import { componentRef } from '@/utils/vue';
-import { useInputAttrs } from '@/utils/composition/forms';
-import { useInputProps } from '@/components/headless/forms/AGHeadlessInput';
-import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
+import { componentRef } from '@aerogel/core/utils/vue';
+import { useInputAttrs } from '@aerogel/core/utils/composition/forms';
+import { useInputEmits, useInputProps } from '@aerogel/core/components/headless/forms/AGHeadlessInput';
+import type { IAGHeadlessInput } from '@aerogel/core/components/headless/forms/AGHeadlessInput';
 
 import AGHeadlessInput from '../headless/forms/AGHeadlessInput.vue';
+import AGHeadlessInputDescription from '../headless/forms/AGHeadlessInputDescription.vue';
 import AGHeadlessInputError from '../headless/forms/AGHeadlessInputError.vue';
 import AGHeadlessInputInput from '../headless/forms/AGHeadlessInputInput.vue';
 import AGHeadlessInputLabel from '../headless/forms/AGHeadlessInputLabel.vue';
 
 defineOptions({ inheritAttrs: false });
+defineEmits(useInputEmits());
 
 const props = defineProps(useInputProps());
 const $input = componentRef<IAGHeadlessInput>();

package/src/components/forms/AGSelect.vue

@@ -5,10 +5,9 @@
         as="div"
         @update:model-value="$emit('update:modelValue', $event)"
     >
-        <AGHeadlessSelectLabel class="block text-sm font-medium leading-6 text-gray-900" />
         <div class="relative" :class="{ 'mt-2': $select?.label }">
-            <AGHeadlessSelectButton
-                class="relative w-full cursor-default bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-600"
+            <AGHeadlessSelectTrigger
+                class="relative w-full cursor-default bg-white py-1.5 pr-10 pl-3 text-left text-gray-900 ring-1 ring-gray-300 ring-inset focus:ring-2 focus:ring-indigo-600 focus:outline-hidden"
                 text-class="block truncate"
                 :class="{
                     'ring-1 ring-red-500': $select?.errors,
@@ -16,22 +15,18 @@
             >
                 <template #icon>
                     <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                        <IconCheveronDown class="h-5 w-5 text-gray-400" />
+                        <IconCheveronDown class="size-5 text-gray-400" />
                     </span>
                 </template>
-            </AGHeadlessSelectButton>
+            </AGHeadlessSelectTrigger>
             <AGHeadlessSelectOptions
-                class="absolute z-10 mt-1 max-h-60 w-full overflow-auto border bg-white py-1 text-base ring-1 ring-black ring-opacity-5 focus:outline-none"
+                class="absolute z-10 mt-1 max-h-60 w-full overflow-auto border border-gray-300 bg-white py-1 text-base ring-1 ring-black/5 focus:outline-hidden"
             >
                 <AGHeadlessSelectOption
                     v-for="(option, index) in $select?.options ?? []"
                     :key="index"
                     :value="option"
-                    class="relative block cursor-default select-none truncate py-2 pl-3 pr-9"
-                    selected-class="font-semibold"
-                    unselected-class="font-normal"
-                    active-class="bg-indigo-600 text-white"
-                    inactive-class="text-gray-900"
+                    class="relative block cursor-default truncate py-2 pr-9 pl-3 text-gray-900 select-none data-[highlighted]:bg-indigo-600 data-[highlighted]:text-white data-[state=checked]:font-semibold data-[state=unchecked]:font-normal"
                 />
             </AGHeadlessSelectOptions>
         </div>
@@ -42,16 +37,15 @@
 <script setup lang="ts">
 import IconCheveronDown from '~icons/zondicons/cheveron-down';
 
-import { componentRef } from '@/utils/vue';
-import { useSelectEmits, useSelectProps } from '@/components/headless/forms/AGHeadlessSelect';
-import type { IAGHeadlessSelect } from '@/components/headless/forms/AGHeadlessSelect';
+import { componentRef } from '@aerogel/core/utils/vue';
+import { useSelectEmits, useSelectProps } from '@aerogel/core/components/headless/forms/AGHeadlessSelect';
+import type { IAGHeadlessSelect } from '@aerogel/core/components/headless/forms/AGHeadlessSelect';
 
 import AGHeadlessSelect from '../headless/forms/AGHeadlessSelect.vue';
-import AGHeadlessSelectButton from '../headless/forms/AGHeadlessSelectButton.vue';
+import AGHeadlessSelectTrigger from '../headless/forms/AGHeadlessSelectTrigger.vue';
 import AGHeadlessSelectError from '../headless/forms/AGHeadlessSelectError.vue';
-import AGHeadlessSelectLabel from '../headless/forms/AGHeadlessSelectLabel.vue';
 import AGHeadlessSelectOption from '../headless/forms/AGHeadlessSelectOption.vue';
-import AGHeadlessSelectOptions from '../headless/forms/AGHeadlessSelectOptions';
+import AGHeadlessSelectOptions from '../headless/forms/AGHeadlessSelectOptions.vue';
 
 defineEmits(useSelectEmits());
 

package/src/components/headless/forms/AGHeadlessButton.ts

@@ -0,0 +1,3 @@
+import type { HasElement } from '@aerogel/core/components/contracts/shared';
+
+export interface IAGHeadlessButton extends HasElement {}

package/src/components/headless/forms/AGHeadlessButton.vue

@@ -1,5 +1,5 @@
 <template>
-    <component :is="component.tag" v-bind="component.props">
+    <component :is="component.as" ref="$root" v-bind="component.props">
         <slot />
     </component>
 </template>
@@ -8,9 +8,13 @@
 import { computed } from 'vue';
 import { objectWithoutEmpty } from '@noeldemartin/utils';
 
-import { booleanProp, objectProp, stringProp } from '@/utils/vue';
+import { booleanProp, objectProp, stringProp } from '@aerogel/core/utils/vue';
+import { elementRef } from '@aerogel/core/components/composition';
+
+import type { IAGHeadlessButton } from './AGHeadlessButton';
 
 const props = defineProps({
+    as: objectProp(),
     href: stringProp(),
     url: stringProp(),
     route: stringProp(),
@@ -19,10 +23,15 @@ const props = defineProps({
     submit: booleanProp(),
 });
 
+const $root = elementRef();
 const component = computed(() => {
+    if (props.as) {
+        return { as: props.as, props: {} };
+    }
+
     if (props.route) {
         return {
-            tag: 'router-link',
+            as: 'router-link',
             props: {
                 to: objectWithoutEmpty({
                     name: props.route,
@@ -35,7 +44,7 @@ const component = computed(() => {
 
     if (props.href || props.url) {
         return {
-            tag: 'a',
+            as: 'a',
             props: {
                 target: '_blank',
                 href: props.href || props.url,
@@ -44,8 +53,10 @@ const component = computed(() => {
     }
 
     return {
-        tag: 'button',
+        as: 'button',
         props: { type: props.submit ? 'submit' : 'button' },
     };
 });
+
+defineExpose<IAGHeadlessButton>({ $el: $root });
 </script>

package/src/components/headless/forms/AGHeadlessInput.ts

@@ -1,22 +1,35 @@
 import type { ComputedRef, DeepReadonly, ExtractPropTypes, Ref } from 'vue';
+import type { Writable } from '@noeldemartin/utils';
 
-import { stringProp } from '@/utils';
-import { extractComponentProps } from '@/components/utils';
+import { mixedProp, stringProp } from '@aerogel/core/utils';
+import { extractComponentProps } from '@aerogel/core/components/utils';
+import type { FormFieldValue } from '@aerogel/core/forms/Form';
+import type { HasElement } from '@aerogel/core/components/contracts/shared';
 
-export interface IAGHeadlessInput {
+export interface IAGHeadlessInput extends HasElement {
     id: string;
     name: ComputedRef<string | null>;
     label: ComputedRef<string | null>;
-    value: ComputedRef<string | number | boolean | null>;
+    description: ComputedRef<string | boolean | null>;
+    value: ComputedRef<FormFieldValue | null>;
+    required: ComputedRef<boolean | null>;
     errors: DeepReadonly<Ref<string[] | null>>;
-    update(value: string | number | boolean | null): void;
+    update(value: FormFieldValue | null): void;
 }
 
 export const inputProps = {
     name: stringProp(),
     label: stringProp(),
+    description: stringProp(),
+    modelValue: mixedProp<FormFieldValue>([String, Number, Boolean]),
 };
 
+export const inputEmits = ['update:modelValue'] as const;
+
+export function useInputEmits(): Writable<typeof inputEmits> {
+    return [...inputEmits];
+}
+
 export function useInputProps(): typeof inputProps {
     return inputProps;
 }

package/src/components/headless/forms/AGHeadlessInput.vue

@@ -6,11 +6,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, provide, readonly } from 'vue';
+import { computed, inject, provide, readonly, ref } from 'vue';
 import { uuid } from '@noeldemartin/utils';
 
-import { mixedProp, stringProp } from '@/utils/vue';
-import type Form from '@/forms/Form';
+import { stringProp } from '@aerogel/core/utils/vue';
+import type Form from '@aerogel/core/forms/Form';
+import type { __SetsElement } from '@aerogel/core/components/contracts/shared';
 
 import { useInputProps } from './AGHeadlessInput';
 import type { IAGHeadlessInput } from './AGHeadlessInput';
@@ -18,9 +19,9 @@ import type { IAGHeadlessInput } from './AGHeadlessInput';
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
     as: stringProp('div'),
-    modelValue: mixedProp<string | number | boolean>([String, Number, Boolean]),
     ...useInputProps(),
 });
+const $el = ref<HTMLElement>();
 const errors = computed(() => {
     if (!form || !props.name) {
         return null;
@@ -29,18 +30,27 @@ const errors = computed(() => {
     return form.errors[props.name] ?? null;
 });
 const form = inject<Form | null>('form', null);
-const api: IAGHeadlessInput = {
+const api: IAGHeadlessInput & __SetsElement = {
+    $el,
     id: `input-${uuid()}`,
     name: computed(() => props.name),
     label: computed(() => props.label),
+    description: computed(() => props.description),
     value: computed(() => {
         if (form && props.name) {
-            return form.getFieldValue(props.name) as string | number | boolean | null;
+            return form.getFieldValue(props.name);
         }
 
         return props.modelValue;
     }),
     errors: readonly(errors),
+    required: computed(() => {
+        if (!props.name || !form) {
+            return null;
+        }
+
+        return form.getFieldRules(props.name).includes('required');
+    }),
     update(value) {
         if (form && props.name) {
             form.setFieldValue(props.name, value);
@@ -50,6 +60,9 @@ const api: IAGHeadlessInput = {
 
         emit('update:modelValue', value);
     },
+    __setElement(element) {
+        $el.value = element;
+    },
 };
 
 provide<IAGHeadlessInput>('input', api);

package/src/components/headless/forms/AGHeadlessInputDescription.vue

@@ -0,0 +1,28 @@
+<template>
+    <slot :id="`${input.id}-description`">
+        <AGMarkdown
+            v-if="show"
+            v-bind="$attrs"
+            :id="`${input.id}-description`"
+            :text="text"
+        />
+    </slot>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+
+import AGMarkdown from '../../lib/AGMarkdown.vue';
+import type { IAGHeadlessInput } from './AGHeadlessInput';
+
+defineOptions({ inheritAttrs: false });
+
+const input = injectReactiveOrFail<IAGHeadlessInput>(
+    'input',
+    '<AGHeadlessInputDescription> must be a child of a <AGHeadlessInput>',
+);
+const text = computed(() => (typeof input.description === 'string' ? input.description : ''));
+const show = computed(() => !!input.description);
+</script>