nuance-ui 0.3.0 → 0.3.1

package/dist/runtime/components/collapse.vue

@@ -0,0 +1,144 @@
+<script>
+import Box from "./box.vue";
+</script>
+
+<script setup>
+import { unrefElement, usePreferredReducedMotion } from "@vueuse/core";
+import { computed, nextTick, onMounted, ref, useId, useTemplateRef, watch } from "vue";
+const {
+  disabled,
+  keepMounted = true,
+  transitionDuration = 200,
+  transitionTimingFunction = "ease",
+  animateOpacity = true,
+  mod,
+  classes
+} = defineProps({
+  defaultOpen: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  keepMounted: { type: Boolean, required: false },
+  transitionDuration: { type: Number, required: false },
+  transitionTimingFunction: { type: String, required: false },
+  animateOpacity: { type: Boolean, required: false },
+  mod: { type: [Object, Array, null], required: false },
+  classes: { type: Object, required: false }
+});
+defineSlots();
+const opened = defineModel("open", { type: Boolean, ...{ default: (p) => p.defaultOpen } });
+const contentId = useId();
+const reducedMotion = usePreferredReducedMotion();
+const duration = computed(() => reducedMotion.value === "reduce" ? 0 : transitionDuration);
+function toggle() {
+  if (disabled)
+    return;
+  opened.value = !opened.value;
+}
+const dataState = computed(() => opened.value ? "open" : "closed");
+const triggerProps = computed(() => ({
+  "aria-controls": contentId,
+  "aria-expanded": opened.value,
+  "disabled": disabled || void 0,
+  "data-state": dataState.value,
+  "data-disabled": disabled ? "" : void 0
+}));
+const el = useTemplateRef("content");
+const mounted = ref(keepMounted || opened.value);
+let timer;
+function transitionStyle() {
+  const opacity = animateOpacity ? `, opacity ${duration.value}ms ${transitionTimingFunction}` : "";
+  return `height ${duration.value}ms ${transitionTimingFunction}${opacity}`;
+}
+function expand(node, instant) {
+  clearTimeout(timer);
+  node.style.overflow = "hidden";
+  if (instant) {
+    node.style.height = "";
+    node.style.opacity = "";
+    node.style.transition = "";
+    node.style.overflow = "";
+    return;
+  }
+  node.style.height = "0px";
+  if (animateOpacity)
+    node.style.opacity = "0";
+  void node.offsetHeight;
+  node.style.transition = transitionStyle();
+  node.style.height = `${node.scrollHeight}px`;
+  if (animateOpacity)
+    node.style.opacity = "1";
+  timer = setTimeout(() => {
+    node.style.transition = "";
+    node.style.height = "";
+    node.style.overflow = "";
+    node.style.opacity = "";
+  }, duration.value);
+}
+function collapse(node, instant) {
+  clearTimeout(timer);
+  node.style.overflow = "hidden";
+  node.style.height = `${node.scrollHeight}px`;
+  void node.offsetHeight;
+  if (instant) {
+    node.style.transition = "";
+    node.style.height = "0px";
+    if (animateOpacity)
+      node.style.opacity = "0";
+    if (!keepMounted)
+      mounted.value = false;
+    return;
+  }
+  node.style.transition = transitionStyle();
+  node.style.height = "0px";
+  if (animateOpacity)
+    node.style.opacity = "0";
+  timer = setTimeout(() => {
+    if (!keepMounted)
+      mounted.value = false;
+  }, duration.value);
+}
+onMounted(() => {
+  const node = unrefElement(el);
+  if (!node || opened.value)
+    return;
+  node.style.height = "0px";
+  node.style.overflow = "hidden";
+  if (animateOpacity)
+    node.style.opacity = "0";
+});
+watch(opened, async (value) => {
+  if (value) {
+    if (!mounted.value) {
+      mounted.value = true;
+      await nextTick();
+    }
+    if (el.value)
+      expand(unrefElement(el), duration.value === 0);
+  } else if (el.value) {
+    collapse(unrefElement(el), duration.value === 0);
+  }
+});
+</script>
+
+<template>
+	<Box
+		:mod='[{ disabled, state: dataState }, mod]'
+		:class='classes?.root'
+	>
+		<slot
+			name='trigger'
+			:open='opened'
+			:toggle='toggle'
+			:props='triggerProps'
+		/>
+
+		<Box
+			v-if='mounted'
+			:id='contentId'
+			ref='content'
+			:class='classes?.content'
+			:mod='{ disabled, open: opened }'
+		>
+			<slot :open='opened' />
+		</Box>
+	</box>
+</template>

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

@@ -0,0 +1,65 @@
+import type { Classes } from '@nui/types';
+import type { BoxProps } from './box.vue.js';
+export type CollapseClasses = 'root' | 'trigger' | 'content';
+/** Props passed to the trigger slot, spread onto a custom toggle element for a11y. */
+export interface CollapseTriggerProps {
+    'aria-controls': string;
+    'aria-expanded': boolean;
+    'disabled': boolean | undefined;
+    'data-state': 'open' | 'closed';
+    'data-disabled': '' | undefined;
+}
+export interface CollapseProps {
+    /**
+     * The open state of the collapsible when it is initially rendered.
+     * Use when you do not need to control its open state.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /** Disables the component */
+    disabled?: boolean;
+    /**
+     * If set, the content stays mounted when collapsed.
+     * When `false`, content is unmounted after the exit transition.
+     * @default true
+     */
+    keepMounted?: boolean;
+    /** Transition duration in ms @default 200 */
+    transitionDuration?: number;
+    /** Transition timing function @default 'ease' */
+    transitionTimingFunction?: string;
+    /** If set, opacity is animated alongside height @default true */
+    animateOpacity?: boolean;
+    /** Element modifiers transformed into `data-` attributes, falsy values are removed */
+    mod?: BoxProps['mod'];
+    /** Styles API */
+    classes?: Classes<CollapseClasses>;
+}
+export interface CollapseSlots {
+    /** Collapsible content */
+    default?: (props: {
+        open: boolean;
+    }) => any;
+    /** Toggle control. Spread `props` onto a button to get a11y wiring. */
+    trigger?: (props: {
+        open: boolean;
+        toggle: () => void;
+        props: CollapseTriggerProps;
+    }) => any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CollapseProps & {
+    open?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<CollapseProps & {
+    open?: boolean;
+}> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CollapseSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/date-time-picker.d.vue.ts

@@ -41,16 +41,16 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     next: () => any;
     "update:modelValue": (value: string | Date | null | undefined) => any;
     prev: () => any;
-    level: () => any;
     open: () => any;
+    level: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSelect?: ((date: import("./calendar/index.js").Selection) => any) | undefined;
     onClose?: (() => any) | undefined;
     onNext?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | Date | null | undefined) => any) | undefined;
     onPrev?: (() => any) | undefined;
-    onLevel?: (() => any) | undefined;
     onOpen?: (() => any) | undefined;
+    onLevel?: (() => 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;

package/dist/runtime/components/date-time-picker.vue.d.ts

@@ -41,16 +41,16 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     next: () => any;
     "update:modelValue": (value: string | Date | null | undefined) => any;
     prev: () => any;
-    level: () => any;
     open: () => any;
+    level: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSelect?: ((date: import("./calendar/index.js").Selection) => any) | undefined;
     onClose?: (() => any) | undefined;
     onNext?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | Date | null | undefined) => any) | undefined;
     onPrev?: (() => any) | undefined;
-    onLevel?: (() => any) | undefined;
     onOpen?: (() => any) | undefined;
+    onLevel?: (() => 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;

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

@@ -1,4 +1,4 @@
-export type * from './accordion.vue';
+export * from './accordion/index.js';
 export * from './action-icon/index.js';
 export * from './app-shell/index.js';
 export * from './avatar/index.js';
@@ -11,7 +11,7 @@ export * from './calendar/index.js';
 export * from './card/index.js';
 export * from './checkbox/index.js';
 export * from './chip/index.js';
-export * from './collapsible/index.js';
+export type * from './collapse.vue';
 export * from './combobox/index.js';
 export type * from './container.vue';
 export type * from './date-time-picker.vue';

package/dist/runtime/components/index.js

@@ -1,3 +1,4 @@
+export * from "./accordion/index.js";
 export * from "./action-icon/index.js";
 export * from "./app-shell/index.js";
 export * from "./avatar/index.js";
@@ -6,7 +7,6 @@ export * from "./calendar/index.js";
 export * from "./card/index.js";
 export * from "./checkbox/index.js";
 export * from "./chip/index.js";
-export * from "./collapsible/index.js";
 export * from "./combobox/index.js";
 export * from "./dialog/index.js";
 export * from "./drawer/index.js";

package/dist/runtime/components/input/date-picker.d.vue.ts

@@ -20,8 +20,8 @@ declare const __VLS_export: <Mode extends SelectionMode>(__VLS_props: NonNullabl
         onNext?: (() => any) | undefined;
         "onUpdate:modelValue"?: ((value: DateSelection<Mode> | undefined) => any) | undefined;
         onPrev?: (() => any) | undefined;
-        onLevel?: (() => any) | undefined;
         onOpen?: (() => any) | undefined;
+        onLevel?: (() => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -38,7 +38,7 @@ declare const __VLS_export: <Mode extends SelectionMode>(__VLS_props: NonNullabl
     } & {
         description?: (props: {}) => any;
     };
-    emit: (((evt: "select", date: DateSelection<Mode>) => void) & ((evt: "close") => void) & ((evt: "next") => void) & ((evt: "prev") => void) & ((evt: "level") => void) & ((evt: "open") => void)) & ((event: "update:modelValue", value: DateSelection<Mode> | undefined) => void);
+    emit: (((evt: "select", date: DateSelection<Mode>) => void) & ((evt: "close") => void) & ((evt: "next") => void) & ((evt: "prev") => void) & ((evt: "open") => void) & ((evt: "level") => void)) & ((event: "update:modelValue", value: DateSelection<Mode> | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/input/date-picker.vue.d.ts

@@ -20,8 +20,8 @@ declare const __VLS_export: <Mode extends SelectionMode>(__VLS_props: NonNullabl
         onNext?: (() => any) | undefined;
         "onUpdate:modelValue"?: ((value: DateSelection<Mode> | undefined) => any) | undefined;
         onPrev?: (() => any) | undefined;
-        onLevel?: (() => any) | undefined;
         onOpen?: (() => any) | undefined;
+        onLevel?: (() => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -38,7 +38,7 @@ declare const __VLS_export: <Mode extends SelectionMode>(__VLS_props: NonNullabl
     } & {
         description?: (props: {}) => any;
     };
-    emit: (((evt: "select", date: DateSelection<Mode>) => void) & ((evt: "close") => void) & ((evt: "next") => void) & ((evt: "prev") => void) & ((evt: "level") => void) & ((evt: "open") => void)) & ((event: "update:modelValue", value: DateSelection<Mode> | undefined) => void);
+    emit: (((evt: "select", date: DateSelection<Mode>) => void) & ((evt: "close") => void) & ((evt: "next") => void) & ((evt: "prev") => void) & ((evt: "open") => void) & ((evt: "level") => void)) & ((event: "update:modelValue", value: DateSelection<Mode> | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/link/lib.d.ts

@@ -1,5 +1,5 @@
 import type { NuxtLinkProps } from '#app';
 export declare function pickLinkProps<T extends NuxtLinkProps>(props: T): {
-    link: Pick<T, "replace" | "target" | "to" | "external" | "rel" | "noRel" | "prefetch" | "noPrefetch" | "prefetchOn" | "trailingSlash" | "activeClass" | "ariaCurrentValue" | "exactActiveClass" | "prefetchedClass" | "viewTransition">;
-    rest: Omit<T, "replace" | "target" | "to" | "external" | "rel" | "noRel" | "prefetch" | "noPrefetch" | "prefetchOn" | "trailingSlash" | "activeClass" | "ariaCurrentValue" | "exactActiveClass" | "prefetchedClass" | "viewTransition">;
+    link: Pick<T, "replace" | "to" | "target" | "external" | "rel" | "noRel" | "prefetch" | "noPrefetch" | "prefetchOn" | "trailingSlash" | "activeClass" | "ariaCurrentValue" | "exactActiveClass" | "prefetchedClass" | "viewTransition">;
+    rest: Omit<T, "replace" | "to" | "target" | "external" | "rel" | "noRel" | "prefetch" | "noPrefetch" | "prefetchOn" | "trailingSlash" | "activeClass" | "ariaCurrentValue" | "exactActiveClass" | "prefetchedClass" | "viewTransition">;
 };

package/dist/runtime/components/tabs/tabs-root.d.vue.ts

@@ -62,8 +62,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
 }>, {
-    orientation: "vertical" | "horizontal";
     variant: TabsVariant;
+    orientation: "vertical" | "horizontal";
     placement: "left" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/tabs/tabs-root.vue.d.ts

@@ -62,8 +62,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
 }>, {
-    orientation: "vertical" | "horizontal";
     variant: TabsVariant;
+    orientation: "vertical" | "horizontal";
     placement: "left" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/text.vue

@@ -45,7 +45,7 @@ const _mod = computed(() => [{
 const style = useVarsResolver((theme) => ({
   root: {
     "--text-fz": getFontSize(fz || size),
-    "--text-ff": ff ? `var(--font-family${ff === "text" ? "" : ff})` : void 0,
+    "--text-ff": ff ? `var(--font-family-${ff === "text" ? "" : ff})` : void 0,
     "--text-fw": fw?.toString(),
     "--text-lh": getLineHeight(lh || size),
     "--text-gradient": variant === "gradient" ? getGradient(gradient, theme) : void 0,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nuance-ui",
-	"version": "0.3.0",
+	"version": "0.3.1",
 	"description": "A modern Nuxt UI library inspired by the best of the React ecosystem.",
 	"repository": {
 		"type": "git",
@@ -46,7 +46,7 @@
 		"dev": "npm run dev:prepare && nuxi dev playground",
 		"dev:build": "nuxi build playground",
 		"dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
-		"release": "npm run lint && npm run prepack && changelogen --release --minor && git push --follow-tags",
+		"release": "npm run lint && npm run prepack && changelogen --release && git push --follow-tags",
 		"lint": "eslint ./src",
 		"test": "vitest run",
 		"test:watch": "vitest watch",

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

@@ -1,79 +0,0 @@
-import type { Classes, NuanceRadius } from '@nui/types';
-import type { TitleProps } from './title.vue.js';
-export interface AccordionItem {
-    label?: string;
-    slot?: string;
-    content?: string;
-    disabled?: boolean;
-    /** Iconify icon */
-    icon?: string;
-    /** Iconify icon */
-    trailingIcon?: string;
-    /**
-   * A unique value for the accordion item. Defaults to the index.
-   * Also used as the Vue `key` for this item, so providing a stable value prevents
-   * accordion content (and its local state) from remounting when items are added, removed,
-   * or reordered.
-   */
-    value?: string;
-}
-type AccordionVariant = 'default' | 'contained' | 'filled' | 'separated';
-export interface AccordionProps<Multiple extends boolean = false> {
-    /** If set, multiple items can be opened at the same time @default false */
-    multiple?: Multiple;
-    /** If set, arrow keys loop through items (first to last and last to first) @default true */
-    loop?: boolean;
-    /** @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?: 'left' | 'right';
-    /** Size of the chevron icon container @default auto */
-    chevronSize?: number | string;
-    /**
-     * Size of the default chevron icon. Ignored when `chevron` prop is set.
-     * Use `chevronSize` instead when using custom chevron.
-     * @default 16
-     */
-    chevronIconSize?: number | string;
-    /**
-     * Sets heading level (h2-h6) for `Accordion.Control` elements.
-     * Wraps each control in the corresponding heading tag, recommended to meet WAI-ARIA accessibility requirements.
-     * Has no visual effect.
-     */
-    order?: TitleProps['order'];
-    /** Custom chevron icon */
-    chevron?: string;
-    /**
-     * Key of `theme.radius` or any valid CSS value to set border-radius.
-     * Numbers are converted to rem.
-     *  @default theme.defaultRadius */
-    radius?: NuanceRadius;
-    /**
-     *  If set to `false`, panels are unmounted when collapsed.
-     * By default, panels stay mounted when collapsed. @default true
-     */
-    keepMounted?: boolean;
-    classes?: Classes<'root' | 'content' | 'item' | 'panel' | 'icon' | 'chevron' | 'label' | 'itemTitle' | 'control'>;
-}
-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>> & (typeof globalThis extends {
-        __VLS_PROPS_FALLBACK: infer P;
-    } ? P : {});
-    expose: (exposed: {}) => void;
-    attrs: any;
-    slots: {};
-    emit: {};
-}>) => 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.vue

@@ -1,44 +0,0 @@
-<script>
-
-</script>
-
-<script setup>
-import { getRadius, getSize, useVarsResolver } from "#imports";
-import Box from "./box.vue";
-const {
-  transitionDuration,
-  chevronSize,
-  radius
-} = defineProps({
-  multiple: { 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 },
-  chevronIconSize: { type: [Number, String], required: false },
-  order: { type: String, required: false },
-  chevron: { type: String, required: false },
-  radius: { type: [String, Number], required: false },
-  keepMounted: { type: Boolean, required: false },
-  classes: { type: Object, required: false }
-});
-const style = useVarsResolver(() => ({
-  root: {
-    "--accordion-transition-duration": transitionDuration === void 0 ? void 0 : `${transitionDuration}ms`,
-    "--accordion-chevron-size": chevronSize === void 0 ? void 0 : getSize(chevronSize),
-    "--accordion-radius": radius === void 0 ? void 0 : getRadius(radius)
-  }
-}));
-</script>
-
-<template>
-	<Box :style='style.root'>
-		accordion
-	</Box>
-</template>
-
-<style module>
-.root{--accordion-radius:var(--radius-default)}.panel{overflow-wrap:break-word}.content{padding:var(--spacing-md);padding-top:calc(var(--spacing-xs)/2)}.itemTitle{margin:0;padding:0;width:100%}.control{align-items:center;background-color:transparent;color:var(--color-bright);cursor:pointer;display:flex;flex-direction:row-reverse;opacity:1;padding-inline:var(--spacing-md);width:100%}.control:where([data-chevron-position=left]){flex-direction:row;padding-inline-start:0}.control:where(:disabled,[data-disabled]){cursor:not-allowed;opacity:.4}.control--contained:where(:not(:disabled,[data-disabled])),.control--default:where(:not(:disabled,[data-disabled])){@mixin hover{@mixin where-light{background-color:var(--color-gray-0)}@mixin where-dark{background-color:var(--color-dark-6)}}}.label{color:inherit;flex:1;font-weight:var(--font-weight-regular);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-0)}@mixin where-dark{--item-border-color:var(--color-dark-4);--item-filled-color:var(--color-dark-6)}}.item--default{border-bottom:1px solid var(--item-border-color)}.item--contained{border:1px solid var(--item-border-color);transition:background-color .15s ease}.item--contained:where([data-active]){background-color:var(--item-filled-color)}.item--contained:first-of-type,.item--contained:first-of-type>[data-accordion-control]{border-start-end-radius:var(--accordion-radius);border-start-start-radius:var(--accordion-radius)}.item--contained:last-of-type,.item--contained:last-of-type>[data-accordion-control]{border-end-end-radius:var(--accordion-radius);border-end-start-radius:var(--accordion-radius)}.item--contained+.item--contained{border-top:0}.item--filled{border-radius:var(--accordion-radius)}.item--filled:where([data-active]){background-color:var(--item-filled-color)}.item--separated{background-color:var(--item-filled-color);border:1px solid transparent;border-radius:var(--accordion-radius);transition:background-color .15s ease}.item--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--separated+.item--separated{margin-top:var(--spacing-md)}
-</style>

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

@@ -1,79 +0,0 @@
-import type { Classes, NuanceRadius } from '@nui/types';
-import type { TitleProps } from './title.vue.js';
-export interface AccordionItem {
-    label?: string;
-    slot?: string;
-    content?: string;
-    disabled?: boolean;
-    /** Iconify icon */
-    icon?: string;
-    /** Iconify icon */
-    trailingIcon?: string;
-    /**
-   * A unique value for the accordion item. Defaults to the index.
-   * Also used as the Vue `key` for this item, so providing a stable value prevents
-   * accordion content (and its local state) from remounting when items are added, removed,
-   * or reordered.
-   */
-    value?: string;
-}
-type AccordionVariant = 'default' | 'contained' | 'filled' | 'separated';
-export interface AccordionProps<Multiple extends boolean = false> {
-    /** If set, multiple items can be opened at the same time @default false */
-    multiple?: Multiple;
-    /** If set, arrow keys loop through items (first to last and last to first) @default true */
-    loop?: boolean;
-    /** @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?: 'left' | 'right';
-    /** Size of the chevron icon container @default auto */
-    chevronSize?: number | string;
-    /**
-     * Size of the default chevron icon. Ignored when `chevron` prop is set.
-     * Use `chevronSize` instead when using custom chevron.
-     * @default 16
-     */
-    chevronIconSize?: number | string;
-    /**
-     * Sets heading level (h2-h6) for `Accordion.Control` elements.
-     * Wraps each control in the corresponding heading tag, recommended to meet WAI-ARIA accessibility requirements.
-     * Has no visual effect.
-     */
-    order?: TitleProps['order'];
-    /** Custom chevron icon */
-    chevron?: string;
-    /**
-     * Key of `theme.radius` or any valid CSS value to set border-radius.
-     * Numbers are converted to rem.
-     *  @default theme.defaultRadius */
-    radius?: NuanceRadius;
-    /**
-     *  If set to `false`, panels are unmounted when collapsed.
-     * By default, panels stay mounted when collapsed. @default true
-     */
-    keepMounted?: boolean;
-    classes?: Classes<'root' | 'content' | 'item' | 'panel' | 'icon' | 'chevron' | 'label' | 'itemTitle' | 'control'>;
-}
-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>> & (typeof globalThis extends {
-        __VLS_PROPS_FALLBACK: infer P;
-    } ? P : {});
-    expose: (exposed: {}) => void;
-    attrs: any;
-    slots: {};
-    emit: {};
-}>) => 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/collapsible/collapsible-content.d.vue.ts

@@ -1,18 +0,0 @@
-import type { BoxProps } from '../box.vue.js';
-export interface CollapsibleContentProps extends BoxProps {
-    /**
-     * Used to force mounting when more control is needed. Useful when
-     * controlling animation with Vue animation libraries.
-     */
-    forceMount?: boolean;
-}
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CollapsibleContentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CollapsibleContentProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?: (props: {}) => any;
-}>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};