nuance-ui 0.2.9 → 0.2.11

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

@@ -1,16 +1,15 @@
-import type { NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
+import type { AnyString, NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
 import type { BoxProps } from './box.vue.js';
+export type BadgeVariant = 'filled' | 'light' | 'outline' | 'dot' | 'default' | 'gradient';
+export interface BadgeVars {
+    root: '--badge-height' | '--badge-padding-x' | '--badge-fz' | '--badge-radius' | '--badge-bg' | '--badge-color' | '--badge-bd' | '--badge-dot-color';
+}
 export interface BadgeProps extends BoxProps {
-    /**
-     * Visual variant
-     * @default `'filled'`
-     */
-    variant?: 'filled' | 'light' | 'outline' | 'dot' | 'default' | 'gradient';
     /**
      * Component size
      * @default `'md'`
      */
-    size?: NuanceSize | string;
+    size?: NuanceSize | AnyString;
     /** Makes the badge width equal to its height and removes horizontal padding */
     circle?: boolean;
     /**
@@ -19,7 +18,7 @@ export interface BadgeProps extends BoxProps {
      */
     radius?: NuanceRadius;
     /** Color from theme */
-    color?: NuanceColor | string;
+    color?: NuanceColor | AnyString;
     /** Gradient configuration (used with `variant="gradient"`) */
     gradient?: NuanceGradient;
     /**
@@ -29,6 +28,8 @@ export interface BadgeProps extends BoxProps {
     fullWidth?: boolean;
     /** Icon displayed before the label */
     icon?: string;
+    /** Visual variant */
+    variant?: BadgeVariant;
 }
 declare var __VLS_8: {}, __VLS_15: {}, __VLS_17: {};
 type __VLS_Slots = {} & {

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

@@ -1,7 +1,7 @@
-import type { NuanceSpacing } from '@nui/types';
+import type { NuanceColor, NuanceSpacing } from '@nui/types';
 import type { MaybeRef } from 'vue';
 import type { BoxProps } from './box.vue.js';
-import type { ButtonProps } from './button/button.vue.js';
+import type { ButtonProps, ButtonVariant } from './button/button.vue.js';
 import type { LinkProps } from './link/index.js';
 export interface BreadcrumbsItem extends Omit<LinkProps, 'mod'> {
     /** Marks item as active */
@@ -29,12 +29,12 @@ export interface BreadcrumbsProps extends BoxProps {
      * Visual variant
      * @default `'subtle'`
      */
-    variant?: ButtonProps['variant'];
+    variant?: ButtonVariant;
     /**
      * Color from theme
      * @default `'primary'`
      */
-    color?: ButtonProps['color'];
+    color?: NuanceColor;
     /**
      * Component size
      * @default `'compact-sm'`

package/dist/runtime/components/breadcrumbs.vue

@@ -66,52 +66,6 @@ const breadcrumbs = computed(() => unref(items) ?? []);
 	</Box>
 </template>
 
-<style module lang="postcss">
-.root {
-	--bc-spacing: var(--spacing-xs);
-
-	display: flex;
-	flex-wrap: wrap;
-	gap: var(--bc-spacing);
-	align-items: center;
-}
-
-.breadcrumb {
-	line-height: 1;
-
-	color: var(--color-text);
-	white-space: nowrap;
-	-webkit-tap-highlight-color: transparent;
-
-}
-
-.item {
-	display: flex;
-	gap: .25rem;
-	align-items: center;
-
-	font-weight: 600;
-	text-transform: capitalize;
-}
-
-.icon {
-	width: 1.2em;
-	height: 1.2em;
-}
-
-.separator {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	line-height: 1;
-
-	@mixin where-light {
-		color: var(--color-gray-7);
-	}
-
-	@mixin where-dark {
-		color: var(--color-dark-2);
-	}
-}
+<style module>
+.root{--bc-spacing:var(--spacing-xs);align-items:center;display:flex;flex-wrap:wrap;gap:var(--bc-spacing)}.breadcrumb{color:var(--color-text);line-height:1;white-space:nowrap;-webkit-tap-highlight-color:transparent}.item{align-items:center;display:flex;font-weight:600;gap:.25rem;text-transform:capitalize}.icon{height:1.2em;width:1.2em}.separator{align-items:center;display:flex;justify-content:center;line-height:1;@mixin where-light{color:var(--color-gray-7)}@mixin where-dark{color:var(--color-dark-2)}}
 </style>

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

@@ -1,7 +1,7 @@
-import type { NuanceSpacing } from '@nui/types';
+import type { NuanceColor, NuanceSpacing } from '@nui/types';
 import type { MaybeRef } from 'vue';
 import type { BoxProps } from './box.vue.js';
-import type { ButtonProps } from './button/button.vue.js';
+import type { ButtonProps, ButtonVariant } from './button/button.vue.js';
 import type { LinkProps } from './link/index.js';
 export interface BreadcrumbsItem extends Omit<LinkProps, 'mod'> {
     /** Marks item as active */
@@ -29,12 +29,12 @@ export interface BreadcrumbsProps extends BoxProps {
      * Visual variant
      * @default `'subtle'`
      */
-    variant?: ButtonProps['variant'];
+    variant?: ButtonVariant;
     /**
      * Color from theme
      * @default `'primary'`
      */
-    color?: ButtonProps['color'];
+    color?: NuanceColor;
     /**
      * Component size
      * @default `'compact-sm'`

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

@@ -1,42 +1,37 @@
-import type { Classes, NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
-import type { HTMLAttributes } from 'vue';
+import type { AnyString, Classes, NuanceColor, NuanceGradient, NuanceRadius, NuanceSize, NuanceSpacing } from '@nui/types';
+import type { CSSProperties, HTMLAttributes } from 'vue';
 import type { BoxProps } from '../box.vue.js';
+export type ButtonClasses = 'root' | 'inner' | 'label' | 'section';
+export type ButtonVariant = 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient' | 'gradient-outline';
 export interface ButtonProps extends BoxProps {
+    /** Color from theme */
+    color?: NuanceColor;
     /** Component size */
     size?: NuanceSize | `compact-${NuanceSize}`;
     /** Spacing token */
-    spacing?: NuanceSize | string;
-    /**
-     * Visual variant
-     * @default `'default'`
-     */
-    variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient' | 'gradient-outline';
+    spacing?: NuanceSpacing | AnyString;
     /** Gradient configuration (used with `variant="gradient"`) */
     gradient?: NuanceGradient;
+    /** Border radius */
+    radius?: NuanceRadius | AnyString;
+    /** Sets `justify-content` of `inner` element @default 'center' */
+    justify?: CSSProperties['justify-content'];
+    /** `pointer-events` value for the left section @default `'none'` */
+    leftSectionPE?: CSSProperties['pointer-events'];
+    /** `pointer-events` value for the right section @default `'all'` */
+    rightSectionPE?: CSSProperties['pointer-events'];
     /** Loading state */
     loading?: boolean;
-    /** Color from theme */
-    color?: NuanceColor;
-    /** Border radius */
-    radius?: NuanceRadius;
-    /** Styles API */
-    classes?: Classes<'root' | 'inner' | 'label' | 'section'>;
-    /**
-     * `pointer-events` value for the left section
-     * @default `'none'`
-     */
-    leftSectionPE?: CSSStyleDeclaration['pointerEvents'];
-    /** Extra attributes forwarded to the left section element */
-    leftSectionProps?: HTMLAttributes;
     /** Icon displayed before the label */
     icon?: string;
-    /**
-     * `pointer-events` value for the right section
-     * @default `'all'`
-     */
-    rightSectionPE?: CSSStyleDeclaration['pointerEvents'];
+    /** Extra attributes forwarded to the left section element */
+    leftSectionProps?: HTMLAttributes;
     /** Extra attributes forwarded to the right section element */
     rightSectionProps?: HTMLAttributes;
+    /** Visual variant */
+    variant?: ButtonVariant;
+    /** Styles API */
+    classes?: Classes<ButtonClasses>;
 }
 declare var __VLS_19: {}, __VLS_26: {}, __VLS_28: {};
 type __VLS_Slots = {} & {

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

@@ -1 +1 @@
-.root{--button-height-xs:rem(30px);--button-height-sm:rem(36px);--button-height-md:rem(42px);--button-height-lg:rem(50px);--button-height-xl:rem(60px);--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-sm);--button-bg:var(--color-primary-filled);--button-radius:var(--radius-default);--button-hover:var(--color-primary-filled-hover);--button-spacing:0;--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:600;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);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;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(30px);--button-height-sm:rem(36px);--button-height-md:rem(42px);--button-height-lg:rem(50px);--button-height-xl:rem(60px);--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-sm);--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:600;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);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,62 +1,57 @@
 <script setup>
-import { useStyleResolver } from "@nui/composables";
+import { useVarsResolver } from "@nui/composables";
 import { createVariantColorResolver, 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";
 const {
-  color,
-  size,
+  is = "button",
   variant = "default",
-  spacing,
-  gradient,
-  loading,
-  classes,
-  icon,
   leftSectionPE = "none",
-  leftSectionProps,
   rightSectionPE = "all",
+  mod,
+  icon,
+  loading,
+  classes,
   rightSectionProps,
-  is = "button",
-  radius,
-  mod: _mod
+  ...props
 } = defineProps({
+  color: { type: null, required: false },
   size: { type: null, required: false },
-  spacing: { type: String, required: false },
-  variant: { type: String, required: false },
+  spacing: { type: [String, Number, Object], required: false },
   gradient: { type: Object, required: false },
+  radius: { type: [String, Number, Object], required: false },
+  justify: { type: void 0, required: false },
+  leftSectionPE: { type: void 0, required: false },
+  rightSectionPE: { type: void 0, required: false },
   loading: { type: Boolean, required: false },
-  color: { type: null, required: false },
-  radius: { type: [String, Number], required: false },
-  classes: { type: Object, required: false },
-  leftSectionPE: { type: null, required: false },
-  leftSectionProps: { type: Object, required: false },
   icon: { type: String, required: false },
-  rightSectionPE: { type: null, required: false },
+  leftSectionProps: { type: Object, required: false },
   rightSectionProps: { type: Object, required: false },
+  variant: { type: String, required: false },
+  classes: { type: Object, required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false }
 });
-const mod = computed(() => [{ loading, variant }, _mod]);
-const style = computed(() => useStyleResolver((theme) => {
-  const {
-    background,
-    border,
-    hover,
-    text
-  } = createVariantColorResolver({ variant, color, theme, gradient });
+const style = useVarsResolver((theme) => {
+  const { background, border, hover, text } = createVariantColorResolver({
+    theme,
+    variant,
+    color: props.color,
+    gradient: props.gradient
+  });
   return {
     root: {
-      "--button-height": getSize(size, "button-height"),
-      "--button-padding-x": getSize(size, "button-padding-x"),
-      "--button-fz": size?.includes("compact") ? getFontSize(size.replace("compact-", "")) : getFontSize(size),
+      "--button-justify": props.justify,
+      "--button-height": getSize(props.size, "button-height"),
+      "--button-padding-x": getSize(props.size, "button-padding-x"),
+      "--button-fz": props.size?.includes("compact") ? getFontSize(props.size.replace("compact-", "")) : getFontSize(props.size),
       "--button-bg": background,
       "--button-hover": hover,
       "--button-color": text,
       "--button-bd": border,
-      "--button-radius": getRadius(radius),
-      "--button-spacing": getSpacing(spacing)
+      "--button-radius": getRadius(props.radius),
+      "--button-spacing": getSpacing(props.spacing)
     },
     leftSection: {
       "--section-pointer-events": leftSectionPE
@@ -65,20 +60,19 @@ const style = computed(() => useStyleResolver((theme) => {
       "--section-pointer-events": rightSectionPE
     }
   };
-}));
+});
 </script>
 
 <template>
 	<Box
 		:is
 		type='button'
-		:mod='[
-  {
-    "with-left-section": !!$slots?.leftSection || !!icon,
-    "with-right-section": !!$slots?.rightSection
-  },
-  mod
-]'
+		:mod='[mod, {
+  "with-left-section": !!$slots?.leftSection || !!icon,
+  "with-right-section": !!$slots?.rightSection,
+  loading,
+  variant
+}]'
 		:style='style.root'
 		:class='[css.root, classes?.root]'
 		:disabled='loading'

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

@@ -1,42 +1,37 @@
-import type { Classes, NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
-import type { HTMLAttributes } from 'vue';
+import type { AnyString, Classes, NuanceColor, NuanceGradient, NuanceRadius, NuanceSize, NuanceSpacing } from '@nui/types';
+import type { CSSProperties, HTMLAttributes } from 'vue';
 import type { BoxProps } from '../box.vue.js';
+export type ButtonClasses = 'root' | 'inner' | 'label' | 'section';
+export type ButtonVariant = 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient' | 'gradient-outline';
 export interface ButtonProps extends BoxProps {
+    /** Color from theme */
+    color?: NuanceColor;
     /** Component size */
     size?: NuanceSize | `compact-${NuanceSize}`;
     /** Spacing token */
-    spacing?: NuanceSize | string;
-    /**
-     * Visual variant
-     * @default `'default'`
-     */
-    variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient' | 'gradient-outline';
+    spacing?: NuanceSpacing | AnyString;
     /** Gradient configuration (used with `variant="gradient"`) */
     gradient?: NuanceGradient;
+    /** Border radius */
+    radius?: NuanceRadius | AnyString;
+    /** Sets `justify-content` of `inner` element @default 'center' */
+    justify?: CSSProperties['justify-content'];
+    /** `pointer-events` value for the left section @default `'none'` */
+    leftSectionPE?: CSSProperties['pointer-events'];
+    /** `pointer-events` value for the right section @default `'all'` */
+    rightSectionPE?: CSSProperties['pointer-events'];
     /** Loading state */
     loading?: boolean;
-    /** Color from theme */
-    color?: NuanceColor;
-    /** Border radius */
-    radius?: NuanceRadius;
-    /** Styles API */
-    classes?: Classes<'root' | 'inner' | 'label' | 'section'>;
-    /**
-     * `pointer-events` value for the left section
-     * @default `'none'`
-     */
-    leftSectionPE?: CSSStyleDeclaration['pointerEvents'];
-    /** Extra attributes forwarded to the left section element */
-    leftSectionProps?: HTMLAttributes;
     /** Icon displayed before the label */
     icon?: string;
-    /**
-     * `pointer-events` value for the right section
-     * @default `'all'`
-     */
-    rightSectionPE?: CSSStyleDeclaration['pointerEvents'];
+    /** Extra attributes forwarded to the left section element */
+    leftSectionProps?: HTMLAttributes;
     /** Extra attributes forwarded to the right section element */
     rightSectionProps?: HTMLAttributes;
+    /** Visual variant */
+    variant?: ButtonVariant;
+    /** Styles API */
+    classes?: Classes<ButtonClasses>;
 }
 declare var __VLS_19: {}, __VLS_26: {}, __VLS_28: {};
 type __VLS_Slots = {} & {

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

@@ -14,25 +14,6 @@ const { is = "button", ...props } = defineProps({
 	</Box>
 </template>
 
-<style module lang="postcss">
-:where(.unstyled) {
-	touch-action: manipulation;
-	cursor: pointer;
-
-	padding: 0;
-	border: 0;
-
-	font-size: var(--font-size-md);
-	color: inherit;
-	text-align: left;
-	text-decoration: none;
-
-	appearance: none;
-	background-color: transparent;
-	-webkit-tap-highlight-color: transparent;
-
-	@mixin where-rtl {
-		text-align: right;
-	}
-}
+<style module>
+:where(.unstyled){-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;color:inherit;cursor:pointer;font-size:var(--font-size-md);padding:0;text-align:left;text-decoration:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;@mixin where-rtl{text-align:right}}
 </style>

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

@@ -1,10 +1,10 @@
 import type { DateInput } from '@formkit/tempo';
-import type { NuanceSize } from '@nui/types';
+import type { AnyString, NuanceSize } from '@nui/types';
 import type { CalendarLevel, DateSelection, SelectionMode } from './types.js';
 import type { CalendarRootProps } from './ui/core/index.js';
 export interface CalendarProps<T extends SelectionMode = 'single'> extends CalendarRootProps<T> {
     /** Component size */
-    size?: NuanceSize | string;
+    size?: NuanceSize | AnyString;
     /** Determines whether week numbers should be displayed @default `false` */
     withWeekNumbers?: boolean;
     /** Callback function to determine whether the prev button should be disabled */

package/dist/runtime/components/calendar/calendar.vue

@@ -3,7 +3,7 @@ import { useCalendarNavigation } from "./lib/use-calendar-navigation";
 import { CalendarHeader, CalendarRoot } from "./ui/core";
 import { CalendarDecade, CalendarMonth, CalendarYear } from "./ui/levels";
 const props = defineProps({
-  size: { type: String, required: false },
+  size: { type: [String, Object], required: false },
   withWeekNumbers: { type: Boolean, required: false, default: false },
   prevDisabled: { type: Function, required: false },
   nextDisabled: { type: Function, required: false },
@@ -115,13 +115,6 @@ const [calendars, nav] = useCalendarNavigation({
 	</CalendarRoot>
 </template>
 
-<style lang="postcss" module>
-.content {
-	--calendar-cell-spacing: rem(1px);
-
-	display: flex;
-	gap: var(--spacing-sm);
-
-	width: fit-content;
-}
+<style module>
+.content{--calendar-cell-spacing:rem(1px);display:flex;gap:var(--spacing-sm);width:-moz-fit-content;width:fit-content}
 </style>

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

@@ -1,10 +1,10 @@
 import type { DateInput } from '@formkit/tempo';
-import type { NuanceSize } from '@nui/types';
+import type { AnyString, NuanceSize } from '@nui/types';
 import type { CalendarLevel, DateSelection, SelectionMode } from './types.js';
 import type { CalendarRootProps } from './ui/core/index.js';
 export interface CalendarProps<T extends SelectionMode = 'single'> extends CalendarRootProps<T> {
     /** Component size */
-    size?: NuanceSize | string;
+    size?: NuanceSize | AnyString;
     /** Determines whether week numbers should be displayed @default `false` */
     withWeekNumbers?: boolean;
     /** Callback function to determine whether the prev button should be disabled */

package/dist/runtime/components/calendar/ui/core/calendar-cell.d.vue.ts

@@ -1,8 +1,8 @@
-import type { NuanceSize } from '@nui/types';
+import type { AnyString, NuanceSize } from '@nui/types';
 import type { BoxProps } from '../../../box.vue.js';
 export interface CalendarCellProps extends BoxProps {
     /** Component size */
-    size?: NuanceSize | string;
+    size?: NuanceSize | AnyString;
 }
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/calendar/ui/core/calendar-cell.vue

@@ -3,7 +3,7 @@ import { getSize } from "@nui/utils";
 import { computed } from "vue";
 import UnstyledButton from "../../../button/unstyled-button.vue";
 const props = defineProps({
-  size: { type: String, required: false },
+  size: { type: [String, Object], required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false }
 });
@@ -18,117 +18,6 @@ const style = computed(() => ({
 	</UnstyledButton>
 </template>
 
-<style lang="postcss" module>
-.cell {
-	--day-size-xs: rem(30px);
-	--day-size-sm: rem(36px);
-	--day-size-md: rem(42px);
-	--day-size-lg: rem(48px);
-	--day-size-xl: rem(54px);
-	--day-size: var(--day-size-sm);
-
-	cursor: pointer;
-	user-select: none;
-
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-
-	width: var(--day-size, var(--day-size-sm));
-	height: var(--day-size, var(--day-size-sm));
-	border-radius: var(--radius-default);
-
-	font-size: calc(var(--day-size) / 2.8);
-	color: var(--color-text);
-
-	background-color: transparent;
-
-	&:hover {
-		&:where(:not([data-static], &:disabled, [data-selected], [data-in-range])) {
-			@mixin light {
-				background-color: var(--color-gray-0);
-			}
-
-			@mixin dark {
-				background-color: var(--color-dark-5);
-			}
-		}
-	}
-
-	&:where([data-static]) {
-		cursor: default;
-		user-select: auto;
-	}
-
-	&:where([data-weekend]) {
-		color: var(--color-red-6);
-	}
-
-	&:where([data-outside]) {
-		/* stylelint-disable-next-line function-no-unknown */
-		color: alpha(var(--color-dimmed), .5);
-	}
-
-	&:where([data-hidden]) {
-		display: none;
-	}
-
-	&:where([data-today]:not([data-selected], [data-in-range])) {
-		@mixin where-light {
-			border: 1px solid var(--color-gray-4);
-		}
-
-		@mixin where-dark {
-			border: 1px solid var(--color-dark-4);
-		}
-	}
-
-	&:where([data-in-range]) {
-		border-radius: 0;
-
-		background-color: var(--color-primary-light-hover);
-
-		&:hover {
-			&:where(:not(:disabled, [data-static])) {
-				background-color: var(--color-primary-light);
-			}
-		}
-	}
-
-	&:where([data-first-in-range]) {
-		border-radius: 0;
-		border-start-start-radius: var(--radius-default);
-		border-end-start-radius: var(--radius-default);
-	}
-
-	&:where([data-last-in-range]) {
-		border-radius: 0;
-		border-start-end-radius: var(--radius-default);
-		border-end-end-radius: var(--radius-default);
-	}
-
-	&:where([data-last-in-range][data-first-in-range]) {
-		border-radius: var(--radius-default);
-	}
-
-	&:where([data-selected]) {
-		color: var(--color-white);
-
-		background-color: var(--color-primary-filled);
-
-		&:hover {
-			&:where(:not(:disabled, [data-static])) {
-				background-color: var(--color-primary-filled-hover);
-			}
-		}
-	}
-
-	&:where(:disabled) {
-		pointer-events: none;
-		cursor: not-allowed;
-
-		/* stylelint-disable-next-line function-no-unknown */
-		color: alpha(var(--color-disabled), .5);
-	}
-}
+<style module>
+.cell{--day-size-xs:rem(30px);--day-size-sm:rem(36px);--day-size-md:rem(42px);--day-size-lg:rem(48px);--day-size-xl:rem(54px);--day-size:var(--day-size-sm);align-items:center;background-color:transparent;border-radius:var(--radius-default);color:var(--color-text);cursor:pointer;display:inline-flex;font-size:calc(var(--day-size)/2.8);height:var(--day-size,var(--day-size-sm));justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:var(--day-size,var(--day-size-sm))}.cell:hover:where(:not([data-static],.cell:hover:disabled,[data-selected],[data-in-range])){@mixin light{background-color:var(--color-gray-0)}@mixin dark{background-color:var(--color-dark-5)}}.cell:where([data-static]){cursor:default;-webkit-user-select:auto;-moz-user-select:auto;user-select:auto}.cell:where([data-weekend]){color:var(--color-red-6)}.cell:where([data-outside]){color:alpha(var(--color-dimmed),.5)}.cell:where([data-hidden]){display:none}.cell:where([data-today]:not([data-selected],[data-in-range])){@mixin where-light{border-bottom-color:var(--color-gray-4);border-bottom-style:solid;border-bottom-width:1px;border-left-color:var(--color-gray-4);border-left-style:solid;border-left-width:1px;border-right-color:var(--color-gray-4);border-right-style:solid;border-right-width:1px;border-top-color:var(--color-gray-4);border-top-style:solid;border-top-width:1px}@mixin where-dark{border-bottom-color:var(--color-dark-4);border-bottom-style:solid;border-bottom-width:1px;border-left-color:var(--color-dark-4);border-left-style:solid;border-left-width:1px;border-right-color:var(--color-dark-4);border-right-style:solid;border-right-width:1px;border-top-color:var(--color-dark-4);border-top-style:solid;border-top-width:1px}}.cell:where([data-in-range]){background-color:var(--color-primary-light-hover);border-radius:0}.cell:where([data-in-range]):hover:where(:not(:disabled,[data-static])){background-color:var(--color-primary-light)}.cell:where([data-first-in-range]){border-radius:0;border-end-start-radius:var(--radius-default);border-start-start-radius:var(--radius-default)}.cell:where([data-last-in-range]){border-radius:0;border-end-end-radius:var(--radius-default);border-start-end-radius:var(--radius-default)}.cell:where([data-last-in-range][data-first-in-range]){border-radius:var(--radius-default)}.cell:where([data-selected]){background-color:var(--color-primary-filled);color:var(--color-white)}.cell:where([data-selected]):hover:where(:not(:disabled,[data-static])){background-color:var(--color-primary-filled-hover)}.cell:where(:disabled){color:alpha(var(--color-disabled),.5);cursor:not-allowed;pointer-events:none}
 </style>

package/dist/runtime/components/calendar/ui/core/calendar-cell.vue.d.ts

@@ -1,8 +1,8 @@
-import type { NuanceSize } from '@nui/types';
+import type { AnyString, NuanceSize } from '@nui/types';
 import type { BoxProps } from '../../../box.vue.js';
 export interface CalendarCellProps extends BoxProps {
     /** Component size */
-    size?: NuanceSize | string;
+    size?: NuanceSize | AnyString;
 }
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {