nuance-ui 0.2.36 → 0.3.1

package/dist/runtime/components/accordion/lib/context.d.ts

@@ -0,0 +1,34 @@
+import type { Classes } from '@nui/types';
+import type { ComputedRef, Ref } from 'vue';
+export type AccordionVariant = 'default' | 'contained' | 'filled' | 'separated';
+export type AccordionChevronPosition = 'left' | 'right';
+export type AccordionClasses = Classes<'root' | 'item' | 'header' | 'control' | 'label' | 'icon' | 'chevron' | 'panel' | 'content'>;
+export interface AccordionRootContext {
+    /** User-provided class names per styles-API part */
+    classes: Ref<AccordionClasses | undefined>;
+    /** Whether the item with the given value is currently open */
+    isItemActive: (value: string) => boolean;
+    /** Toggle the item with the given value */
+    toggleItem: (value: string) => void;
+    /** Build the accessible id for an item header */
+    getHeaderId: (value: string) => string;
+    /** Build the accessible id for an item panel */
+    getPanelId: (value: string) => string;
+    disabled: Ref<boolean | undefined>;
+    variant: Ref<AccordionVariant>;
+    transitionDuration: Ref<number>;
+    disableChevronRotation: Ref<boolean | undefined>;
+    chevronPosition: Ref<AccordionChevronPosition>;
+    chevron: Ref<string | undefined>;
+    order: Ref<'1' | '2' | '3' | '4' | '5' | '6' | undefined>;
+    loop: Ref<boolean>;
+    keepMounted: Ref<boolean>;
+}
+export interface AccordionItemContext {
+    value: ComputedRef<string>;
+    open: ComputedRef<boolean>;
+    disabled: ComputedRef<boolean | undefined>;
+    dataState: ComputedRef<'open' | 'closed'>;
+}
+export declare const provideAccordionRootState: (state: AccordionRootContext) => AccordionRootContext, useAccordionRootState: () => AccordionRootContext;
+export declare const provideAccordionItemState: (state: AccordionItemContext) => AccordionItemContext, useAccordionItemState: () => AccordionItemContext;

package/dist/runtime/components/accordion/lib/context.js

@@ -0,0 +1,9 @@
+import { createStrictInjection } from "@nui/composables";
+export const [provideAccordionRootState, useAccordionRootState] = createStrictInjection(
+  (state) => state,
+  { name: "AccordionRoot", injectionKey: Symbol("accordion-root") }
+);
+export const [provideAccordionItemState, useAccordionItemState] = createStrictInjection(
+  (state) => state,
+  { name: "AccordionItem", injectionKey: Symbol("accordion-item") }
+);

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/collapse.d.vue.ts

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

package/dist/runtime/components/collapse.vue

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

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

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

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

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

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

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

package/dist/runtime/components/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();