nuance-ui 0.2.36 → 0.3.1

package/dist/module.d.mts

@@ -1,5 +1,6 @@
 import * as _nuxt_schema from '@nuxt/schema';
 import { NuanceDefaultThemeColor, NuanceGradient, NuanceIcons } from '../dist/runtime/types/index.js';
+import { ActiveVariantsMap } from '../dist/runtime/utils/index.js';
 
 /** Primary color: a theme palette name or an array of 10 shade values (0..9). */
 type PrimaryColor = NuanceDefaultThemeColor | string[];
@@ -30,6 +31,8 @@ interface ModuleOptions {
     gradient?: NuanceGradient;
     /** Icon registry overrides */
     icons?: Partial<NuanceIcons>;
+    /** Variant an ActionIcon switches to when `active`, keyed by its base variant */
+    activeVariants?: Partial<ActiveVariantsMap>;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 

package/dist/module.d.ts

@@ -1,5 +1,6 @@
 import * as _nuxt_schema from '@nuxt/schema';
 import { NuanceDefaultThemeColor, NuanceGradient, NuanceIcons } from '../dist/runtime/types/index.js';
+import { ActiveVariantsMap } from '../dist/runtime/utils/index.js';
 
 /** Primary color: a theme palette name or an array of 10 shade values (0..9). */
 type PrimaryColor = NuanceDefaultThemeColor | string[];
@@ -30,6 +31,8 @@ interface ModuleOptions {
     gradient?: NuanceGradient;
     /** Icon registry overrides */
     icons?: Partial<NuanceIcons>;
+    /** Variant an ActionIcon switches to when `active`, keyed by its base variant */
+    activeVariants?: Partial<ActiveVariantsMap>;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^4.0.0"
   },
-  "version": "0.2.36",
+  "version": "0.3.1",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defineNuxtModule, createResolver, addTypeTemplate, addComponentsDir, addImportsDir, addTemplate } from '@nuxt/kit';
 import { defu } from 'defu';
-import { DEFAULT_ICONS, DEFAULT_GRADIENT } from '../dist/runtime/utils/index.js';
+import { DEFAULT_ACTIVE_VARIANTS, DEFAULT_ICONS, DEFAULT_GRADIENT } from '../dist/runtime/utils/index.js';
 
 const SHADES = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 function fromName(name) {
@@ -73,7 +73,8 @@ const defaultConfig = {
   prefix: "N",
   primaryColor: "blue",
   gradient: DEFAULT_GRADIENT,
-  icons: DEFAULT_ICONS
+  icons: DEFAULT_ICONS,
+  activeVariants: DEFAULT_ACTIVE_VARIANTS
 };
 const module$1 = defineNuxtModule({
   meta: {
@@ -114,7 +115,8 @@ const module$1 = defineNuxtModule({
     }
     nuxt.options.appConfig.nui = defu(nuxt.options.appConfig.nui, {
       gradient: options.gradient,
-      icons: options.icons
+      icons: options.icons,
+      activeVariants: options.activeVariants
     });
     addTypeTemplate({
       filename: "types/nui-app-config.d.ts",

package/dist/runtime/app-config.d.ts

@@ -1,4 +1,5 @@
 import type { NuanceGradient, NuanceIcons } from './types'
+import type { ActiveVariantsMap } from './utils'
 
 
 declare module '@nuxt/schema' {
@@ -8,6 +9,8 @@ declare module '@nuxt/schema' {
 			gradient?: NuanceGradient
 			/** Icon registry overrides */
 			icons?: Partial<NuanceIcons>
+			/** Variant an ActionIcon switches to when `active`, keyed by its base variant */
+			activeVariants?: Partial<ActiveVariantsMap>
 		}
 	}
 
@@ -15,6 +18,7 @@ declare module '@nuxt/schema' {
 		nui: {
 			gradient: NuanceGradient
 			icons: NuanceIcons
+			activeVariants: ActiveVariantsMap
 		}
 	}
 }

package/dist/runtime/components/accordion/accordion-header.d.vue.ts

@@ -0,0 +1,28 @@
+export interface AccordionHeaderProps {
+    /** Leading icon name shown before the label */
+    icon?: string;
+    /** Overrides the accordion-level chevron icon for this item */
+    chevron?: string;
+}
+export interface AccordionHeaderSlots {
+    /** Header label */
+    default?: (props: {
+        open: boolean;
+    }) => any;
+    /** Leading content, replaces the `icon` prop */
+    icon?: (props: {
+        open: boolean;
+    }) => any;
+    /** Trailing content, replaces the chevron */
+    chevron?: (props: {
+        open: boolean;
+    }) => any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AccordionHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AccordionHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AccordionHeaderSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/accordion/accordion-header.vue

@@ -0,0 +1,79 @@
+<script>
+
+</script>
+
+<script setup>
+import { useConfig } from "@nui/composables";
+import { computed } from "vue";
+import Box from "../box.vue";
+import UnstyledButton from "../button/unstyled-button.vue";
+import Title from "../title.vue";
+import css from "./accordion.module.css";
+import { useAccordionItemState, useAccordionRootState } from "./lib/context";
+const { icon, chevron } = defineProps({
+  icon: { type: String, required: false },
+  chevron: { type: String, required: false }
+});
+defineSlots();
+const { icons } = useConfig();
+const root = useAccordionRootState();
+const item = useAccordionItemState();
+const headerId = computed(() => root.getHeaderId(item.value.value));
+const panelId = computed(() => root.getPanelId(item.value.value));
+const chevronIcon = computed(() => chevron ?? root.chevron.value ?? icons.chevronDown);
+const rotate = computed(() => item.open.value && !root.disableChevronRotation.value);
+function onClick() {
+  if (item.disabled.value)
+    return;
+  root.toggleItem(item.value.value);
+}
+</script>
+
+<template>
+	<Box
+		:is='root.order.value ? Title : "div"'
+		v-bind='root.order.value ? { order: root.order.value } : {}'
+		:class='[css.header, root.classes.value?.header]'
+	>
+		<UnstyledButton
+			:id='headerId'
+			type='button'
+			:disabled='item.disabled.value'
+			:aria-expanded='item.open.value'
+			:aria-controls='panelId'
+			:mod='{
+  "state": item.dataState.value,
+  "variant": root.variant.value,
+  "disabled": item.disabled.value,
+  "chevron-position": root.chevronPosition.value
+}'
+			:class='[css.control, root.classes.value?.control]'
+			@click='onClick'
+		>
+			<Box
+				is='span'
+				v-if='$slots.icon || icon'
+				:mod='{ "chevron-position": root.chevronPosition.value }'
+				:class='[css.icon, root.classes.value?.icon]'
+			>
+				<slot name='icon' :open='item.open.value'>
+					<Icon v-if='icon' :name='icon' />
+				</slot>
+			</Box>
+
+			<span :class='[css.label, root.classes.value?.label]'>
+				<slot :open='item.open.value' />
+			</span>
+
+			<Box
+				is='span'
+				:mod='{ rotate, position: root.chevronPosition.value }'
+				:class='[css.chevron, root.classes.value?.chevron]'
+			>
+				<slot name='chevron' :open='item.open.value'>
+					<Icon :name='chevronIcon' />
+				</slot>
+			</Box>
+		</UnstyledButton>
+	</Box>
+</template>

package/dist/runtime/components/accordion/accordion-header.vue.d.ts

@@ -0,0 +1,28 @@
+export interface AccordionHeaderProps {
+    /** Leading icon name shown before the label */
+    icon?: string;
+    /** Overrides the accordion-level chevron icon for this item */
+    chevron?: string;
+}
+export interface AccordionHeaderSlots {
+    /** Header label */
+    default?: (props: {
+        open: boolean;
+    }) => any;
+    /** Leading content, replaces the `icon` prop */
+    icon?: (props: {
+        open: boolean;
+    }) => any;
+    /** Trailing content, replaces the chevron */
+    chevron?: (props: {
+        open: boolean;
+    }) => any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AccordionHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AccordionHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AccordionHeaderSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/accordion/accordion-item.d.vue.ts

@@ -0,0 +1,18 @@
+export interface AccordionItemProps {
+    /** Unique value used to manage the open state. Must be unique within the accordion. */
+    value: string;
+    /** Disables this item */
+    disabled?: boolean;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AccordionItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AccordionItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {
+        open: boolean;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/accordion/accordion-item.vue

@@ -0,0 +1,44 @@
+<script>
+
+</script>
+
+<script setup>
+import { computed } from "vue";
+import Box from "../box.vue";
+import css from "./accordion.module.css";
+import {
+  provideAccordionItemState,
+  useAccordionRootState
+} from "./lib/context";
+const { value, disabled } = defineProps({
+  value: { type: String, required: true },
+  disabled: { type: Boolean, required: false }
+});
+const root = useAccordionRootState();
+const open = computed(() => root.isItemActive(value));
+const itemDisabled = computed(() => root.disabled.value || disabled);
+const dataState = computed(() => open.value ? "open" : "closed");
+provideAccordionItemState({
+  value: computed(() => value),
+  open,
+  disabled: itemDisabled,
+  dataState
+});
+</script>
+
+<template>
+	<Box
+		:mod='{
+  active: open,
+  disabled: itemDisabled,
+  state: dataState,
+  variant: root.variant.value
+}'
+		:class='[
+  css.item,
+  root.classes.value?.item
+]'
+	>
+		<slot :open='open' />
+	</Box>
+</template>

package/dist/runtime/components/accordion/accordion-item.vue.d.ts

@@ -0,0 +1,18 @@
+export interface AccordionItemProps {
+    /** Unique value used to manage the open state. Must be unique within the accordion. */
+    value: string;
+    /** Disables this item */
+    disabled?: boolean;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AccordionItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AccordionItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {
+        open: boolean;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/accordion/accordion-panel.d.vue.ts

@@ -0,0 +1,18 @@
+export interface AccordionPanelProps {
+    /** Overrides the accordion-level `keepMounted`. When unset, inherits from the accordion. */
+    keepMounted?: boolean;
+    /** Overrides the accordion-level `transitionDuration` */
+    transitionDuration?: number;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AccordionPanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AccordionPanelProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {
+        open: boolean;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/accordion/accordion-panel.vue

@@ -0,0 +1,40 @@
+<script>
+
+</script>
+
+<script setup>
+import { computed } from "vue";
+import Collapse from "../collapse.vue";
+import css from "./accordion.module.css";
+import { useAccordionItemState, useAccordionRootState } from "./lib/context";
+const { keepMounted, transitionDuration } = defineProps({
+  keepMounted: { type: Boolean, required: false },
+  transitionDuration: { type: Number, required: false }
+});
+const root = useAccordionRootState();
+const item = useAccordionItemState();
+const open = computed({
+  get: () => item.open.value,
+  set: (v) => v !== item.open.value && root.toggleItem(item.value.value)
+});
+const panelId = computed(() => root.getPanelId(item.value.value));
+const headerId = computed(() => root.getHeaderId(item.value.value));
+</script>
+
+<template>
+	<Collapse
+		v-model:open='open'
+		:keep-mounted='keepMounted ?? root.keepMounted.value'
+		:transition-duration='transitionDuration ?? root.transitionDuration.value'
+		:class='[css.panel, root.classes.value?.panel]'
+	>
+		<div
+			:id='panelId'
+			role='region'
+			:aria-labelledby='headerId'
+			:class='[css.content, root.classes.value?.content]'
+		>
+			<slot :open='item.open.value' />
+		</div>
+	</Collapse>
+</template>

package/dist/runtime/components/accordion/accordion-panel.vue.d.ts

@@ -0,0 +1,18 @@
+export interface AccordionPanelProps {
+    /** Overrides the accordion-level `keepMounted`. When unset, inherits from the accordion. */
+    keepMounted?: boolean;
+    /** Overrides the accordion-level `transitionDuration` */
+    transitionDuration?: number;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AccordionPanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AccordionPanelProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {
+        open: boolean;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,61 @@
+import type { AnyString, NuanceRadius } from '@nui/types';
+import type { TitleProps } from '../title.vue.js';
+import type { AccordionChevronPosition, AccordionClasses, AccordionVariant } from './lib/context.js';
+export interface AccordionProps<Multiple extends boolean = false> {
+    /** If set, multiple items can be opened at the same time @default false */
+    multiple?: Multiple;
+    /** Uncontrolled default open value(s) */
+    defaultValue?: Multiple extends true ? string[] : string | null;
+    /** If set, arrow keys loop through item headers @default true */
+    loop?: boolean;
+    /** Visual variant @default 'default' */
+    variant?: AccordionVariant;
+    /** Transition duration in ms @default 200 */
+    transitionDuration?: number;
+    /** If set, chevron rotation is disabled @default false */
+    disableChevronRotation?: boolean;
+    /** Position of the chevron relative to the item label @default 'right' */
+    chevronPosition?: AccordionChevronPosition;
+    /** Size of the chevron icon container @default auto */
+    chevronSize?: number | string;
+    /** Custom chevron icon name */
+    chevron?: string;
+    /** Disables the component */
+    disabled?: boolean;
+    /**
+     * Sets heading level (h1-h6) for item headers, wrapping each in the matching heading tag.
+     * Recommended to meet WAI-ARIA requirements. Has no visual effect.
+     */
+    order?: TitleProps['order'];
+    /** Border radius @default theme.defaultRadius */
+    radius?: NuanceRadius | AnyString;
+    /** If `false`, panels are unmounted when collapsed @default true */
+    keepMounted?: boolean;
+    /** Styles API */
+    classes?: AccordionClasses;
+}
+export type AccordionValue<Multiple extends boolean> = Multiple extends true ? string[] : string | null;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <Multiple extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(AccordionProps<Multiple> & {
+        modelValue?: AccordionValue<Multiple>;
+    }) & {
+        "onUpdate:modelValue"?: ((value: AccordionValue<Multiple>) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    };
+    emit: (event: "update:modelValue", value: AccordionValue<Multiple>) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/accordion/accordion.module.css

@@ -0,0 +1 @@
+.root{--accordion-radius:var(--radius-default)}.panel{overflow-wrap:break-word}.content{padding:var(--spacing-md);padding-top:calc(var(--spacing-xs)/2)}.header{margin:0;padding:0;width:100%}.control{align-items:center;background-color:transparent;color:var(--color-bright);cursor:pointer;display:flex;flex-direction:row;opacity:1;padding-inline:var(--spacing-md);width:100%}.control:where([data-chevron-position=left]){flex-direction:row-reverse;padding-inline-start:0}.control:where(:disabled,[data-disabled]){cursor:not-allowed;opacity:.4}.control:where([data-variant=default],[data-variant=contained]):where(:not(:disabled,[data-disabled])){@mixin hover{@mixin where-light{background-color:var(--color-gray-1)}@mixin where-dark{background-color:var(--color-dark-6)}}}.label{color:inherit;flex:1;font-weight:400;overflow:hidden;padding-bottom:var(--spacing-sm);padding-top:var(--spacing-sm);text-overflow:ellipsis}.chevron{align-items:center;display:flex;justify-content:flex-start;min-width:var(--accordion-chevron-size,rem(15px));transform:rotate(0deg);transition:transform var(--accordion-transition-duration,.2s) ease;width:var(--accordion-chevron-size,rem(15px))}.chevron:where([data-rotate]){transform:rotate(180deg)}.chevron:where([data-position=left]){margin-inline-end:var(--spacing-md);margin-inline-start:var(--spacing-md)}.icon{align-items:center;display:flex;justify-content:center;margin-inline-end:var(--spacing-sm)}.icon:where([data-chevron-position=left]){margin-inline-end:0;margin-inline-start:var(--spacing-lg)}.item{@mixin where-light{--item-border-color:var(--color-gray-3);--item-filled-color:var(--color-gray-2)}@mixin where-dark{--item-border-color:var(--color-dark-4);--item-filled-color:var(--color-dark-6)}}.item:where([data-variant=default]){border-bottom:1px solid var(--item-border-color)}.item:where([data-variant=contained]){border:1px solid var(--item-border-color);transition:background-color .15s ease}.item:where([data-variant=contained]):where([data-active]){background-color:var(--item-filled-color)}.item:where([data-variant=contained]):first-of-type{border-start-end-radius:var(--accordion-radius);border-start-start-radius:var(--accordion-radius)}.item:where([data-variant=contained]):first-of-type>[data-state]{border-start-end-radius:var(--accordion-radius);border-start-start-radius:var(--accordion-radius)}.item:where([data-variant=contained]):last-of-type{border-end-end-radius:var(--accordion-radius);border-end-start-radius:var(--accordion-radius)}.item:where([data-variant=contained]):last-of-type>[data-state]{border-end-end-radius:var(--accordion-radius);border-end-start-radius:var(--accordion-radius)}.item:where([data-variant=contained])+.item:where([data-variant=contained]){border-top:0}.item:where([data-variant=filled]){border-radius:var(--accordion-radius)}.item:where([data-variant=filled]):where([data-active]){background-color:var(--item-filled-color)}.item:where([data-variant=separated]){background-color:var(--item-filled-color);border:1px solid transparent;border-radius:var(--accordion-radius);transition:background-color .15s ease}.item:where([data-variant=separated])[data-active]{border-color:var(--item-border-color);@mixin where-light{background-color:var(--color-white)}@mixin where-dark{background-color:var(--color-dark-7)}}.item:where([data-variant=separated])+.item:where([data-variant=separated]){margin-top:var(--spacing-md)}

package/dist/runtime/components/accordion/accordion.vue

@@ -0,0 +1,91 @@
+<script>
+import { useVarsResolver } from "#imports";
+</script>
+
+<script setup>
+import { getRadius, getSize } from "@nui/utils";
+import { toRefs, useId } from "vue";
+import Box from "../box.vue";
+import css from "./accordion.module.css";
+import { provideAccordionRootState } from "./lib/context";
+const {
+  loop = true,
+  variant = "default",
+  transitionDuration = 200,
+  disableChevronRotation,
+  chevronPosition = "right",
+  chevronSize,
+  chevron,
+  disabled,
+  order,
+  radius,
+  keepMounted = true,
+  classes
+} = defineProps({
+  multiple: { type: null, required: false },
+  defaultValue: { type: null, required: false },
+  loop: { type: Boolean, required: false },
+  variant: { type: String, required: false },
+  transitionDuration: { type: Number, required: false },
+  disableChevronRotation: { type: Boolean, required: false },
+  chevronPosition: { type: String, required: false },
+  chevronSize: { type: [Number, String], required: false },
+  chevron: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  order: { type: String, required: false },
+  radius: { type: [String, Number, Object], required: false },
+  keepMounted: { type: Boolean, required: false },
+  classes: { type: Object, required: false }
+});
+const value = defineModel({ type: null, ...{
+  default: (p) => p.multiple ? [] : null
+} });
+const uid = useId();
+function isItemActive(itemValue) {
+  return Array.isArray(value.value) ? value.value.includes(itemValue) : value.value === itemValue;
+}
+function toggleItem(itemValue) {
+  if (Array.isArray(value.value)) {
+    value.value = value.value.includes(itemValue) ? value.value.filter((v) => v !== itemValue) : [...value.value, itemValue];
+  } else {
+    value.value = value.value === itemValue ? null : itemValue;
+  }
+}
+const rest = toRefs({
+  classes,
+  disabled,
+  variant,
+  transitionDuration,
+  disableChevronRotation,
+  chevronPosition,
+  chevron,
+  order,
+  loop,
+  keepMounted
+});
+provideAccordionRootState({
+  isItemActive,
+  toggleItem,
+  getHeaderId: (v) => `${uid}-header-${v}`,
+  getPanelId: (v) => `${uid}-panel-${v}`,
+  ...rest
+});
+const style = useVarsResolver(() => ({
+  root: {
+    "--accordion-transition-duration": `${transitionDuration}ms`,
+    "--accordion-chevron-size": chevronSize === void 0 ? void 0 : getSize(chevronSize),
+    "--accordion-radius": radius === void 0 ? void 0 : getRadius(radius)
+  }
+}));
+</script>
+
+<template>
+	<Box
+		:id='uid'
+		:style='style.root'
+		:mod='{ variant }'
+		:class='[css.root, classes?.root]'
+	>
+		<slot />
+	</Box>
+</template>

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

@@ -0,0 +1,61 @@
+import type { AnyString, NuanceRadius } from '@nui/types';
+import type { TitleProps } from '../title.vue.js';
+import type { AccordionChevronPosition, AccordionClasses, AccordionVariant } from './lib/context.js';
+export interface AccordionProps<Multiple extends boolean = false> {
+    /** If set, multiple items can be opened at the same time @default false */
+    multiple?: Multiple;
+    /** Uncontrolled default open value(s) */
+    defaultValue?: Multiple extends true ? string[] : string | null;
+    /** If set, arrow keys loop through item headers @default true */
+    loop?: boolean;
+    /** Visual variant @default 'default' */
+    variant?: AccordionVariant;
+    /** Transition duration in ms @default 200 */
+    transitionDuration?: number;
+    /** If set, chevron rotation is disabled @default false */
+    disableChevronRotation?: boolean;
+    /** Position of the chevron relative to the item label @default 'right' */
+    chevronPosition?: AccordionChevronPosition;
+    /** Size of the chevron icon container @default auto */
+    chevronSize?: number | string;
+    /** Custom chevron icon name */
+    chevron?: string;
+    /** Disables the component */
+    disabled?: boolean;
+    /**
+     * Sets heading level (h1-h6) for item headers, wrapping each in the matching heading tag.
+     * Recommended to meet WAI-ARIA requirements. Has no visual effect.
+     */
+    order?: TitleProps['order'];
+    /** Border radius @default theme.defaultRadius */
+    radius?: NuanceRadius | AnyString;
+    /** If `false`, panels are unmounted when collapsed @default true */
+    keepMounted?: boolean;
+    /** Styles API */
+    classes?: AccordionClasses;
+}
+export type AccordionValue<Multiple extends boolean> = Multiple extends true ? string[] : string | null;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <Multiple extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(AccordionProps<Multiple> & {
+        modelValue?: AccordionValue<Multiple>;
+    }) & {
+        "onUpdate:modelValue"?: ((value: AccordionValue<Multiple>) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    };
+    emit: (event: "update:modelValue", value: AccordionValue<Multiple>) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/accordion/index.d.ts

@@ -0,0 +1,6 @@
+export type * from './accordion-header.vue';
+export type * from './accordion-item.vue';
+export type * from './accordion-panel.vue';
+export type * from './accordion.vue';
+export { useAccordionItemState as useAccordionItemContext, useAccordionRootState as useAccordionRootContext, } from './lib/context.js';
+export type * from './lib/context';

package/dist/runtime/components/accordion/index.js

@@ -0,0 +1,4 @@
+export {
+  useAccordionItemState as useAccordionItemContext,
+  useAccordionRootState as useAccordionRootContext
+} from "./lib/context.js";