nuance-ui 0.2.36 → 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.36",
+  "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/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/dialog/ui/dialog-close-button.vue

@@ -9,6 +9,7 @@ const {
   ...props
 } = 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 },
@@ -17,6 +18,10 @@ 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 close = useDialogState();

package/dist/runtime/components/drawer/drawer-close-button.vue

@@ -2,6 +2,7 @@
 import DialogCloseButton from "../dialog/ui/dialog-close-button.vue";
 const props = 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 },
@@ -10,6 +11,10 @@ const props = defineProps({
   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 }
 });
 </script>

package/dist/runtime/components/files/file-upload-button.vue

@@ -28,6 +28,10 @@ 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 },

package/dist/runtime/components/files/file-upload-icon.vue

@@ -16,6 +16,7 @@ const {
   reset: { type: null, required: false },
   directory: { type: null, required: false },
   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 },
@@ -24,6 +25,10 @@ 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 },
   capture: { type: null, required: false },
   initialFiles: { type: null, required: false },

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

@@ -30,6 +30,10 @@ const props = defineProps({
   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 }

package/dist/runtime/components/modal/modal-close-button.vue

@@ -2,6 +2,7 @@
 import DialogCloseButton from "../dialog/ui/dialog-close-button.vue";
 const props = 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 },
@@ -10,6 +11,10 @@ const props = defineProps({
   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 }
 });
 </script>

package/dist/runtime/components/nav-link/nav-icon-link.d.vue.ts

@@ -1,23 +1,17 @@
 import type { ActionIconProps } from '@nui/components';
 import type { NuanceColor } from '@nui/types';
 import type { NuxtLinkProps } from 'nuxt/app';
-export interface NavIconLinkProps extends ActionIconProps, Omit<NuxtLinkProps, 'href' | 'custom'> {
+export interface NavIconLinkProps extends Omit<ActionIconProps, 'active'>, Omit<NuxtLinkProps, 'href' | 'custom'> {
     /** Link target */
     to: NuxtLinkProps['to'];
     /** Color from theme */
     color?: NuanceColor;
     /** Icon name shorthand */
     icon?: string;
-    /**
-     * Variant applied in active state
-     * @default `'filled'`
-     */
-    active?: ActionIconProps['variant'];
-    /**
-     * Variant applied in inactive state
-     * @default `'default'`
-     */
-    notActive?: ActionIconProps['variant'];
+    /** Variant applied in inactive state @default 'default' */
+    variant?: ActionIconProps['variant'];
+    /** Variant applied in active state @default 'filled' */
+    activeVariant?: ActionIconProps['variant'];
 }
 declare var __VLS_16: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/nav-link/nav-icon-link.vue

@@ -3,23 +3,25 @@ import ActionIcon from "../action-icon/action-icon.vue";
 import { pickLinkProps } from "../link";
 defineOptions({ inheritAttrs: false });
 const {
-  active = "filled",
-  notActive = "default",
+  variant,
+  activeVariant,
   mod,
   ...etc
 } = defineProps({
   to: { type: null, required: true },
   color: { type: null, required: false },
   icon: { type: String, required: false },
-  active: { type: String, required: false },
-  notActive: { type: String, required: false },
+  variant: { type: String, required: false },
+  activeVariant: { type: String, required: false },
   size: { type: null, required: false },
+  iconSize: { type: [Number, String], required: false },
   gradient: { type: Object, required: false },
   radius: { type: [String, Number, Object], required: false },
   loading: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   mod: { type: [Object, Array, null], required: false },
-  variant: { type: String, required: false },
+  activeMode: { type: String, required: false },
+  activeColor: { type: null, required: false },
   classes: { type: Object, required: false },
   external: { type: Boolean, required: false },
   target: { type: [String, Object, null], required: false },
@@ -45,9 +47,11 @@ const { link, rest } = pickLinkProps(etc);
 			is='a'
 			v-bind='{ ...rest, ...$attrs }'
 			:href
-			:variant='isActive ? active : notActive'
-			:mod='[{ active: isActive }, mod]'
-			:aria-current="isActive ? 'page' : void 0"
+			:variant
+			:active='isActive'
+			:active-variant
+			active-mode='current'
+			:mod
 			:rel='"rel" in linkProps ? linkProps?.rel : void 0'
 			:target='"target" in linkProps ? linkProps?.target : void 0'
 			@click='navigate'

package/dist/runtime/components/nav-link/nav-icon-link.vue.d.ts

@@ -1,23 +1,17 @@
 import type { ActionIconProps } from '@nui/components';
 import type { NuanceColor } from '@nui/types';
 import type { NuxtLinkProps } from 'nuxt/app';
-export interface NavIconLinkProps extends ActionIconProps, Omit<NuxtLinkProps, 'href' | 'custom'> {
+export interface NavIconLinkProps extends Omit<ActionIconProps, 'active'>, Omit<NuxtLinkProps, 'href' | 'custom'> {
     /** Link target */
     to: NuxtLinkProps['to'];
     /** Color from theme */
     color?: NuanceColor;
     /** Icon name shorthand */
     icon?: string;
-    /**
-     * Variant applied in active state
-     * @default `'filled'`
-     */
-    active?: ActionIconProps['variant'];
-    /**
-     * Variant applied in inactive state
-     * @default `'default'`
-     */
-    notActive?: ActionIconProps['variant'];
+    /** Variant applied in inactive state @default 'default' */
+    variant?: ActionIconProps['variant'];
+    /** Variant applied in active state @default 'filled' */
+    activeVariant?: ActionIconProps['variant'];
 }
 declare var __VLS_16: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/table/ui/table-sortable-header.vue

@@ -23,6 +23,10 @@ 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 },

package/dist/runtime/components/theme-toggle.vue

@@ -3,6 +3,7 @@ import { useConfig, useTheme } from "@nui/composables";
 import ActionIcon from "./action-icon/action-icon.vue";
 const props = 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 },
@@ -11,6 +12,10 @@ const props = defineProps({
   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 theme = useTheme();

package/dist/runtime/composables/use-config.d.ts

@@ -2,5 +2,6 @@ import type { VariantColorResolverOptions } from '@nui/utils';
 /** Returns the configured icon registry merged with module defaults. */
 export declare function useConfig(): {
     icons: any;
+    activeVariants: any;
     variantResolver: (options: VariantColorResolverOptions) => import("#imports").VariantColorResolverResult;
 };

package/dist/runtime/composables/use-config.js

@@ -1,9 +1,10 @@
 import { createVariantColorResolver } from "@nui/utils";
 import { useAppConfig } from "#imports";
 export function useConfig() {
-  const { icons, gradient } = useAppConfig().nui;
+  const { icons, gradient, activeVariants } = useAppConfig().nui;
   return {
     icons,
+    activeVariants,
     variantResolver: (options) => createVariantColorResolver({
       ...options,
       gradient: options.gradient ?? gradient

package/dist/runtime/utils/const/active-variants.d.ts

@@ -0,0 +1,11 @@
+/** Variant an ActionIcon switches to when `active`, keyed by its base variant. */
+export declare const DEFAULT_ACTIVE_VARIANTS: {
+    readonly default: "filled";
+    readonly light: "filled";
+    readonly outline: "filled";
+    readonly subtle: "light";
+    readonly filled: "filled";
+    readonly gradient: "gradient";
+    readonly 'gradient-outline': "gradient";
+};
+export type ActiveVariantsMap = Record<keyof typeof DEFAULT_ACTIVE_VARIANTS, string>;

package/dist/runtime/utils/const/active-variants.js

@@ -0,0 +1,9 @@
+export const DEFAULT_ACTIVE_VARIANTS = {
+  "default": "filled",
+  "light": "filled",
+  "outline": "filled",
+  "subtle": "light",
+  "filled": "filled",
+  "gradient": "gradient",
+  "gradient-outline": "gradient"
+};

package/dist/runtime/utils/const/index.d.ts

@@ -1,2 +1,3 @@
+export * from './active-variants.js';
 export * from './gradient.js';
 export * from './icons.js';

package/dist/runtime/utils/const/index.js

@@ -1,2 +1,3 @@
+export * from "./active-variants.js";
 export * from "./gradient.js";
 export * from "./icons.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nuance-ui",
-	"version": "0.2.36",
+	"version": "0.3.0",
 	"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 && git push --follow-tags",
+		"release": "npm run lint && npm run prepack && changelogen --release --minor && git push --follow-tags",
 		"lint": "eslint ./src",
 		"test": "vitest run",
 		"test:watch": "vitest watch",