nuance-ui 0.3.0 → 0.3.2

package/dist/runtime/notifications/notifications-provider.vue

@@ -0,0 +1,117 @@
+<script setup>
+import { computed, onMounted, ref, useTemplateRef, watch } from "vue";
+import { useVarsResolver } from "#imports";
+import NotificationContainer from "./notification-container.vue";
+import { $notifications } from "./notifications-store";
+import { useNotifications } from "./use-notifications";
+const {
+  position = "bottom-right",
+  autoClose = 4e3,
+  limit = 5,
+  zIndex = 1,
+  containerWidth = 440,
+  transitionDuration = 250,
+  pauseOnHover = "all"
+} = defineProps({
+  position: { type: String, required: false },
+  autoClose: { type: [Number, Boolean], required: false },
+  limit: { type: Number, required: false },
+  zIndex: { type: [Number, String], required: false },
+  containerWidth: { type: [Number, String], required: false },
+  transitionDuration: { type: Number, required: false },
+  pauseOnHover: { type: String, required: false },
+  classes: { type: Object, required: false }
+});
+const POSITIONS = [
+  "top-left",
+  "top-center",
+  "top-right",
+  "bottom-left",
+  "bottom-center",
+  "bottom-right"
+];
+const { notifications } = useNotifications();
+const hoveredId = ref(null);
+const grouped = computed(() => {
+  const acc = Object.fromEntries(
+    POSITIONS.map((p) => [p, []])
+  );
+  for (const n of notifications.value)
+    acc[n.position ?? position].push(n);
+  return acc;
+});
+function isPaused(id) {
+  if (pauseOnHover === "all")
+    return hoveredId.value !== null;
+  return hoveredId.value === id;
+}
+function transitionName(position2) {
+  if (position2.startsWith("top"))
+    return "slide-down";
+  return "slide-up";
+}
+const style = useVarsResolver(() => ({
+  root: {
+    "--notifications-z-index": String(zIndex),
+    "--notifications-width": typeof containerWidth === "number" ? `${containerWidth}px` : containerWidth,
+    "--transition-duration": `${transitionDuration}ms`
+  }
+}));
+const viewportRefs = useTemplateRef("viewports");
+function showPopovers() {
+  for (const el of viewportRefs.value ?? []) {
+    if (el && "showPopover" in el && !el.matches(":popover-open")) {
+      try {
+        el.showPopover();
+      } catch {
+      }
+    }
+  }
+}
+onMounted(() => {
+  $notifications.updateState({
+    limit,
+    defaultPosition: position
+  });
+  showPopovers();
+});
+watch(() => limit, (limit2) => $notifications.updateState({ limit: limit2 }));
+watch(() => position, (position2) => $notifications.updateState({ defaultPosition: position2 }));
+</script>
+
+<template>
+	<div
+		v-for='viewportPosition in POSITIONS'
+		:key='viewportPosition'
+		ref='viewports'
+		popover='manual'
+		role='region'
+		aria-label='Notifications'
+		aria-live='polite'
+		aria-atomic='false'
+		:data-position='viewportPosition'
+		:class='[$style.viewport, classes?.root]'
+		:style='style.root'
+	>
+		<TransitionGroup
+			:name='transitionName(viewportPosition)'
+			:duration='transitionDuration'
+		>
+			<NotificationContainer
+				v-for='n in grouped[viewportPosition]'
+				:key='n.id'
+				:data='n'
+				:auto-close
+				:paused='isPaused(n.id)'
+				:class='classes?.notification'
+				@hide='$notifications.hide($event)'
+				@hover-start='hoveredId = n.id'
+				@hover-end='hoveredId = null'
+			/>
+		</TransitionGroup>
+	</div>
+</template>
+
+<style module>
+.viewport{background:transparent;border:0;display:flex;flex-direction:column-reverse;gap:var(--spacing-sm);inset:auto;margin:0;max-width:100%;overflow:visible;padding:var(--spacing-md);position:fixed;width:var(--notifications-width);z-index:var(--notifications-z-index)}.viewport[data-position=top-left]{left:0;top:0}.viewport[data-position=top-center]{left:50%;top:0;transform:translateX(-50%)}.viewport[data-position=top-right]{right:0;top:0}.viewport[data-position=bottom-left]{bottom:0;flex-direction:column;left:0}.viewport[data-position=bottom-center]{bottom:0;flex-direction:column;left:50%;transform:translateX(-50%)}.viewport[data-position=bottom-right]{bottom:0;flex-direction:column;right:0}.viewport:not(:popover-open){display:none}
+</style>

package/dist/runtime/notifications/notifications-provider.vue.d.ts

@@ -0,0 +1,22 @@
+import type { Classes } from '@nui/types';
+import type { NotificationPosition } from './types.js';
+export interface NotificationProviderProps {
+    /** Default notification position @default 'bottom-right' */
+    position?: NotificationPosition;
+    /** Auto-close in ms, or `false` to disable @default 4000 */
+    autoClose?: number | false;
+    /** Max visible at once @default 5 */
+    limit?: number;
+    /** Viewport z-index @default 1 */
+    zIndex?: number | string;
+    /** Container width @default 440 */
+    containerWidth?: number | string;
+    /** Transition duration in ms @default 250 */
+    transitionDuration?: number;
+    /** Which notifications pause auto-close on hover @default 'all' */
+    pauseOnHover?: 'all' | 'notification';
+    classes?: Classes<'root' | 'notification'>;
+}
+declare const __VLS_export: import("vue").DefineComponent<NotificationProviderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NotificationProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/notifications/notifications-store.d.ts

@@ -0,0 +1,25 @@
+import type { NotificationInput, NotificationsState } from './types.js';
+/**
+ * Global notifications store.
+ *
+ * Holds a reactive list of visible notifications plus an overflow queue.
+ * Shows, updates, and removes notifications from any context.
+ */
+export declare class NotificationsStore {
+    readonly state: NotificationsState;
+    private constructor();
+    static get instance(): NotificationsStore;
+    /** Shows a notification, or queues it past the limit. Returns its id. */
+    show(data: NotificationInput): string;
+    /** Removes a notification and promotes the next queued one. */
+    hide(id: string): void;
+    /** Patches an existing notification in place. Noop if absent. */
+    update(id: string, data: Partial<NotificationInput>): void;
+    /** Removes everything. */
+    clean(): void;
+    /** Removes only queued notifications. */
+    cleanQueue(): void;
+    /** Patches store configuration (limit / defaultPosition). */
+    updateState(patch: Partial<Pick<NotificationsState, 'limit' | 'defaultPosition'>>): void;
+}
+export declare const $notifications: import("vue").Raw<NotificationsStore>;

package/dist/runtime/notifications/notifications-store.js

@@ -0,0 +1,80 @@
+import { markRaw, reactive } from "vue";
+import { createId } from "./lib.js";
+const GLOBAL_KEY = "__nui_notifications_store__";
+export class NotificationsStore {
+  state = reactive({
+    notifications: [],
+    queue: [],
+    limit: 5,
+    defaultPosition: "bottom-right"
+  });
+  constructor() {
+  }
+  static get instance() {
+    if (!globalThis[GLOBAL_KEY])
+      globalThis[GLOBAL_KEY] = new NotificationsStore();
+    return globalThis[GLOBAL_KEY];
+  }
+  /** Shows a notification, or queues it past the limit. Returns its id. */
+  show(data) {
+    const id = data.id ?? createId();
+    const visible = this.state.notifications.find((n) => n.id === id);
+    if (visible) {
+      Object.assign(visible, data, { id });
+      return id;
+    }
+    const queued = this.state.queue.find((n) => n.id === id);
+    if (queued) {
+      Object.assign(queued, data, { id });
+      return id;
+    }
+    const next = { ...data, id };
+    if (this.state.notifications.length < this.state.limit)
+      this.state.notifications.push(next);
+    else
+      this.state.queue.push(next);
+    return id;
+  }
+  /** Removes a notification and promotes the next queued one. */
+  hide(id) {
+    const index = this.state.notifications.findIndex((n) => n.id === id);
+    if (index === -1) {
+      const queuedIndex = this.state.queue.findIndex((n) => n.id === id);
+      if (queuedIndex !== -1)
+        this.state.queue.splice(queuedIndex, 1);
+      return;
+    }
+    this.state.notifications.splice(index, 1);
+    const next = this.state.queue.shift();
+    if (next)
+      this.state.notifications.push(next);
+  }
+  /** Patches an existing notification in place. Noop if absent. */
+  update(id, data) {
+    const visible = this.state.notifications.find((n) => n.id === id);
+    if (visible) {
+      Object.assign(visible, data, { id });
+      return;
+    }
+    const queued = this.state.queue.find((n) => n.id === id);
+    if (queued)
+      Object.assign(queued, data, { id });
+  }
+  /** Removes everything. */
+  clean() {
+    this.state.notifications = [];
+    this.state.queue = [];
+  }
+  /** Removes only queued notifications. */
+  cleanQueue() {
+    this.state.queue = [];
+  }
+  /** Patches store configuration (limit / defaultPosition). */
+  updateState(patch) {
+    if (patch.limit !== void 0)
+      this.state.limit = patch.limit;
+    if (patch.defaultPosition !== void 0)
+      this.state.defaultPosition = patch.defaultPosition;
+  }
+}
+export const $notifications = markRaw(NotificationsStore.instance);

package/dist/runtime/notifications/types.d.ts

@@ -0,0 +1,50 @@
+import type { StringOrVNode } from '@nui/types';
+import type { ButtonProps } from '../components/button/button.vue.js';
+import type { NotificationProps } from '../components/notification.vue.js';
+/** Notification placement on screen. */
+export type NotificationPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+/** Actions/close layout. */
+export type NotificationOrientation = 'vertical' | 'horizontal';
+/** Action button rendered inside a notification. */
+export interface NotificationAction extends ButtonProps {
+    /** Button label */
+    label: string;
+    /** Click handler */
+    onClick?: (event: MouseEvent) => void;
+}
+/** Argument of `$notifications.show()`. */
+export interface NotificationInput extends Omit<NotificationProps, 'title' | 'message'> {
+    /** Stable id. Reusing an existing id updates that notification in place. */
+    id?: string;
+    /** Notification title */
+    title?: StringOrVNode;
+    /** Notification body */
+    message?: StringOrVNode;
+    /** Action buttons */
+    actions?: NotificationAction[];
+    /** Actions/close layout @default 'vertical' */
+    orientation?: NotificationOrientation;
+    /** Overrides the provider position */
+    position?: NotificationPosition;
+    /** Auto-close in ms, or `false` to keep open. Overrides the provider value */
+    autoClose?: number | false;
+    /** Called after the notification is removed */
+    onClose?: (id: string) => void;
+    /** Called once when the notification mounts */
+    onOpen?: (id: string) => void;
+}
+/** Stored notification — always has an id. */
+export interface NotificationData extends NotificationInput {
+    id: string;
+}
+/** Reactive store state. */
+export interface NotificationsState {
+    /** Currently visible notifications (<= limit) */
+    notifications: NotificationData[];
+    /** Notifications waiting for a free slot */
+    queue: NotificationData[];
+    /** Max visible at once */
+    limit: number;
+    /** Position used when a notification has none */
+    defaultPosition: NotificationPosition;
+}

package/dist/runtime/notifications/use-notifications.d.ts

@@ -0,0 +1,7 @@
+/** Reactive access to the global notifications state. */
+export declare function useNotifications(): {
+    /** Currently visible notifications. */
+    notifications: import("vue").ComputedRef<import("./types.js").NotificationData[]>;
+    /** Queued notifications waiting for a free slot. */
+    queue: import("vue").ComputedRef<import("./types.js").NotificationData[]>;
+};

package/dist/runtime/notifications/use-notifications.js

@@ -0,0 +1,10 @@
+import { computed } from "vue";
+import { $notifications } from "./notifications-store.js";
+export function useNotifications() {
+  return {
+    /** Currently visible notifications. */
+    notifications: computed(() => $notifications.state.notifications),
+    /** Queued notifications waiting for a free slot. */
+    queue: computed(() => $notifications.state.queue)
+  };
+}

package/dist/runtime/styles/global.css

@@ -1 +1 @@
-@import url(./baseline.css);@import url(./const.css);@import url(./colors.css);@import url(./dark-theme.css);@import url(./light-theme.css);.light-hidden{@mixin light{display:none}}.dark-hidden{@mixin dark{display:none}}.focus-auto:focus-visible{outline:2px solid var(--color-primary-filled);outline-offset:2px}.focus-always:focus{outline:2px solid var(--color-primary-filled);outline-offset:2px}.focus-never:focus{outline:none}.active:active{transform:translateY(rem(1px))}fieldset:disabled .active:active{transform:none}.rotate-rtl{@mixin where-rtl{transform:rotate(180deg)}}[data-v-hidden]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}
+@import url(./baseline.css);@import url(./const.css);@import url(./colors.css);@import url(./dark-theme.css);@import url(./light-theme.css);@import url(./transitions.css);.light-hidden{@mixin light{display:none}}.dark-hidden{@mixin dark{display:none}}.focus-auto:focus-visible{outline:2px solid var(--color-primary-filled);outline-offset:2px}.focus-always:focus{outline:2px solid var(--color-primary-filled);outline-offset:2px}.focus-never:focus{outline:none}.active:active{transform:translateY(rem(1px))}fieldset:disabled .active:active{transform:none}.rotate-rtl{@mixin where-rtl{transform:rotate(180deg)}}[data-v-hidden]{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}

package/dist/runtime/styles/transitions.css

@@ -0,0 +1 @@
+:root{--transition-delay:0ms;--transition-duration:250ms}.transition-move{transition:transform var(--transition-duration) var(--transition-delay) ease}.fade-enter-active,.fade-leave-active{transition:opacity var(--transition-duration) var(--transition-delay) ease}.fade-enter-from,.fade-leave-to{opacity:0}.fade-up-enter-active,.fade-up-leave-active{transform:translateY(0);transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.fade-up-enter-from,.fade-up-leave-to{opacity:0;transform:translateY(30px)}.fade-down-enter-active,.fade-down-leave-active{transform:translateY(0);transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.fade-down-enter-from,.fade-down-leave-to{opacity:0;transform:translateY(-30px)}.fade-left-enter-active,.fade-left-leave-active{transform:translateX(0);transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.fade-left-enter-from,.fade-left-leave-to{opacity:0;transform:translateX(30px)}.fade-right-enter-active,.fade-right-leave-active{transform:translateX(0);transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.fade-right-enter-from,.fade-right-leave-to{opacity:0;transform:translateX(-30px)}.scale-enter-active,.scale-leave-active{transform:scale(1);transform-origin:top;transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.scale-enter-from,.scale-leave-to{opacity:0;transform:scale(0)}.scale-y-enter-active,.scale-y-leave-active{transform:scaleY(1);transform-origin:top;transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.scale-y-enter-from,.scale-y-leave-to{opacity:0;transform:scaleY(0)}.scale-x-enter-active,.scale-x-leave-active{transform:scaleX(1);transform-origin:top;transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.scale-x-enter-from,.scale-x-leave-to{opacity:0;transform:scaleX(0)}.skew-up-enter-active,.skew-up-leave-active{transform:translateY(0) skew(0deg,0deg);transform-origin:top;transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.skew-up-enter-from,.skew-up-leave-to{opacity:0;transform:translateY(-20px) skew(-10deg,-5deg)}.skew-down-enter-active,.skew-down-leave-active{transform:translateY(0) skew(0deg,0deg);transform-origin:bottom;transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.skew-down-enter-from,.skew-down-leave-to{opacity:0;transform:translateY(20px) skew(-10deg,-5deg)}.rotate-left-enter-active,.rotate-left-leave-active{transform:translateY(0) rotate(0deg);transform-origin:bottom;transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.rotate-left-enter-from,.rotate-left-leave-to{opacity:0;transform:translateY(20px) rotate(-5deg)}.rotate-right-enter-active,.rotate-right-leave-active{transform:translateY(0) rotate(0deg);transform-origin:bottom;transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.rotate-right-enter-from,.rotate-right-leave-to{opacity:0;transform:translateY(20px) rotate(5deg)}.slide-down-enter-active,.slide-down-leave-active{transform:translateY(0);transform-origin:top;transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.slide-down-enter-from,.slide-down-leave-to{opacity:0;transform:translateY(-100%)}.slide-up-enter-active,.slide-up-leave-active{transform:translateY(0);transform-origin:top;transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.slide-up-enter-from,.slide-up-leave-to{opacity:0;transform:translateY(100%)}.slide-left-enter-active,.slide-left-leave-active{transform:translateX(0);transform-origin:top;transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.slide-left-enter-from,.slide-left-leave-to{opacity:0;transform:translateX(100%)}.slide-right-enter-active,.slide-right-leave-active{transform:translateX(0);transform-origin:top;transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.slide-right-enter-from,.slide-right-leave-to{opacity:0;transform:translateX(-100%)}.pop-enter-active,.pop-leave-active{transform:scale(1);transform-origin:center center;transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.pop-enter-from,.pop-leave-to{opacity:0;transform:scale(.9) translateY(10px);transform-origin:center center}.pop-bottom-left-enter-active,.pop-bottom-left-leave-active{transform:scale(1);transform-origin:bottom left;transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.pop-bottom-left-enter-from,.pop-bottom-left-leave-to{opacity:0;transform:scale(.9) translateY(10px);transform-origin:bottom left}.pop-bottom-right-enter-active,.pop-bottom-right-leave-active{transform:scale(1);transform-origin:bottom right;transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.pop-bottom-right-enter-from,.pop-bottom-right-leave-to{opacity:0;transform:scale(.9) translateY(10px);transform-origin:bottom right}.pop-top-left-enter-active,.pop-top-left-leave-active{transform:scale(1);transform-origin:top left;transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.pop-top-left-enter-from,.pop-top-left-leave-to{opacity:0;transform:scale(.9) translateY(-10px);transform-origin:top left}.pop-top-right-enter-active,.pop-top-right-leave-active{transform:scale(1);transform-origin:top right;transition:opacity var(--transition-duration) var(--transition-delay) ease,transform var(--transition-duration) ease}.pop-top-right-enter-from,.pop-top-right-leave-to{opacity:0;transform:scale(.9) translateY(-10px);transform-origin:top right}

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

@@ -4,6 +4,8 @@ export type * from './styling';
 export type * from './theme';
 /** Value that may be synchronous or wrapped in a promise. */
 export type MaybePromise<T = unknown> = T | Promise<T>;
+/** String, VNode, or a render function producing a VNode. */
+export type StringOrVNode = string | VNode | (() => VNode);
 export type AnyString = string & {};
 export type DynamicSlotsKeys<Name extends string | undefined, Suffix extends string | undefined = undefined> = (Name extends string ? Suffix extends string ? Name | `${Name}-${Suffix}` : Name : never);
 export type SlotProps<T extends {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nuance-ui",
-	"version": "0.3.0",
+	"version": "0.3.2",
 	"description": "A modern Nuxt UI library inspired by the best of the React ecosystem.",
 	"repository": {
 		"type": "git",
@@ -46,11 +46,11 @@
 		"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",
-		"test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
+		"test": "vitest",
+		"lint:ts": "vue-tsc --noEmit",
+		"lint:playground:ts": "cd playground && vue-tsc --noEmit"
 	},
 	"dependencies": {
 		"@floating-ui/vue": "^1.1.10",
@@ -90,9 +90,13 @@
 		"@nuxtjs/stylelint-module": "^5.2.1",
 		"@types/node": "latest",
 		"@vee-validate/nuxt": "^4.15.1",
+		"@vitejs/plugin-vue": "^6.0.7",
+		"@vue/test-utils": "^2.4.11",
 		"changelogen": "^0.6.2",
 		"eslint": "^9.39.2",
+		"happy-dom": "^20.10.6",
 		"nuxt": "^4.4.2",
+		"playwright-core": "^1.61.1",
 		"postcss": "^8.5.6",
 		"postcss-preset-mantine": "^1.18.0",
 		"postcss-simple-vars": "^7.0.1",
@@ -117,4 +121,4 @@
 		"vue-components",
 		"ui"
 	]
-}
+}

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;
-    };
-};