@sewadah/selaras 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Sewadah
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,131 @@
+# Selaras
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+A UI component library for Nuxt, built on Reka UI and Tailwind v4. Every
+component ships a `tailwind-variants` theme and a single `:ui` prop for
+overrides - no separate pass-through prop to juggle, no specificity fights
+between the library's own classes and yours. Design tokens are plain CSS
+variables (`@theme` + a semantic `--ui-*` layer), so re-theming an app is a
+matter of overriding variables, not rebuilding the library.
+
+- [✨  Release Notes](/CHANGELOG.md)
+
+> **Status:** pre-1.0 and still moving - component APIs, the color token
+> system, and internal structure can change between minor versions until
+> things settle. Not yet published to npm.
+
+## Features
+
+- **One override prop, not two.** `:ui` accepts a string (tailwind-merge'd
+  against the theme) or an object (merged via `mergeProps` for the rare
+  non-class case) per slot - the same mental model everywhere in the library.
+- **CSS variable design tokens.** Colors, radii, shadows, and z-index all
+  live in `theme.css` as `--ui-*` variables built on OKLCH primitives, so
+  swapping a brand color is a CSS override, not a rebuild.
+- **CSS-only animation.** Open/close and hover/focus transitions run on
+  `data-state` attributes and Tailwind variants - no motion library
+  dependency.
+- **~35 components** across elements (Button, Badge, Chip, Icon, ...), forms
+  (Input, Select, Autocomplete, Checkbox, RadioGroup, Switch, FormField,
+  ...), data (Table, with sorting/pagination/virtualization/pinning/export),
+  navigation (Tabs, Accordion, ContentNavigation, ContentToc), overlays
+  (Modal, Dropdown, Tooltip, Toast), layout, and a full set of Prose
+  wrappers for `@nuxt/content`.
+- Components auto-import with an `S` prefix (`SButton`, `SSelect`, ...).
+
+## Quick Setup
+
+Install the module to your Nuxt application with one command:
+
+```bash
+npx nuxt module add selaras
+```
+
+Tailwind CSS is a peer dependency - install it alongside Selaras too, so
+your own project owns its version directly:
+
+```bash
+npm install tailwindcss
+```
+
+Import the CSS in your own stylesheet, after Tailwind itself:
+
+```css
+@import "tailwindcss";
+@import "selaras";
+```
+
+Wrap your root `app.vue` in `<SApp>`, once - required for Tooltip's shared
+hover-delay behavior and the `useModal`/`useDrawer`/`useSlideover` composables
+to work:
+
+```vue-html
+<!-- app.vue -->
+<template>
+  <SApp>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </SApp>
+</template>
+```
+
+Every component is now auto-imported and ready to use:
+
+```vue-html
+<SButton color="primary" icon="ph:sparkle">
+  Get started
+</SButton>
+```
+
+## Contribution
+
+<details>
+  <summary>Local development</summary>
+
+  ```bash
+  # Install dependencies
+  npm install
+
+  # Generate type stubs
+  npm run dev:prepare
+
+  # Develop with the playground (component docs site)
+  npm run dev
+
+  # Build the playground
+  npm run dev:build
+
+  # Type-check
+  npm run test:types
+
+  # Run ESLint
+  npm run lint
+
+  # Run Vitest
+  npm run test
+  npm run test:watch
+
+  # Release new version
+  npm run release
+  ```
+
+</details>
+
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/selaras/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/selaras
+
+[npm-downloads-src]: https://img.shields.io/npm/dm/selaras.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npm.chart.dev/selaras
+
+[license-src]: https://img.shields.io/npm/l/selaras.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/selaras
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt
+[nuxt-href]: https://nuxt.com

package/dist/module.d.mts

@@ -0,0 +1,22 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+    /**
+     * Prefix used for auto-imported components.
+     * @default 'S'
+     */
+    prefix?: string;
+    /**
+     * Namespaces every class Selaras's own components render behind this
+     * Tailwind v4 class-prefix (`tw:flex` instead of `flex`) - matches a
+     * consumer's own `@import "tailwindcss" prefix(tw);` declaration, which
+     * must use the exact same string or the whole UI renders unstyled with
+     * no error. Unset by default (no prefixing). See "Class prefix" in the
+     * installation docs before setting this.
+     */
+    classPrefix?: string;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "selaras",
+  "configKey": "selaras",
+  "version": "0.1.1",
+  "builder": {
+    "@nuxt/module-builder": "1.0.3",
+    "unbuild": "unknown"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,127 @@
+import { defineNuxtModule, createResolver, addVitePlugin, addComponentsDir, addImportsDir, addImports, addTemplate } from '@nuxt/kit';
+import { Scanner } from '@tailwindcss/oxide';
+import tailwindcss from '@tailwindcss/vite';
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "selaras",
+    configKey: "selaras"
+  },
+  defaults: {
+    prefix: "S"
+  },
+  moduleDependencies: {
+    "@nuxt/icon": {},
+    // classSuffix: '' (the module's own default) produces bare `dark`/`light`
+    // classes on <html>, matching theme.css's own Tailwind v4 dark variant
+    // (`@custom-variant dark (&:where(.dark, .dark *))`) with no extra config.
+    "@nuxtjs/color-mode": {}
+  },
+  setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    nuxt.options.icon ||= {};
+    nuxt.options.icon.cssLayer = "components";
+    addVitePlugin(tailwindcss());
+    addComponentsDir({
+      path: resolver.resolve("./runtime/components"),
+      prefix: options.prefix,
+      pathPrefix: false,
+      // SColumn/SColumnGroup are plain .ts files (never render real DOM), not
+      // .vue SFCs - addComponentsDir only scans .vue by default.
+      extensions: ["vue", "ts"],
+      // ModalRenderer is App.vue's own internal render loop for useModal(),
+      // mirroring the same un-exported overlay-provider pattern other Nuxt
+      // component libraries commonly use internally - not meant to be
+      // placed by a consumer (App.vue already mounts one; a second copy
+      // would render every open programmatic modal twice, since useModal()'s
+      // state is a shared singleton). NavigationMenuAccordionItem,
+      // NavigationMenuFlyoutList and NavigationMenuFlyoutTrigger are
+      // NavigationMenu's own internal recursive helpers for vertical mode's
+      // arbitrary-depth tree (expanded, collapsed-flyout content, and the
+      // collapsed-flyout's own hover/click trigger, respectively) - not
+      // meant to be placed directly either. SlideoverRenderer/DrawerRenderer
+      // are useSlideover()'s/useDrawer()'s own render loops, same reasoning
+      // as ModalRenderer.
+      ignore: ["**/ModalRenderer.vue", "**/NavigationMenuAccordionItem.vue", "**/NavigationMenuFlyoutList.vue", "**/NavigationMenuFlyoutTrigger.vue", "**/SlideoverRenderer.vue", "**/DrawerRenderer.vue"]
+    });
+    const hasContentModule = nuxt.options.modules.some((m) => {
+      const name = typeof m === "string" ? m : Array.isArray(m) && typeof m[0] === "string" ? m[0] : void 0;
+      return name === "@nuxt/content" || name === "@nuxtjs/mdc";
+    });
+    if (hasContentModule) {
+      addComponentsDir({
+        path: resolver.resolve("./runtime/components"),
+        pattern: ["ProsePre.vue", "ProseH[1-6].vue"],
+        prefix: "",
+        pathPrefix: false,
+        global: true,
+        priority: 10
+      });
+    }
+    addImportsDir(resolver.resolve("./runtime/composables"));
+    nuxt.hook("prepare:types", ({ references }) => {
+      references.push({ path: resolver.resolve("./runtime/types/app-config.d.ts") });
+    });
+    addImports({
+      name: "vRipple",
+      from: resolver.resolve("./runtime/directives/ripple"),
+      meta: { vueDirective: true }
+    });
+    addTemplate({
+      filename: "selaras-class-prefix.mjs",
+      getContents: () => `export const classPrefix = ${JSON.stringify(options.classPrefix ?? null)}
+`
+    });
+    if (options.classPrefix) {
+      const runtimeBase = resolver.resolve("./runtime");
+      const scanner = new Scanner({
+        sources: [
+          { base: runtimeBase, pattern: "./components/**/*.vue", negated: false },
+          { base: runtimeBase, pattern: "./theme/**/*.ts", negated: false },
+          { base: runtimeBase, pattern: "./utils/**/*.ts", negated: false }
+        ]
+      });
+      const candidates = scanner.scan().filter((candidate) => {
+        if (candidate.startsWith("selaras-"))
+          return false;
+        if (candidate.startsWith("!") || /[A-Z]/.test(candidate))
+          return false;
+        return true;
+      });
+      const safelist = candidates.map((candidate) => `${options.classPrefix}:${candidate}`).join(" ");
+      const safelistTemplate = addTemplate({
+        filename: "selaras-prefix-safelist.css",
+        // Tailwind's split entry points (`tailwindcss/theme.css` +
+        // `tailwindcss/utilities.css`, each with their own `prefix(...)`)
+        // emit only the utilities layer for this file's own safelist
+        // candidates, instead of a second full copy of Preflight/theme
+        // output the plain `@import "tailwindcss" prefix(...)` form would
+        // otherwise duplicate (confirmed: ~3.4KB vs ~190KB for an
+        // equivalent safelist). `theme(reference)` on the theme import:
+        // this file only needs to *resolve* Tailwind's own theme values
+        // for candidate generation, not emit them again.
+        //
+        // `tw-animate-css` and `@custom-variant dark` are also imported/
+        // declared here, matching theme.css's own - both live only in
+        // theme.css's (separate) compilation otherwise, so without them
+        // every `${prefix}:animate-in`/`${prefix}:fade-in-0`/etc class
+        // (every Modal/Dropdown/Select/Toast/Tooltip/Drawer open-close
+        // transition) would silently generate no CSS at all under a
+        // configured prefix - confirmed empirically. `dark:` isn't used
+        // by any real component class yet, but costs nothing to close now.
+        getContents: () => [
+          `@import "tailwindcss/theme.css" theme(reference) prefix(${options.classPrefix});`,
+          `@import "tailwindcss/utilities.css" layer(utilities) prefix(${options.classPrefix});`,
+          `@import "tw-animate-css";`,
+          `@custom-variant dark (&:where(.dark, .dark *));`,
+          `@source inline("${safelist}");`,
+          ""
+        ].join("\n"),
+        write: true
+      });
+      nuxt.options.css.push(safelistTemplate.dst);
+    }
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/components/Accordion.d.vue.ts

@@ -0,0 +1,59 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { AccordionThemeSlots } from '../theme/accordion.js';
+import type { UiProp } from '../utils/ui.js';
+import { accordionTheme } from '../theme/accordion.js';
+type AccordionVariants = VariantProps<typeof accordionTheme>;
+export interface AccordionItemDef {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    /** Not read by Accordion's own default label rendering - carried purely so a custom #label slot override can display one. */
+    icon?: string;
+}
+export interface AccordionProps {
+    items: AccordionItemDef[];
+    type?: 'single' | 'multiple';
+    defaultValue?: string | string[];
+    modelValue?: string | string[];
+    collapsible?: boolean;
+    /** Disables every item at once - Reka's own AccordionRoot already blocks all interaction when this is set, so this is a straight pass-through. */
+    disabled?: boolean;
+    size?: AccordionVariants['size'];
+    /** @default 'list' */
+    variant?: AccordionVariants['variant'];
+    /** @default 'end' */
+    chevronPosition?: AccordionVariants['chevronPosition'];
+    ui?: UiProp<AccordionThemeSlots>;
+}
+export interface AccordionEmits {
+    'update:modelValue': [value: string | string[]];
+}
+declare var __VLS_28: {
+    class: unknown;
+}, __VLS_35: {
+    item: AccordionItemDef;
+}, __VLS_37: {
+    class: unknown;
+}, __VLS_51: string, __VLS_52: {};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_51>]?: (props: typeof __VLS_52) => any;
+} & {
+    'chevron-icon'?: (props: typeof __VLS_28) => any;
+} & {
+    label?: (props: typeof __VLS_35) => any;
+} & {
+    'chevron-icon'?: (props: typeof __VLS_37) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<AccordionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | string[]) => any;
+}, string, import("vue").PublicProps, Readonly<AccordionProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | string[]) => any) | undefined;
+}>, {}, {}, {}, {}, 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/components/Accordion.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger } from "reka-ui";
+import { computed } from "vue";
+import { useIcons } from "../composables/use-icons";
+import { accordionTheme } from "../theme/accordion";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  items: { type: Array, required: true },
+  type: { type: String, required: false, default: "multiple" },
+  defaultValue: { type: [String, Array], required: false },
+  modelValue: { type: [String, Array], required: false },
+  collapsible: { type: Boolean, required: false, default: true },
+  disabled: { type: Boolean, required: false },
+  size: { type: null, required: false },
+  variant: { type: null, required: false },
+  chevronPosition: { type: null, required: false },
+  ui: { type: Object, required: false }
+});
+defineEmits(["update:modelValue"]);
+const icons = useIcons();
+const theme = useComponentTheme("accordion", accordionTheme);
+const ui = computed(() => theme.value({ size: props.size, variant: props.variant, chevronPosition: props.chevronPosition }));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+</script>
+
+<template>
+  <AccordionRoot
+    :type="type"
+    :default-value="defaultValue"
+    :model-value="modelValue"
+    :collapsible="type === 'single' ? collapsible : void 0"
+    :disabled="disabled"
+    v-bind="rootProps"
+    @update:model-value="(value) => $emit('update:modelValue', value)"
+  >
+    <AccordionItem
+      v-for="item in items"
+      :key="item.value"
+      :value="item.value"
+      :disabled="item.disabled"
+      v-bind="resolveSlot(ui.item, props.ui?.item)"
+    >
+      <AccordionHeader as="div" v-bind="resolveSlot(ui.header, props.ui?.header)">
+        <AccordionTrigger v-bind="resolveSlot(ui.trigger, props.ui?.trigger)">
+          <slot v-if="chevronPosition === 'start'" name="chevron-icon" :class="resolveSlot(ui.chevron, props.ui?.chevron).class">
+            <Icon :name="icons.chevronDown" v-bind="resolveSlot(ui.chevron, props.ui?.chevron)" />
+          </slot>
+          <span v-bind="resolveSlot(ui.label, props.ui?.label)">
+            <slot name="label" :item="item">{{ item.label }}</slot>
+          </span>
+          <slot v-if="chevronPosition !== 'start'" name="chevron-icon" :class="resolveSlot(ui.chevron, props.ui?.chevron).class">
+            <Icon :name="icons.chevronDown" v-bind="resolveSlot(ui.chevron, props.ui?.chevron)" />
+          </slot>
+        </AccordionTrigger>
+      </AccordionHeader>
+      <AccordionContent v-bind="resolveSlot(ui.content, props.ui?.content)">
+        <div v-bind="resolveSlot(ui.contentInner, props.ui?.contentInner)">
+          <slot :name="item.value" />
+        </div>
+      </AccordionContent>
+    </AccordionItem>
+  </AccordionRoot>
+</template>

package/dist/runtime/components/Accordion.vue.d.ts

@@ -0,0 +1,59 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { AccordionThemeSlots } from '../theme/accordion.js';
+import type { UiProp } from '../utils/ui.js';
+import { accordionTheme } from '../theme/accordion.js';
+type AccordionVariants = VariantProps<typeof accordionTheme>;
+export interface AccordionItemDef {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    /** Not read by Accordion's own default label rendering - carried purely so a custom #label slot override can display one. */
+    icon?: string;
+}
+export interface AccordionProps {
+    items: AccordionItemDef[];
+    type?: 'single' | 'multiple';
+    defaultValue?: string | string[];
+    modelValue?: string | string[];
+    collapsible?: boolean;
+    /** Disables every item at once - Reka's own AccordionRoot already blocks all interaction when this is set, so this is a straight pass-through. */
+    disabled?: boolean;
+    size?: AccordionVariants['size'];
+    /** @default 'list' */
+    variant?: AccordionVariants['variant'];
+    /** @default 'end' */
+    chevronPosition?: AccordionVariants['chevronPosition'];
+    ui?: UiProp<AccordionThemeSlots>;
+}
+export interface AccordionEmits {
+    'update:modelValue': [value: string | string[]];
+}
+declare var __VLS_28: {
+    class: unknown;
+}, __VLS_35: {
+    item: AccordionItemDef;
+}, __VLS_37: {
+    class: unknown;
+}, __VLS_51: string, __VLS_52: {};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_51>]?: (props: typeof __VLS_52) => any;
+} & {
+    'chevron-icon'?: (props: typeof __VLS_28) => any;
+} & {
+    label?: (props: typeof __VLS_35) => any;
+} & {
+    'chevron-icon'?: (props: typeof __VLS_37) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<AccordionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | string[]) => any;
+}, string, import("vue").PublicProps, Readonly<AccordionProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | string[]) => any) | undefined;
+}>, {}, {}, {}, {}, 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/components/Alert.d.vue.ts

@@ -0,0 +1,39 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { AlertThemeSlots } from '../theme/alert.js';
+import type { UiProp } from '../utils/ui.js';
+import { alertTheme } from '../theme/alert.js';
+type AlertVariants = VariantProps<typeof alertTheme>;
+type __VLS_Slots = AlertSlots;
+export interface AlertProps {
+    title?: string;
+    description?: string;
+    /** Falls back to the color's own default icon (icons.success/danger/warning/info) when unset - no icon renders at all without a color either. */
+    icon?: string;
+    /** Shows a dismiss button and emits `close` when clicked. The alert has no open state of its own - closing it is left to the consumer's own v-if/v-for, the same way Chip's own `removable` + `remove` already works. */
+    closable?: boolean;
+    color?: AlertVariants['color'];
+    variant?: AlertVariants['variant'];
+    ui?: UiProp<AlertThemeSlots>;
+}
+export interface AlertEmits {
+    close: [];
+}
+export interface AlertSlots {
+    title?: () => any;
+    description?: () => any;
+    /** Action buttons (Retry, Undo, ...) below the description. */
+    actions?: () => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<AlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<AlertProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, 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/components/Alert.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { computed } from "vue";
+import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
+import { alertTheme } from "../theme/alert";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Button from "./Button.vue";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  icon: { type: String, required: false },
+  closable: { type: Boolean, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["close"]);
+defineSlots();
+const icons = useIcons();
+const messages = useMessages();
+const iconName = computed(() => props.icon ?? (props.color ? icons.value[props.color] : void 0));
+const theme = useComponentTheme("alert", alertTheme);
+const ui = computed(() => theme.value({ color: props.color, variant: props.variant }));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const iconProps = computed(() => resolveSlot(ui.value.icon, props.ui?.icon));
+const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
+const titleProps = computed(() => resolveSlot(ui.value.title, props.ui?.title));
+const descriptionProps = computed(() => resolveSlot(ui.value.description, props.ui?.description));
+const actionsProps = computed(() => resolveSlot(ui.value.actions, props.ui?.actions));
+const closeProps = computed(() => resolveSlot(ui.value.close, props.ui?.close));
+</script>
+
+<template>
+  <div v-bind="rootProps">
+    <Icon v-if="iconName" :name="iconName" v-bind="iconProps" />
+    <div v-bind="contentProps">
+      <p v-if="title || $slots.title" v-bind="titleProps">
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </p>
+      <p v-if="description || $slots.description" v-bind="descriptionProps">
+        <slot name="description">
+          {{ description }}
+        </slot>
+      </p>
+      <div v-if="$slots.actions" v-bind="actionsProps">
+        <slot name="actions" />
+      </div>
+    </div>
+    <Button
+      v-if="closable"
+      size="sm"
+      variant="ghost"
+      color="neutral"
+      :icon="icons.close"
+      :aria-label="messages.close"
+      v-bind="closeProps"
+      @click="emit('close')"
+    />
+  </div>
+</template>

package/dist/runtime/components/Alert.vue.d.ts

@@ -0,0 +1,39 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { AlertThemeSlots } from '../theme/alert.js';
+import type { UiProp } from '../utils/ui.js';
+import { alertTheme } from '../theme/alert.js';
+type AlertVariants = VariantProps<typeof alertTheme>;
+type __VLS_Slots = AlertSlots;
+export interface AlertProps {
+    title?: string;
+    description?: string;
+    /** Falls back to the color's own default icon (icons.success/danger/warning/info) when unset - no icon renders at all without a color either. */
+    icon?: string;
+    /** Shows a dismiss button and emits `close` when clicked. The alert has no open state of its own - closing it is left to the consumer's own v-if/v-for, the same way Chip's own `removable` + `remove` already works. */
+    closable?: boolean;
+    color?: AlertVariants['color'];
+    variant?: AlertVariants['variant'];
+    ui?: UiProp<AlertThemeSlots>;
+}
+export interface AlertEmits {
+    close: [];
+}
+export interface AlertSlots {
+    title?: () => any;
+    description?: () => any;
+    /** Action buttons (Retry, Undo, ...) below the description. */
+    actions?: () => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<AlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<AlertProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, 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;
+    };
+};