nuance-ui 0.2.35 → 0.3.0

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.35",
+  "version": "0.3.0",
   "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.d.vue.ts

@@ -0,0 +1,79 @@
+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

@@ -0,0 +1,44 @@
+<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

@@ -0,0 +1,79 @@
+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/action-icon/action-icon.d.vue.ts

@@ -4,11 +4,13 @@ export type ActionIconClasses = 'root' | 'icon';
 export type ActionIconVariant = 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient';
 export type ActionIconSize = NuanceSize | `input-${NuanceSize}` | AnyString;
 export interface ActionIconVars {
-    root: '--ai-size' | '--ai-radius' | '--ai-bg' | '--ai-hover' | '--ai-color' | '--ai-bd';
+    root: '--ai-size' | '--ai-icon-size' | '--ai-radius' | '--ai-bg' | '--ai-hover' | '--ai-color' | '--ai-bd';
 }
 export interface ActionIconProps {
     /** Component size  @default 'md' */
     size?: ActionIconSize;
+    /** Icon size — `%` stays relative to the button, other values resolve via size tokens @default '70%' */
+    iconSize?: number | string;
     /** Gradient configuration (used with `variant="gradient"`) */
     gradient?: NuanceGradient;
     /** Color from theme */
@@ -25,6 +27,14 @@ export interface ActionIconProps {
     mod?: BoxProps['mod'];
     /** Visual variant */
     variant?: ActionIconVariant;
+    /** Active/pressed state — adds `data-active` and the matching ARIA attribute */
+    active?: boolean;
+    /** ARIA semantic for `active` @default 'pressed' */
+    activeMode?: 'pressed' | 'current';
+    /** Variant applied when `active`. Defaults to the configured map for the current `variant` */
+    activeVariant?: ActionIconVariant;
+    /** Color applied when `active` @default 'primary' */
+    activeColor?: NuanceColor;
     /** Styles API */
     classes?: Classes<ActionIconClasses>;
 }

package/dist/runtime/components/action-icon/action-icon.module.css

@@ -1 +1 @@
-.root{--ai-size-xs:rem(26px);--ai-size-sm:rem(30px);--ai-size-md:rem(36px);--ai-size-lg:rem(42px);--ai-size-xl:rem(50px);--ai-size-input-xs:rem(30px);--ai-size-input-sm:rem(36px);--ai-size-input-md:rem(42px);--ai-size-input-lg:rem(50px);--ai-size-input-xl:rem(60px);--ai-size:var(--ai-size-sm);--ai-color:var(--color-white);--ai-radius:var(--radius-default);--ai-bg:var(--color-primary-filled);--ai-hover:var(--color-primary-filled-hover);align-items:center;background:var(--ai-bg,var(--color-primary-filled));border:var(--ai-bd,rem(1px) solid transparent);border-radius:var(--ai-radius,var(--radius-default));color:var(--ai-color,var(--color-white));cursor:pointer;display:inline-flex;height:var(--ai-size);justify-content:center;line-height:1;min-height:var(--ai-size);min-width:var(--ai-size);overflow:hidden;padding:0;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:var(--ai-size)}.root[data-loading]{cursor:not-allowed}.root[data-loading] .icon{opacity:0;transform:translateY(100%)}.root:where(:disabled:not([data-loading]),[data-disabled]:not([data-loading])){border:1px solid transparent;cursor:not-allowed}.root:where(:disabled:not([data-loading]),[data-disabled]:not([data-loading])):active{transform:none}.root:where(:disabled:not([data-loading]),[data-disabled]:not([data-loading])){@mixin where-light{background-color:var(--color-gray-1);color:var(--color-gray-5)}}.root:where(:disabled:not([data-loading]),[data-disabled]:not([data-loading])){@mixin where-dark{background-color:var(--color-dark-6);color:var(--color-dark-3)}}.root:hover:where(:not([data-loading],:disabled,[data-disabled])){background-color:var(--ai-hover);color:var(--ai-color)}.loader{align-items:center;border-radius:var(--ai-radius,var(--radius-default));display:flex;justify-content:center;left:calc(50% - var(--loader-size)/2);position:absolute;top:calc(50% - var(--loader-size)/2);@mixin where-light{background-color:hsla(0,0%,100%,.15)}@mixin where-dark{background-color:rgba(0,0,0,.15)}}.icon{align-items:center;display:flex;height:100%;justify-content:center;transition:transform .15s ease,opacity .1s ease;width:100%}.icon-element{height:70%;width:70%}.group{--ai-border-width:1px;display:flex}.group :where(*):focus{position:relative;z-index:1}.group[data-orientation=horizontal]{flex-direction:row}.group[data-orientation=horizontal] .groupSection:not(:only-child):first-child,.group[data-orientation=horizontal] .root:not(:only-child):first-child{border-end-end-radius:0;border-inline-end-width:calc(var(--ai-border-width)/2);border-start-end-radius:0}.group[data-orientation=horizontal] .groupSection:not(:only-child):last-child,.group[data-orientation=horizontal] .root:not(:only-child):last-child{border-end-start-radius:0;border-inline-start-width:calc(var(--ai-border-width)/2);border-start-start-radius:0}.group[data-orientation=horizontal] .groupSection:not(:only-child):not(:first-child):not(:last-child),.group[data-orientation=horizontal] .root:not(:only-child):not(:first-child):not(:last-child){border-inline-width:calc(var(--ai-border-width)/2);border-radius:0}.group[data-orientation=vertical]{flex-direction:column}.group[data-orientation=vertical] .groupSection:not(:only-child):first-child,.group[data-orientation=vertical] .root:not(:only-child):first-child{border-bottom-width:calc(var(--ai-border-width)/2);border-end-end-radius:0;border-end-start-radius:0}.group[data-orientation=vertical] .groupSection:not(:only-child):last-child,.group[data-orientation=vertical] .root:not(:only-child):last-child{border-start-end-radius:0;border-start-start-radius:0;border-top-width:calc(var(--ai-border-width)/2)}.group[data-orientation=vertical] .groupSection:not(:only-child):not(:first-child):not(:last-child),.group[data-orientation=vertical] .root:not(:only-child):not(:first-child):not(:last-child){border-bottom-width:calc(var(--ai-border-width)/2);border-radius:0;border-top-width:calc(var(--ai-border-width)/2)}.section{--section-height-xs:var(--ai-size-xs);--section-height-sm:var(--ai-size-sm);--section-height-md:var(--ai-size-md);--section-height-lg:var(--ai-size-lg);--section-height-xl:var(--ai-size-xl);--section-height-input-xs:var(--ai-size-input-xs);--section-height-input-sm:var(--ai-size-input-sm);--section-height-input-md:var(--ai-size-input-md);--section-height-input-lg:var(--ai-size-input-lg);--section-height-input-xl:var(--ai-size-input-xl);--section-padding-x-xs:rem(6px);--section-padding-x-sm:rem(8px);--section-padding-x-md:rem(10px);--section-padding-x-lg:rem(12px);--section-padding-x-xl:rem(16px);--section-height:var(--section-height-sm);--section-padding-x:var(--section-padding-x-sm);--section-color:var(--color-white);align-items:center;background:var(--section-bg,var(--color-primary-filled));border:var(--section-bd,rem(1px) solid transparent);border-radius:var(--section-radius,var(--radius-default));color:var(--section-color,var(--color-white));display:inline-flex;font-size:var(--section-fz,var(--font-size-md));font-weight:600;height:var(--section-height,var(--section-height-sm));justify-content:center;line-height:1;padding-inline:var(--section-padding-x,var(--section-padding-x-sm));vertical-align:middle;width:auto}
+.root{--ai-size-xs:rem(26px);--ai-size-sm:rem(30px);--ai-size-md:rem(36px);--ai-size-lg:rem(42px);--ai-size-xl:rem(50px);--ai-size-input-xs:rem(30px);--ai-size-input-sm:rem(36px);--ai-size-input-md:rem(42px);--ai-size-input-lg:rem(50px);--ai-size-input-xl:rem(60px);--ai-size:var(--ai-size-sm);--ai-icon-size:70%;--ai-color:var(--color-white);--ai-radius:var(--radius-default);--ai-bg:var(--color-primary-filled);--ai-hover:var(--color-primary-filled-hover);align-items:center;background:var(--ai-bg,var(--color-primary-filled));border:var(--ai-bd,rem(1px) solid transparent);border-radius:var(--ai-radius,var(--radius-default));color:var(--ai-color,var(--color-white));cursor:pointer;display:inline-flex;height:var(--ai-size);justify-content:center;line-height:1;min-height:var(--ai-size);min-width:var(--ai-size);overflow:hidden;padding:0;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:var(--ai-size)}.root[data-loading]{cursor:not-allowed}.root[data-loading] .icon{opacity:0;transform:translateY(100%)}.root:where(:disabled:not([data-loading]),[data-disabled]:not([data-loading])){border:1px solid transparent;cursor:not-allowed}.root:where(:disabled:not([data-loading]),[data-disabled]:not([data-loading])):active{transform:none}.root:where(:disabled:not([data-loading]),[data-disabled]:not([data-loading])){@mixin where-light{background-color:var(--color-gray-1);color:var(--color-gray-5)}}.root:where(:disabled:not([data-loading]),[data-disabled]:not([data-loading])){@mixin where-dark{background-color:var(--color-dark-6);color:var(--color-dark-3)}}.root:hover:where(:not([data-loading],:disabled,[data-disabled])){background-color:var(--ai-hover);color:var(--ai-color)}.loader{align-items:center;border-radius:var(--ai-radius,var(--radius-default));display:flex;justify-content:center;left:calc(50% - var(--loader-size)/2);position:absolute;top:calc(50% - var(--loader-size)/2);@mixin where-light{background-color:hsla(0,0%,100%,.15)}@mixin where-dark{background-color:rgba(0,0,0,.15)}}.icon{align-items:center;display:flex;height:100%;justify-content:center;transition:transform .15s ease,opacity .1s ease;width:100%}.icon-element{height:var(--ai-icon-size);width:var(--ai-icon-size)}.group{--ai-border-width:1px;display:flex}.group :where(*):focus{position:relative;z-index:1}.group[data-orientation=horizontal]{flex-direction:row}.group[data-orientation=horizontal] .groupSection:not(:only-child):first-child,.group[data-orientation=horizontal] .root:not(:only-child):first-child{border-end-end-radius:0;border-inline-end-width:calc(var(--ai-border-width)/2);border-start-end-radius:0}.group[data-orientation=horizontal] .groupSection:not(:only-child):last-child,.group[data-orientation=horizontal] .root:not(:only-child):last-child{border-end-start-radius:0;border-inline-start-width:calc(var(--ai-border-width)/2);border-start-start-radius:0}.group[data-orientation=horizontal] .groupSection:not(:only-child):not(:first-child):not(:last-child),.group[data-orientation=horizontal] .root:not(:only-child):not(:first-child):not(:last-child){border-inline-width:calc(var(--ai-border-width)/2);border-radius:0}.group[data-orientation=vertical]{flex-direction:column}.group[data-orientation=vertical] .groupSection:not(:only-child):first-child,.group[data-orientation=vertical] .root:not(:only-child):first-child{border-bottom-width:calc(var(--ai-border-width)/2);border-end-end-radius:0;border-end-start-radius:0}.group[data-orientation=vertical] .groupSection:not(:only-child):last-child,.group[data-orientation=vertical] .root:not(:only-child):last-child{border-start-end-radius:0;border-start-start-radius:0;border-top-width:calc(var(--ai-border-width)/2)}.group[data-orientation=vertical] .groupSection:not(:only-child):not(:first-child):not(:last-child),.group[data-orientation=vertical] .root:not(:only-child):not(:first-child):not(:last-child){border-bottom-width:calc(var(--ai-border-width)/2);border-radius:0;border-top-width:calc(var(--ai-border-width)/2)}.section{--section-height-xs:var(--ai-size-xs);--section-height-sm:var(--ai-size-sm);--section-height-md:var(--ai-size-md);--section-height-lg:var(--ai-size-lg);--section-height-xl:var(--ai-size-xl);--section-height-input-xs:var(--ai-size-input-xs);--section-height-input-sm:var(--ai-size-input-sm);--section-height-input-md:var(--ai-size-input-md);--section-height-input-lg:var(--ai-size-input-lg);--section-height-input-xl:var(--ai-size-input-xl);--section-padding-x-xs:rem(6px);--section-padding-x-sm:rem(8px);--section-padding-x-md:rem(10px);--section-padding-x-lg:rem(12px);--section-padding-x-xl:rem(16px);--section-height:var(--section-height-sm);--section-padding-x:var(--section-padding-x-sm);--section-color:var(--color-white);align-items:center;background:var(--section-bg,var(--color-primary-filled));border:var(--section-bd,rem(1px) solid transparent);border-radius:var(--section-radius,var(--radius-default));color:var(--section-color,var(--color-white));display:inline-flex;font-size:var(--section-fz,var(--font-size-md));font-weight:600;height:var(--section-height,var(--section-height-sm));justify-content:center;line-height:1;padding-inline:var(--section-padding-x,var(--section-padding-x-sm));vertical-align:middle;width:auto}

package/dist/runtime/components/action-icon/action-icon.vue

@@ -5,8 +5,9 @@ import Box from "../box.vue";
 import Loader from "../loader/loader.vue";
 import css from "./action-icon.module.css";
 const {
-  color,
+  color = "gray",
   size,
+  iconSize,
   variant = "default",
   gradient,
   loading,
@@ -14,9 +15,14 @@ const {
   radius,
   mod,
   icon,
-  disabled
+  disabled,
+  active,
+  activeMode = "pressed",
+  activeVariant,
+  activeColor = "primary"
 } = defineProps({
   size: { type: null, required: false },
+  iconSize: { type: [Number, String], required: false },
   gradient: { type: Object, required: false },
   color: { type: null, required: false },
   radius: { type: [String, Number, Object], required: false },
@@ -25,19 +31,26 @@ const {
   disabled: { type: Boolean, required: false },
   mod: { type: [Object, Array, null], required: false },
   variant: { type: String, required: false },
+  active: { type: Boolean, required: false },
+  activeMode: { type: String, required: false },
+  activeVariant: { type: String, required: false },
+  activeColor: { type: null, required: false },
   classes: { type: Object, required: false }
 });
-const { variantResolver } = useConfig();
+const { variantResolver, activeVariants } = useConfig();
 const style = useVarsResolver((theme) => {
+  const resolvedVariant = active ? activeVariant ?? activeVariants[variant] : variant;
+  const resolvedColor = active ? activeColor : color;
   const {
     background,
     border,
     hover,
     text
-  } = variantResolver({ variant, color, theme, gradient });
+  } = variantResolver({ variant: resolvedVariant, color: resolvedColor, theme, gradient });
   return {
     root: {
       "--ai-size": getSize(size, "ai-size"),
+      "--ai-icon-size": getSize(iconSize),
       "--ai-radius": getRadius(radius),
       "--ai-bg": background,
       "--ai-hover": hover,
@@ -52,10 +65,12 @@ const style = useVarsResolver((theme) => {
 	<Box
 		is='button'
 		type='button'
-		:mod='[{ loading }, mod]'
+		:mod='[{ loading, active }, mod]'
 		:style='style.root'
 		:class='[css.root, classes?.root]'
 		:disabled='(!disabled ? loading : disabled) || void 0'
+		:aria-pressed='activeMode === "pressed" ? active : void 0'
+		:aria-current='active && activeMode === "current" ? "page" : void 0'
 	>
 		<Transition name='slide-down'>
 			<Loader

package/dist/runtime/components/action-icon/action-icon.vue.d.ts

@@ -4,11 +4,13 @@ export type ActionIconClasses = 'root' | 'icon';
 export type ActionIconVariant = 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient';
 export type ActionIconSize = NuanceSize | `input-${NuanceSize}` | AnyString;
 export interface ActionIconVars {
-    root: '--ai-size' | '--ai-radius' | '--ai-bg' | '--ai-hover' | '--ai-color' | '--ai-bd';
+    root: '--ai-size' | '--ai-icon-size' | '--ai-radius' | '--ai-bg' | '--ai-hover' | '--ai-color' | '--ai-bd';
 }
 export interface ActionIconProps {
     /** Component size  @default 'md' */
     size?: ActionIconSize;
+    /** Icon size — `%` stays relative to the button, other values resolve via size tokens @default '70%' */
+    iconSize?: number | string;
     /** Gradient configuration (used with `variant="gradient"`) */
     gradient?: NuanceGradient;
     /** Color from theme */
@@ -25,6 +27,14 @@ export interface ActionIconProps {
     mod?: BoxProps['mod'];
     /** Visual variant */
     variant?: ActionIconVariant;
+    /** Active/pressed state — adds `data-active` and the matching ARIA attribute */
+    active?: boolean;
+    /** ARIA semantic for `active` @default 'pressed' */
+    activeMode?: 'pressed' | 'current';
+    /** Variant applied when `active`. Defaults to the configured map for the current `variant` */
+    activeVariant?: ActionIconVariant;
+    /** Color applied when `active` @default 'primary' */
+    activeColor?: NuanceColor;
     /** Styles API */
     classes?: Classes<ActionIconClasses>;
 }

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

@@ -30,6 +30,14 @@ export interface ButtonProps extends BoxProps {
     rightSectionProps?: HTMLAttributes;
     /** Visual variant */
     variant?: ButtonVariant;
+    /** Active/pressed state — adds `data-active` and the matching ARIA attribute */
+    active?: boolean;
+    /** ARIA semantic for `active` @default 'pressed' */
+    activeMode?: 'pressed' | 'current';
+    /** Variant applied when `active`. Defaults to the configured map for the current `variant` */
+    activeVariant?: ButtonVariant;
+    /** Color applied when `active` @default 'primary' */
+    activeColor?: NuanceColor;
     /** Styles API */
     classes?: Classes<ButtonClasses>;
 }

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

@@ -1 +1 @@
-.root{--button-height-xs:rem(26px);--button-height-sm:rem(30px);--button-height-md:rem(36px);--button-height-lg:rem(42px);--button-height-xl:rem(50px);--button-height-compact-xs:rem(22px);--button-height-compact-sm:rem(26px);--button-height-compact-md:rem(30px);--button-height-compact-lg:rem(34px);--button-height-compact-xl:rem(40px);--button-padding-x-xs:rem(14px);--button-padding-x-sm:rem(18px);--button-padding-x-md:rem(22px);--button-padding-x-lg:rem(26px);--button-padding-x-xl:rem(32px);--button-padding-x-compact-xs:rem(7px);--button-padding-x-compact-sm:rem(8px);--button-padding-x-compact-md:rem(10px);--button-padding-x-compact-lg:rem(12px);--button-padding-x-compact-xl:rem(14px);--button-height:var(--button-height-sm);--button-padding-x:var(--button-padding-x-sm);--button-color:var(--color-white);--button-fz:var(--font-size-md);--button-bg:var(--color-primary-filled);--button-radius:var(--radius-default);--button-hover:var(--color-primary-filled-hover);--button-spacing:0;--button-justify:center;--button-section-size:calc(var(--button-height) - 0.25rem);background:var(--button-bg);border:var(--button-bd,rem(1px) solid transparent);border-radius:var(--button-radius);color:var(--button-color,var(--color-white));cursor:pointer;display:inline-block;font-size:var(--button-fz);font-weight:500;height:var(--button-height,var(--button-height-sm));line-height:1;overflow:hidden;padding-inline:var(--button-padding-x,var(--button-padding-x-sm));position:relative;text-align:center;transition:background-color .2s ease-in,color .2s ease-in;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:auto}.root:where([data-with-left-section]){padding-inline-start:0}.root:where([data-with-right-section]){padding-inline-end:0}.root:where([data-variant=gradient-outline]){background-clip:padding-box,border-box;background-origin:border-box}.root:where(:disabled:not([data-loading])){background:var(--color-disabled);border:1px solid transparent;color:var(--color-disabled-text);cursor:not-allowed;transform:none}.root:before{border-radius:var(--button-radius,var(--radius-default));content:"";filter:blur(12px);inset:-1px;opacity:0;pointer-events:none;position:absolute;transform:translateY(-100%);transition:transform .15s ease,opacity .1s ease;@mixin where-light{background:var(--color-gray-1);color:var(--color-gray-5)}@mixin where-dark{background:var(--color-dark-6);color:var(--color-dark-3)}}.root:where([data-loading]){cursor:not-allowed;transform:none}.root:where([data-loading]):before{opacity:1;transform:translateY(0)}.root:where([data-loading]) .inner{opacity:0;transform:translateY(100%)}.root:hover:where(:not([data-loading],:disabled)),.root[data-active]{background:var(--button-hover);color:var(--button-color)}.root:hover:where(:not([data-loading],:disabled)):where([data-variant=gradient-outline]),.root[data-active]:where([data-variant=gradient-outline]){color:#fff}.inner{gap:var(--button-spacing);justify-content:center;overflow:visible;transition:transform .15s ease,opacity .1s ease;width:100%}.inner,.label{align-items:center;display:flex;height:100%}.label{flex:1;justify-content:var(--button-justify);opacity:1;overflow:hidden;white-space:nowrap}.label:where([data-loading]){opacity:.2}.section{--section-pointer-events:none;align-items:center;display:flex;height:100%;justify-content:center;pointer-events:var(--section-pointer-events);width:var(--button-section-size)}.loader{left:calc(50% - var(--loader-size)/2);position:absolute;top:calc(50% - var(--loader-size)/2)}.group{--group-border-width:1px;display:flex}.group>:where(*):focus{position:relative;z-index:1}.group[data-orientation=horizontal]{flex-direction:row}.group[data-orientation=horizontal]>:where(*):not(:only-child):first-child{border-end-end-radius:0;border-inline-end-width:calc(var(--group-border-width)/2);border-start-end-radius:0}.group[data-orientation=horizontal]>:where(*):not(:only-child):last-child{border-end-start-radius:0;border-inline-start-width:calc(var(--group-border-width)/2);border-start-start-radius:0}.group[data-orientation=horizontal]>:where(*):not(:only-child):not(:first-child):not(:last-child){border-inline-width:calc(var(--group-border-width)/2);border-radius:0}.group[data-orientation=vertical]{flex-direction:column}.group[data-orientation=vertical]>:where(*):not(:only-child):first-child{border-bottom-width:calc(var(--group-border-width)/2);border-end-end-radius:0;border-end-start-radius:0}.group[data-orientation=vertical]>:where(*):not(:only-child):last-child{border-start-end-radius:0;border-start-start-radius:0;border-top-width:calc(var(--group-border-width)/2)}.group[data-orientation=vertical]>:where(*):not(:only-child):not(:first-child):not(:last-child){border-bottom-width:calc(var(--group-border-width)/2);border-radius:0;border-top-width:calc(var(--group-border-width)/2)}
+.root{--button-height-xs:rem(26px);--button-height-sm:rem(30px);--button-height-md:rem(36px);--button-height-lg:rem(42px);--button-height-xl:rem(50px);--button-height-compact-xs:rem(22px);--button-height-compact-sm:rem(26px);--button-height-compact-md:rem(30px);--button-height-compact-lg:rem(34px);--button-height-compact-xl:rem(40px);--button-padding-x-xs:rem(14px);--button-padding-x-sm:rem(18px);--button-padding-x-md:rem(22px);--button-padding-x-lg:rem(26px);--button-padding-x-xl:rem(32px);--button-padding-x-compact-xs:rem(7px);--button-padding-x-compact-sm:rem(8px);--button-padding-x-compact-md:rem(10px);--button-padding-x-compact-lg:rem(12px);--button-padding-x-compact-xl:rem(14px);--button-height:var(--button-height-sm);--button-padding-x:var(--button-padding-x-sm);--button-color:var(--color-white);--button-fz:var(--font-size-md);--button-bg:var(--color-primary-filled);--button-radius:var(--radius-default);--button-hover:var(--color-primary-filled-hover);--button-spacing:0;--button-justify:center;--button-section-size:calc(var(--button-height) - 0.25rem);background:var(--button-bg);border:var(--button-bd,rem(1px) solid transparent);border-radius:var(--button-radius);color:var(--button-color,var(--color-white));cursor:pointer;display:inline-block;font-size:var(--button-fz);font-weight:500;height:var(--button-height,var(--button-height-sm));line-height:1;overflow:hidden;padding-inline:var(--button-padding-x,var(--button-padding-x-sm));position:relative;text-align:center;transition:background-color .2s ease-in,color .2s ease-in;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:auto}.root:where([data-with-left-section]){padding-inline-start:0}.root:where([data-with-right-section]){padding-inline-end:0}.root:where([data-variant=gradient-outline]){background-clip:padding-box,border-box;background-origin:border-box}.root:where(:disabled:not([data-loading])){background:var(--color-disabled);border:1px solid transparent;color:var(--color-disabled-text);cursor:not-allowed;transform:none}.root:before{border-radius:var(--button-radius,var(--radius-default));content:"";filter:blur(12px);inset:-1px;opacity:0;pointer-events:none;position:absolute;transform:translateY(-100%);transition:transform .15s ease,opacity .1s ease;@mixin where-light{background:var(--color-gray-1);color:var(--color-gray-5)}@mixin where-dark{background:var(--color-dark-6);color:var(--color-dark-3)}}.root:where([data-loading]){cursor:not-allowed;transform:none}.root:where([data-loading]):before{opacity:1;transform:translateY(0)}.root:where([data-loading]) .inner{opacity:0;transform:translateY(100%)}.root:hover:where(:not([data-loading],:disabled)){background:var(--button-hover);color:var(--button-color)}.root:hover:where(:not([data-loading],:disabled)):where([data-variant=gradient-outline]){color:#fff}.inner{gap:var(--button-spacing);justify-content:center;overflow:visible;transition:transform .15s ease,opacity .1s ease;width:100%}.inner,.label{align-items:center;display:flex;height:100%}.label{flex:1;justify-content:var(--button-justify);opacity:1;overflow:hidden;white-space:nowrap}.label:where([data-loading]){opacity:.2}.section{--section-pointer-events:none;align-items:center;display:flex;height:100%;justify-content:center;pointer-events:var(--section-pointer-events);width:var(--button-section-size)}.loader{left:calc(50% - var(--loader-size)/2);position:absolute;top:calc(50% - var(--loader-size)/2)}.group{--group-border-width:1px;display:flex}.group>:where(*):focus{position:relative;z-index:1}.group[data-orientation=horizontal]{flex-direction:row}.group[data-orientation=horizontal]>:where(*):not(:only-child):first-child{border-end-end-radius:0;border-inline-end-width:calc(var(--group-border-width)/2);border-start-end-radius:0}.group[data-orientation=horizontal]>:where(*):not(:only-child):last-child{border-end-start-radius:0;border-inline-start-width:calc(var(--group-border-width)/2);border-start-start-radius:0}.group[data-orientation=horizontal]>:where(*):not(:only-child):not(:first-child):not(:last-child){border-inline-width:calc(var(--group-border-width)/2);border-radius:0}.group[data-orientation=vertical]{flex-direction:column}.group[data-orientation=vertical]>:where(*):not(:only-child):first-child{border-bottom-width:calc(var(--group-border-width)/2);border-end-end-radius:0;border-end-start-radius:0}.group[data-orientation=vertical]>:where(*):not(:only-child):last-child{border-start-end-radius:0;border-start-start-radius:0;border-top-width:calc(var(--group-border-width)/2)}.group[data-orientation=vertical]>:where(*):not(:only-child):not(:first-child):not(:last-child){border-bottom-width:calc(var(--group-border-width)/2);border-radius:0;border-top-width:calc(var(--group-border-width)/2)}

package/dist/runtime/components/button/button.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { useConfig, useVarsResolver } from "@nui/composables";
 import { getFontSize, getRadius, getSize, getSpacing } from "@nui/utils";
+import { computed } from "vue";
 import Box from "../box.vue";
 import Loader from "../loader/loader.vue";
 import css from "./button.module.css";
@@ -14,6 +15,10 @@ const {
   loading,
   classes,
   rightSectionProps,
+  active,
+  activeMode = "pressed",
+  activeVariant,
+  activeColor = "primary",
   ...props
 } = defineProps({
   color: { type: null, required: false },
@@ -29,16 +34,21 @@ const {
   leftSectionProps: { type: Object, required: false },
   rightSectionProps: { type: Object, required: false },
   variant: { type: String, required: false },
+  active: { type: Boolean, required: false },
+  activeMode: { type: String, required: false },
+  activeVariant: { type: String, required: false },
+  activeColor: { type: null, required: false },
   classes: { type: Object, required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false }
 });
-const { variantResolver } = useConfig();
+const { variantResolver, activeVariants } = useConfig();
+const resolvedVariant = computed(() => active ? activeVariant ?? activeVariants[variant] : variant);
 const style = useVarsResolver((theme) => {
   const { background, border, hover, text } = variantResolver({
     theme,
-    variant,
-    color: props.color,
+    variant: resolvedVariant.value,
+    color: active ? activeColor : props.color,
     gradient: props.gradient
   });
   return {
@@ -72,11 +82,14 @@ const style = useVarsResolver((theme) => {
   "with-left-section": !!$slots?.leftSection || !!icon,
   "with-right-section": !!$slots?.rightSection,
   loading,
-  variant
+  active,
+  "variant": resolvedVariant
 }]'
 		:style='style.root'
 		:class='[css.root, classes?.root]'
 		:disabled='loading'
+		:aria-pressed='activeMode === "pressed" ? active : void 0'
+		:aria-current='active && activeMode === "current" ? "page" : void 0'
 	>
 		<Transition name='fade-down'>
 			<Loader v-show='loading' :class='css.loader' :color :size />

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

@@ -30,6 +30,14 @@ export interface ButtonProps extends BoxProps {
     rightSectionProps?: HTMLAttributes;
     /** Visual variant */
     variant?: ButtonVariant;
+    /** Active/pressed state — adds `data-active` and the matching ARIA attribute */
+    active?: boolean;
+    /** ARIA semantic for `active` @default 'pressed' */
+    activeMode?: 'pressed' | 'current';
+    /** Variant applied when `active`. Defaults to the configured map for the current `variant` */
+    activeVariant?: ButtonVariant;
+    /** Color applied when `active` @default 'primary' */
+    activeColor?: NuanceColor;
     /** Styles API */
     classes?: Classes<ButtonClasses>;
 }

package/dist/runtime/components/collapsible/collapsible-content.d.vue.ts

@@ -0,0 +1,18 @@
+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;
+    };
+};