nuance-ui 0.2.6 → 0.2.7

package/dist/runtime/components/badge.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { useStyleResolver } from "@nui/composals";
+import { useStyleResolver } from "@nui/composables";
+import { createVariantColorResolver, getRadius, getSize, getThemeColor } from "@nui/utils";
 import { computed } from "vue";
-import { createVariantColorResolver, getRadius, getSize, getThemeColor } from "../utils";
 import Box from "./box.vue";
 const {
   variant = "filled",
@@ -43,9 +43,9 @@ const style = computed(() => useStyleResolver((theme) => {
 </script>
 
 <template>
-	<Box
-		:style
-		:class='$style.root'
+	<Box
+		:style
+		:class='$style.root'
 		:mod='[
   {
     "block": fullWidth,
@@ -55,164 +55,163 @@ const style = computed(() => useStyleResolver((theme) => {
     "with-right-section": !!$slots.rightSection
   },
   mod
-]'
-	>
-		<span v-if='variant === "dot"' :class='$style.dot' />
-
-		<span v-else-if='$slots.leftSection || !!icon' :class='$style.section' data-position='left'>
-			<slot name='leftSection'>
-				<Icon v-if='!!icon' :name='icon' />
-			</slot>
-		</span>
-
-		<span :class='$style.label'>
-			<slot />
-		</span>
-
-		<span v-if='$slots.rightSection' :class='$style.section' data-position='right'>
-			<slot name='rightSection' />
-		</span>
-	</Box>
+]'
+	>
+		<span v-if='variant === "dot"' :class='$style.dot' />
+
+		<span v-else-if='$slots.leftSection || !!icon' :class='$style.section' data-position='left'>
+			<slot name='leftSection'>
+				<Icon v-if='!!icon' :name='icon' />
+			</slot>
+		</span>
+
+		<span :class='$style.label'>
+			<slot />
+		</span>
+
+		<span v-if='$slots.rightSection' :class='$style.section' data-position='right'>
+			<slot name='rightSection' />
+		</span>
+	</Box>
 </template>
 
 <style lang="postcss" module>
-.root {
-	--badge-height-xs: rem(16px);
-	--badge-height-sm: rem(18px);
-	--badge-height-md: rem(20px);
-	--badge-height-lg: rem(26px);
-	--badge-height-xl: rem(32px);
-
-	--badge-fz-xs: rem(8px);
-	--badge-fz-sm: rem(10px);
-	--badge-fz-md: rem(12px);
-	--badge-fz-lg: rem(14px);
-	--badge-fz-xl: rem(16px);
-
-	--badge-padding-x-xs: rem(6px);
-	--badge-padding-x-sm: rem(8px);
-	--badge-padding-x-md: rem(10px);
-	--badge-padding-x-lg: rem(12px);
-	--badge-padding-x-xl: rem(16px);
-
-	--badge-height: var(--badge-height-md);
-	--badge-fz: var(--badge-fz-md);
-	--badge-padding-x: var(--badge-padding-x-md);
-	--badge-radius: 100%;
-	--badge-lh: calc(var(--badge-height) - rem(2px));
-	--badge-color: var(--color-white);
-	--badge-bg: var(--color-primary-filled);
-	--badge-border-width: 1px;
-	--badge-bd: var(--badge-border-width) solid transparent;
-
-	cursor: default;
-
-	overflow: hidden;
-	display: inline-grid;
-	align-items: center;
-	justify-content: center;
-
-	width: fit-content;
-	height: var(--badge-height);
-	padding: 0 var(--badge-padding-x);
-	border: var(--badge-bd);
-	border-radius: var(--badge-radius);
-
-	font-size: var(--badge-fz);
-	font-weight: 700;
-	line-height: var(--badge-lh);
-	color: var(--badge-color);
-	text-decoration: none;
-	text-overflow: ellipsis;
-	text-transform: uppercase;
-	letter-spacing: 0.25px;
-
-	background: var(--badge-bg);
-
-	-webkit-tap-highlight-color: transparent;
-
-	&:where([data-with-left-section], [data-variant='dot']) {
-		grid-template-columns: auto 1fr;
-
-		padding-left: calc(var(--badge-padding-x) - calc(var(--spacing-xs) / 2));
-	}
-
-	&:where([data-with-right-section]) {
-		grid-template-columns: 1fr auto;
-
-		padding-right: calc(var(--badge-padding-x) - calc(var(--spacing-xs) / 2));
-	}
-
-	&:where([data-with-left-section][data-with-right-section],
-		[data-variant='dot'][data-with-right-section]) {
-		grid-template-columns: auto 1fr auto;
-
-		padding: 0 calc(var(--spacing-xs) / 2);
-	}
-
-	&:where([data-block]) {
-		display: flex;
-
-		width: 100%;
-	}
-
-	&:where([data-circle]) {
-		display: flex;
-
-		width: var(--badge-height);
-		padding-inline: 2px;
-	}
-
-	&:where([data-variant='dot']) {
-		@mixin where-light {
-			--badge-color: var(--color-black);
-		}
-
-		@mixin where-dark {
-			--badge-color: var(--color-white);
-		}
-	}
-}
-
-.dot {
-	--badge-dot-size: calc(var(--badge-height) / 2);
-
-	display: block;
-
-	width: var(--badge-dot-size);
-	height: var(--badge-dot-size);
-	margin-inline-end: calc(var(--badge-dot-size) / 2);
-	border-radius: var(--badge-dot-size);
-
-	background-color: var(--badge-dot-color, var(--badge-color));
-}
-
-
-.label {
-	cursor: inherit;
-
-	overflow: hidden;
-
-	text-align: center;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.section {
-	--badge-section-margin: calc(var(--spacing-xs) / 2);
-
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-
-	max-height: calc(var(--badge-height) - var(--badge-border-width) * 2);
-
-	&:where([data-position='left']) {
-		margin-inline-end: var(--badge-section-margin);
-	}
-
-	&:where([data-position='right']) {
-		margin-inline-start: var(--badge-section-margin);
-	}
-}
+.root {
+	--badge-height-xs: rem(16px);
+	--badge-height-sm: rem(18px);
+	--badge-height-md: rem(20px);
+	--badge-height-lg: rem(26px);
+	--badge-height-xl: rem(32px);
+
+	--badge-fz-xs: rem(8px);
+	--badge-fz-sm: rem(10px);
+	--badge-fz-md: rem(12px);
+	--badge-fz-lg: rem(14px);
+	--badge-fz-xl: rem(16px);
+
+	--badge-padding-x-xs: rem(6px);
+	--badge-padding-x-sm: rem(8px);
+	--badge-padding-x-md: rem(10px);
+	--badge-padding-x-lg: rem(12px);
+	--badge-padding-x-xl: rem(16px);
+
+	--badge-height: var(--badge-height-md);
+	--badge-fz: var(--badge-fz-md);
+	--badge-padding-x: var(--badge-padding-x-md);
+	--badge-radius: 100%;
+	--badge-lh: calc(var(--badge-height) - rem(2px));
+	--badge-color: var(--color-white);
+	--badge-bg: var(--color-primary-filled);
+	--badge-border-width: 1px;
+	--badge-bd: var(--badge-border-width) solid transparent;
+
+	cursor: default;
+
+	overflow: hidden;
+	display: inline-grid;
+	align-items: center;
+	justify-content: center;
+
+	width: fit-content;
+	height: var(--badge-height);
+	padding: 0 var(--badge-padding-x);
+	border: var(--badge-bd);
+	border-radius: var(--badge-radius);
+
+	font-size: var(--badge-fz);
+	font-weight: 700;
+	line-height: var(--badge-lh);
+	color: var(--badge-color);
+	text-decoration: none;
+	text-overflow: ellipsis;
+	text-transform: uppercase;
+	letter-spacing: 0.25px;
+
+	background: var(--badge-bg);
+
+	-webkit-tap-highlight-color: transparent;
+
+	&:where([data-with-left-section], [data-variant='dot']) {
+		grid-template-columns: auto 1fr;
+
+		padding-left: calc(var(--badge-padding-x) - calc(var(--spacing-xs) / 2));
+	}
+
+	&:where([data-with-right-section]) {
+		grid-template-columns: 1fr auto;
+
+		padding-right: calc(var(--badge-padding-x) - calc(var(--spacing-xs) / 2));
+	}
+
+	&:where([data-with-left-section][data-with-right-section],
+		[data-variant='dot'][data-with-right-section]) {
+		grid-template-columns: auto 1fr auto;
+
+		padding: 0 calc(var(--spacing-xs) / 2);
+	}
+
+	&:where([data-block]) {
+		display: flex;
+
+		width: 100%;
+	}
+
+	&:where([data-circle]) {
+		display: flex;
+
+		width: var(--badge-height);
+		padding-inline: 2px;
+	}
+
+	&:where([data-variant='dot']) {
+		@mixin where-light {
+			--badge-color: var(--color-black);
+		}
+
+		@mixin where-dark {
+			--badge-color: var(--color-white);
+		}
+	}
+}
+
+.dot {
+	--badge-dot-size: calc(var(--badge-height) / 2);
+
+	display: block;
+
+	width: var(--badge-dot-size);
+	height: var(--badge-dot-size);
+	margin-inline-end: calc(var(--badge-dot-size) / 2);
+	border-radius: var(--badge-dot-size);
+
+	background-color: var(--badge-dot-color, var(--badge-color));
+}
+
+.label {
+	cursor: inherit;
+
+	overflow: hidden;
+
+	text-align: center;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.section {
+	--badge-section-margin: calc(var(--spacing-xs) / 2);
+
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+
+	max-height: calc(var(--badge-height) - var(--badge-border-width) * 2);
+
+	&:where([data-position='left']) {
+		margin-inline-end: var(--badge-section-margin);
+	}
+
+	&:where([data-position='right']) {
+		margin-inline-start: var(--badge-section-margin);
+	}
+}
 </style>

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

@@ -1,20 +1,33 @@
-import type { NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '../types/index.js';
+import type { NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
 import type { BoxProps } from './box.vue.js';
 export interface BadgeProps extends BoxProps {
+    /**
+     * Visual variant
+     * @default `'filled'`
+     */
     variant?: 'filled' | 'light' | 'outline' | 'dot' | 'default' | 'gradient';
-    /** Controls `font-size`, `height` and horizontal `padding` @default `'md'` */
+    /**
+     * Component size
+     * @default `'md'`
+     */
     size?: NuanceSize | string;
-    /** If set, badge `min-width` becomes equal to its `height` and horizontal padding is removed */
+    /** Makes the badge width equal to its height and removes horizontal padding */
     circle?: boolean;
-    /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default `'xl'` */
+    /**
+     * Border radius
+     * @default `'sm'`
+     */
     radius?: NuanceRadius;
-    /** Key of `theme.colors` or any valid CSS color @default `theme.primaryColor` */
+    /** Color from theme */
     color?: NuanceColor | string;
-    /** Gradient configuration used when `variant=\"gradient\"` @default `theme.defaultGradient` */
+    /** Gradient configuration (used with `variant="gradient"`) */
     gradient?: NuanceGradient;
-    /** Determines whether Badge should take 100% of its parent width @default `false` */
+    /**
+     * Stretches the badge to fill its parent width
+     * @default `false`
+     */
     fullWidth?: boolean;
-    /** Icon displayed before to the label */
+    /** Icon displayed before the label */
     icon?: string;
 }
 declare var __VLS_8: {}, __VLS_15: {}, __VLS_17: {};

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

@@ -1,8 +1,12 @@
 import type { Mod } from '@nui/utils';
 import type { Component } from 'vue';
 export interface BoxProps {
+    /**
+     * Rendered element or component
+     * @default `'div'`
+     */
     is?: keyof HTMLElementTagNameMap | Component;
-    /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */
+    /** Element modifiers transformed into `data-` attributes, falsy values are removed */
     mod?: Mod | Mod[] | Mod[][] | null;
 }
 declare var __VLS_8: {};

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

@@ -1,8 +1,12 @@
 import type { Mod } from '@nui/utils';
 import type { Component } from 'vue';
 export interface BoxProps {
+    /**
+     * Rendered element or component
+     * @default `'div'`
+     */
     is?: keyof HTMLElementTagNameMap | Component;
-    /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */
+    /** Element modifiers transformed into `data-` attributes, falsy values are removed */
     mod?: Mod | Mod[] | Mod[][] | null;
 }
 declare var __VLS_8: {};

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

@@ -4,21 +4,41 @@ import type { BoxProps } from './box.vue.js';
 import type { ButtonProps } from './button/button.vue.js';
 import type { LinkProps } from './link/index.js';
 export interface BreadcrumbsItem extends Omit<LinkProps, 'mod'> {
+    /** Marks item as active */
     active?: boolean;
+    /** Item label */
     label: string;
+    /** Icon displayed before the label */
     icon?: string;
+    /** Additional class applied to the item */
     class?: string;
+    /** Named slot used to render the item */
     slot?: string;
 }
 export interface BreadcrumbsProps extends BoxProps {
-    /** Manual items array */
+    /** Items array */
     items?: MaybeRef<BreadcrumbsItem[]>;
-    /** Separator icon between items @default `'gravity-ui:chevron-right'` */
+    /**
+     * Separator icon between items
+     * @default `'gravity-ui:chevron-right'`
+     */
     separator?: string;
-    /** Controls spacing between separator and breadcrumb @default `'xs'` */
+    /** Spacing token */
     spacing?: NuanceSpacing;
+    /**
+     * Visual variant
+     * @default `'subtle'`
+     */
     variant?: ButtonProps['variant'];
+    /**
+     * Color from theme
+     * @default `'primary'`
+     */
     color?: ButtonProps['color'];
+    /**
+     * Component size
+     * @default `'compact-sm'`
+     */
     size?: ButtonProps['size'];
 }
 declare var __VLS_9: string, __VLS_10: {

package/dist/runtime/components/breadcrumbs.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useTheme } from "@nui/composals";
+import { useTheme } from "@nui/composables";
 import { getSpacing } from "@nui/utils";
 import { computed, unref } from "vue";
 import Box from "./box.vue";
@@ -89,9 +89,9 @@ const breadcrumbs = computed(() => unref(items) ?? []);
 	display: flex;
 	gap: .25rem;
 	align-items: center;
-	text-transform: capitalize;
 
 	font-weight: 600;
+	text-transform: capitalize;
 }
 
 .icon {

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

@@ -4,21 +4,41 @@ import type { BoxProps } from './box.vue.js';
 import type { ButtonProps } from './button/button.vue.js';
 import type { LinkProps } from './link/index.js';
 export interface BreadcrumbsItem extends Omit<LinkProps, 'mod'> {
+    /** Marks item as active */
     active?: boolean;
+    /** Item label */
     label: string;
+    /** Icon displayed before the label */
     icon?: string;
+    /** Additional class applied to the item */
     class?: string;
+    /** Named slot used to render the item */
     slot?: string;
 }
 export interface BreadcrumbsProps extends BoxProps {
-    /** Manual items array */
+    /** Items array */
     items?: MaybeRef<BreadcrumbsItem[]>;
-    /** Separator icon between items @default `'gravity-ui:chevron-right'` */
+    /**
+     * Separator icon between items
+     * @default `'gravity-ui:chevron-right'`
+     */
     separator?: string;
-    /** Controls spacing between separator and breadcrumb @default `'xs'` */
+    /** Spacing token */
     spacing?: NuanceSpacing;
+    /**
+     * Visual variant
+     * @default `'subtle'`
+     */
     variant?: ButtonProps['variant'];
+    /**
+     * Color from theme
+     * @default `'primary'`
+     */
     color?: ButtonProps['color'];
+    /**
+     * Component size
+     * @default `'compact-sm'`
+     */
     size?: ButtonProps['size'];
 }
 declare var __VLS_9: string, __VLS_10: {

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

@@ -1,5 +1,9 @@
 import type { BoxProps } from '../box.vue.js';
 export interface ButtonGroupProps extends BoxProps {
+    /**
+     * Layout direction of the group
+     * @default 'horizontal'
+     */
     orientation?: 'horizontal' | 'vertical';
 }
 declare var __VLS_8: {};

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

@@ -9,7 +9,7 @@ const { is, mod, orientation = "horizontal" } = defineProps({
 </script>
 
 <template>
-	<Box :is :mod='[mod, { orientation }]' :class='css.group' role='group'>
-		<slot />
-	</Box>
+	<Box :is :mod='[mod, { orientation }]' :class='css.group' role='group'>
+		<slot />
+	</Box>
 </template>

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

@@ -1,5 +1,9 @@
 import type { BoxProps } from '../box.vue.js';
 export interface ButtonGroupProps extends BoxProps {
+    /**
+     * Layout direction of the group
+     * @default 'horizontal'
+     */
     orientation?: 'horizontal' | 'vertical';
 }
 declare var __VLS_8: {};

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

@@ -1,26 +1,39 @@
-import type { NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
+import type { Classes, NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
 import type { HTMLAttributes } from 'vue';
 import type { BoxProps } from '../box.vue.js';
 export interface ButtonProps extends BoxProps {
+    /** Component size */
     size?: NuanceSize | `compact-${NuanceSize}`;
+    /** Spacing token */
     spacing?: NuanceSize | string;
+    /**
+     * Visual variant
+     * @default `'default'`
+     */
     variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient' | 'gradient-outline';
+    /** Gradient configuration (used with `variant="gradient"`) */
     gradient?: NuanceGradient;
+    /** Loading state */
     loading?: boolean;
+    /** Color from theme */
     color?: NuanceColor;
+    /** Border radius */
     radius?: NuanceRadius;
     /** Styles API */
-    classes?: {
-        root?: string | string[];
-        inner?: string | string[];
-        label?: string | string[];
-        section?: string | string[];
-    };
-    /** section pointer-events */
+    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;
-    /** section pointer-events */
+    /**
+     * `pointer-events` value for the right section
+     * @default `'all'`
+     */
     rightSectionPE?: CSSStyleDeclaration['pointerEvents'];
+    /** Extra attributes forwarded to the right section element */
     rightSectionProps?: HTMLAttributes;
 }
 declare var __VLS_19: {}, __VLS_21: {}, __VLS_23: {};

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{--button-border-width:1px;display:flex}.group :where(.root):focus{position:relative;z-index:1}.group[data-orientation=horizontal]{flex-direction:row}.group[data-orientation=horizontal] .root:not(:only-child):first-child{border-end-end-radius:0;border-inline-end-width:calc(var(--button-border-width)/2);border-start-end-radius:0}.group[data-orientation=horizontal] .root:not(:only-child):last-child{border-end-start-radius:0;border-inline-start-width:calc(var(--button-border-width)/2);border-start-start-radius:0}.group[data-orientation=horizontal] .root:not(:only-child):not(:first-child):not(:last-child){border-inline-width:calc(var(--button-border-width)/2);border-radius:0}.group[data-orientation=vertical]{flex-direction:column}.group[data-orientation=vertical] .root:not(:only-child):first-child{border-bottom-width:calc(var(--button-border-width)/2);border-end-end-radius:0;border-end-start-radius:0}.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(--button-border-width)/2)}.group[data-orientation=vertical] .root:not(:only-child):not(:first-child):not(:last-child){border-bottom-width:calc(var(--button-border-width)/2);border-radius:0;border-top-width:calc(var(--button-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-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)}