nuance-ui 0.2.10 → 0.2.11

package/dist/runtime/components/app-shell/app-shell-navbar.vue

@@ -12,36 +12,6 @@ const { mod } = defineProps({
 	</Box>
 </template>
 
-<style module lang="postcss">
-.root {
-	position: fixed;
-
-	z-index: 1;
-	top: var(--app-shell-header-offset, 0rem);
-	inset-inline-start: 0;
-	transform: var(--app-shell-navbar-transform);
-
-	display: flex;
-	flex-direction: column;
-
-	width: var(--app-shell-navbar-width);
-	height: calc(100dvh - var(--app-shell-header-offset, 0rem) - var(--app-shell-footer-offset, 0rem));
-	padding-block: var(--app-shell-element-padding);
-
-	background-color: var(--color-aside);
-
-	transition-timing-function: var(--app-shell-transition-timing-function);
-	transition-duration: var(--app-shell-transition-duration);
-	transition-property: transform, top, height;
-
-	:where([data-layout='alt']) > & {
-		top: 0;
-
-		height: 100dvh;
-	}
-
-	:where([data-with-border]) > & {
-		border-inline-end: 1px solid var(--app-shell-border-color);
-	}
-}
+<style module>
+.root{background-color:var(--color-aside);display:flex;flex-direction:column;height:calc(100dvh - var(--app-shell-header-offset, 0rem) - var(--app-shell-footer-offset, 0rem));inset-inline-start:0;padding-block:var(--app-shell-element-padding);position:fixed;top:var(--app-shell-header-offset,0);transform:var(--app-shell-navbar-transform);transition-duration:var(--app-shell-transition-duration);transition-property:transform,top,height;transition-timing-function:var(--app-shell-transition-timing-function);width:var(--app-shell-navbar-width);z-index:1}:where([data-layout=alt])>.root{height:100dvh;top:0}:where([data-with-border])>.root{border-inline-end:1px solid var(--app-shell-border-color)}
 </style>

package/dist/runtime/components/app-shell/app-shell-section.vue

@@ -13,12 +13,6 @@ const { is = "section", mod, grow } = defineProps({
 	</Box>
 </template>
 
-<style module lang="postcss">
-.root {
-	flex-grow: 0;
-
-	&:where([data-grow]) {
-		flex-grow: 1;
-	}
-}
+<style module>
+.root{flex-grow:0}.root:where([data-grow]){flex-grow:1}
 </style>

package/dist/runtime/components/app-shell/app-shell.vue

@@ -1,6 +1,5 @@
 <script setup>
-import { useProvideDatesConfig } from "@nui/composables";
-import { computed } from "vue";
+import { useProvideDatesConfig, useVarsResolver } from "@nui/composables";
 import Box from "../box.vue";
 import { useProvideAppShell } from "./context";
 const {
@@ -22,54 +21,31 @@ const navbar = defineModel("navbar", { type: Boolean, ...{ default: false } });
 const footer = defineModel("footer", { type: Boolean, ...{ default: false } });
 useProvideAppShell({ aside, footer, header, navbar });
 useProvideDatesConfig(dateConfig);
-const style = computed(() => ({
-  "--app-shell-navbar-transform": navbar.value ? "translateX(calc(-1 * var(--app-shell-navbar-width)))" : void 0,
-  "--app-shell-navbar-offset": navbar.value ? "0rem" : void 0,
-  "--app-shell-aside-transform": aside.value ? "translateX(var(--app-shell-aside-width))" : void 0,
-  "--app-shell-aside-offset": aside.value ? "0rem" : void 0,
-  "--app-shell-header-transform": header.value ? "translateY(calc(-1 * var(--app-shell-header-height)))" : void 0,
-  "--app-shell-header-offset": header.value ? "0rem" : void 0,
-  "--app-shell-footer-transform": footer.value ? "translateY(var(--app-shell-footer-height))" : void 0,
-  "--app-shell-footer-offset": footer.value ? "0rem" : void 0
+const style = useVarsResolver(() => ({
+  root: {
+    "--app-shell-navbar-transform": navbar.value ? "translateX(calc(-1 * var(--app-shell-navbar-width)))" : void 0,
+    "--app-shell-navbar-offset": navbar.value ? "0rem" : void 0,
+    "--app-shell-aside-transform": aside.value ? "translateX(var(--app-shell-aside-width))" : void 0,
+    "--app-shell-aside-offset": aside.value ? "0rem" : void 0,
+    "--app-shell-header-transform": header.value ? "translateY(calc(-1 * var(--app-shell-header-height)))" : void 0,
+    "--app-shell-header-offset": header.value ? "0rem" : void 0,
+    "--app-shell-footer-transform": footer.value ? "translateY(var(--app-shell-footer-height))" : void 0,
+    "--app-shell-footer-offset": footer.value ? "0rem" : void 0
+  }
 }));
 </script>
 
 <template>
-	<Box :is :style :class='$style.root' :mod='[mod, { layout, "with-border": withBorder }]'>
+	<Box
+		:is
+		:style
+		:class='$style.root'
+		:mod='[mod, { layout, "with-border": withBorder }]'
+	>
 		<slot />
 	</Box>
 </template>
 
-<style module lang="postcss">
-.root {
-	--app-shell-padding: var(--spacing-sm);
-	--app-shell-element-padding: .25rem;
-
-	--app-shell-transition-duration: 200ms;
-	--app-shell-transition-timing-function: ease;
-
-	--app-shell-navbar-width: rem(56px);
-	--app-shell-navbar-offset: var(--app-shell-navbar-width);
-	--app-shell-navbar-transform: none;
-
-	--app-shell-aside-width: rem(56px);
-	--app-shell-aside-offset: var(--app-shell-aside-width);
-	--app-shell-aside-transform: none;
-
-	--app-shell-header-height: rem(56px);
-	--app-shell-header-offset: var(--app-shell-header-height);
-	--app-shell-header-transform: none;
-
-	--app-shell-footer-height: rem(100px);
-	--app-shell-footer-offset: var(--app-shell-footer-height);
-	--app-shell-footer-transform: none;
-
-	@mixin light {
-		--app-shell-border-color: var(--color-gray-3);
-	}
-
-	@mixin dark {
-		--app-shell-border-color: var(--color-slate-8);
-	}
-}
+<style module>
+.root{--app-shell-padding:var(--spacing-sm);--app-shell-element-padding:.25rem;--app-shell-transition-duration:200ms;--app-shell-transition-timing-function:ease;--app-shell-navbar-width:rem(56px);--app-shell-navbar-offset:var(--app-shell-navbar-width);--app-shell-navbar-transform:none;--app-shell-aside-width:rem(56px);--app-shell-aside-offset:var(--app-shell-aside-width);--app-shell-aside-transform:none;--app-shell-header-height:rem(56px);--app-shell-header-offset:var(--app-shell-header-height);--app-shell-header-transform:none;--app-shell-footer-height:rem(100px);--app-shell-footer-offset:var(--app-shell-footer-height);--app-shell-footer-transform:none;@mixin where-light{--app-shell-border-color:var(--color-gray-3)}@mixin where-dark{--app-shell-border-color:var(--color-slate-8)}}
 </style>

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

@@ -1,8 +1,8 @@
 import type { BoxProps } from '@nui/components';
-import type { NuanceSpacing } from '@nui/types';
+import type { AnyString, NuanceSpacing } from '@nui/types';
 export interface AvatarGroupProps extends BoxProps {
     /** Negative spacing applied between child avatars to overlap them */
-    spacing?: NuanceSpacing | string;
+    spacing?: NuanceSpacing | AnyString;
 }
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {

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

@@ -5,7 +5,7 @@ import Box from "../box.vue";
 import css from "./avatar.module.css";
 import { useProvideAvatarGroup } from "./lib/context";
 const { mod, is, spacing } = defineProps({
-  spacing: { type: [String, Number], required: false },
+  spacing: { type: [String, Number, Object], required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false }
 });

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

@@ -1,8 +1,8 @@
 import type { BoxProps } from '@nui/components';
-import type { NuanceSpacing } from '@nui/types';
+import type { AnyString, NuanceSpacing } from '@nui/types';
 export interface AvatarGroupProps extends BoxProps {
     /** Negative spacing applied between child avatars to overlap them */
-    spacing?: NuanceSpacing | string;
+    spacing?: NuanceSpacing | AnyString;
 }
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {

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

@@ -1,10 +1,12 @@
 import type { BoxProps } from '@nui/components';
-import type { NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
+import type { AnyString, Classes, NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
+type AvatarVariant = 'filled' | 'light' | 'gradient' | 'outline' | 'default';
+type AvatarClasses = 'root' | 'placeholder' | 'image';
 export interface AvatarProps extends BoxProps {
-    /** Component size */
-    size?: NuanceSize | string;
     /** Border radius */
-    radius?: NuanceRadius;
+    radius?: NuanceRadius | AnyString;
+    /** Component size */
+    size?: NuanceSize | AnyString;
     /** Color from theme. Pass `'initials'` to derive the color from the user's name. */
     color?: NuanceColor | 'initials';
     /** Gradient configuration (used with `variant="gradient"`) */
@@ -23,7 +25,9 @@ export interface AvatarProps extends BoxProps {
      */
     placeholder?: string;
     /** Visual variant */
-    variant?: 'filled' | 'light' | 'gradient' | 'outline' | 'default';
+    variant?: AvatarVariant;
+    /** Styles API */
+    classes?: Classes<AvatarClasses>;
 }
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/avatar/avatar.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useStyleResolver } from "@nui/composables";
+import { useVarsResolver } from "@nui/composables";
 import { createVariantColorResolver, getRadius, getSize } from "@nui/utils";
 import { computed } from "vue";
 import Box from "../box.vue";
@@ -8,20 +8,13 @@ import { useAvatarGroupState } from "./lib/context";
 import { getInitials } from "./lib/get-initials";
 import { getInitialsColor } from "./lib/get-initials-color";
 const {
-  alt,
-  src,
-  mod,
   name,
-  color,
-  allowedInitialsColors,
-  gradient,
-  variant,
-  size,
   radius,
-  placeholder = "gravity-ui:person"
+  placeholder = "gravity-ui:person",
+  ...props
 } = defineProps({
-  size: { type: String, required: false },
-  radius: { type: [String, Number], required: false },
+  radius: { type: [String, Number, Object], required: false },
+  size: { type: [String, Object], required: false },
   color: { type: null, required: false },
   gradient: { type: Object, required: false },
   src: { type: [String, null], required: false },
@@ -30,32 +23,39 @@ const {
   allowedInitialsColors: { type: Array, required: false },
   placeholder: { type: String, 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 initials = computed(() => name && getInitials(name));
 const ctx = useAvatarGroupState();
-const style = computed(() => useStyleResolver((theme) => {
-  const _color = color === "initials" && typeof name === "string" ? getInitialsColor(name, allowedInitialsColors) : color;
+const style = useVarsResolver((theme) => {
+  const color = props.color === "initials" && typeof name === "string" ? getInitialsColor(name, props.allowedInitialsColors) : props.color;
   const { background, text, border } = createVariantColorResolver({
-    color: _color || "gray",
     theme,
-    gradient,
-    variant: variant || "light"
+    gradient: props.gradient,
+    color: color || "gray",
+    variant: props.variant || "light"
   });
   return {
-    "--avatar-size": getSize(size, "avatar-size"),
-    "--avatar-radius": radius === void 0 ? void 0 : getRadius(radius),
-    "--avatar-bg": _color || variant ? background : void 0,
-    "--avatar-color": _color || variant ? text : void 0,
-    "--avatar-bd": _color || variant ? border : void 0
+    root: {
+      "--avatar-size": getSize(props.size, "avatar-size"),
+      "--avatar-radius": radius === void 0 ? void 0 : getRadius(radius),
+      "--avatar-bg": color || props.variant ? background : void 0,
+      "--avatar-color": color || props.variant ? text : void 0,
+      "--avatar-bd": color || props.variant ? border : void 0
+    }
   };
-}));
+});
 </script>
 
 <template>
-	<Box :style :class='css.root' :mod='[{ "within-group": ctx?.withinGroup }, mod]'>
-		<span v-if='!src' :class='css.placeholder' :title='alt'>
+	<Box
+		:style='style.root'
+		:class='[css.root, classes?.root]'
+		:mod='[{ "within-group": ctx?.withinGroup }, mod]'
+	>
+		<span v-if='!src' :class='[css.placeholder, classes?.placeholder]' :title='alt'>
 			<slot>
 				<Icon v-if='!src && !name' :name='placeholder' />
 				{{ initials }}
@@ -65,7 +65,7 @@ const style = computed(() => useStyleResolver((theme) => {
 			v-else
 			:src
 			:alt
-			:class='css.image'
+			:class='[css.image, classes?.image]'
 		/>
 	</Box>
 </template>

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

@@ -1,10 +1,12 @@
 import type { BoxProps } from '@nui/components';
-import type { NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
+import type { AnyString, Classes, NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
+type AvatarVariant = 'filled' | 'light' | 'gradient' | 'outline' | 'default';
+type AvatarClasses = 'root' | 'placeholder' | 'image';
 export interface AvatarProps extends BoxProps {
-    /** Component size */
-    size?: NuanceSize | string;
     /** Border radius */
-    radius?: NuanceRadius;
+    radius?: NuanceRadius | AnyString;
+    /** Component size */
+    size?: NuanceSize | AnyString;
     /** Color from theme. Pass `'initials'` to derive the color from the user's name. */
     color?: NuanceColor | 'initials';
     /** Gradient configuration (used with `variant="gradient"`) */
@@ -23,7 +25,9 @@ export interface AvatarProps extends BoxProps {
      */
     placeholder?: string;
     /** Visual variant */
-    variant?: 'filled' | 'light' | 'gradient' | 'outline' | 'default';
+    variant?: AvatarVariant;
+    /** Styles API */
+    classes?: Classes<AvatarClasses>;
 }
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/background-image.d.vue.ts

@@ -1,8 +1,8 @@
-import type { NuanceRadius } from '@nui/types';
+import type { AnyString, NuanceRadius } from '@nui/types';
 import type { BoxProps } from './box.vue.js';
 export interface BackgroundImageProps extends BoxProps {
     /** Border radius */
-    radius?: NuanceRadius | string;
+    radius?: NuanceRadius | AnyString;
     /** Image URL */
     src: string;
 }

package/dist/runtime/components/background-image.vue

@@ -3,7 +3,7 @@ import { getRadius } from "@nui/utils";
 import { computed } from "vue";
 import Box from "./box.vue";
 const { radius, src, ...rest } = defineProps({
-  radius: { type: [String, Number], required: false },
+  radius: { type: [String, Number, Object], required: false },
   src: { type: String, required: true },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false }
@@ -18,22 +18,6 @@ const style = computed(() => ({
 	<Box :style :class='$style.root' v-bind='rest' />
 </template>
 
-<style module lang="postcss">
-.root {
-	--bi-radius: 0rem;
-
-	position: absolute;
-	inset: 0;
-
-	display: block;
-
-	width: 100%;
-	border: 0;
-	border-radius: var(--bi-radius, 0);
-
-	text-decoration: none;
-
-	background-position: center;
-	background-size: cover;
-}
+<style module>
+.root{--bi-radius:0rem;background-position:50%;background-size:cover;border:0;border-radius:var(--bi-radius,0);display:block;inset:0;position:absolute;text-decoration:none;width:100%}
 </style>

package/dist/runtime/components/background-image.vue.d.ts

@@ -1,8 +1,8 @@
-import type { NuanceRadius } from '@nui/types';
+import type { AnyString, NuanceRadius } from '@nui/types';
 import type { BoxProps } from './box.vue.js';
 export interface BackgroundImageProps extends BoxProps {
     /** Border radius */
-    radius?: NuanceRadius | string;
+    radius?: NuanceRadius | AnyString;
     /** Image URL */
     src: string;
 }

package/dist/runtime/components/badge.d.vue.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/badge.vue

@@ -1,7 +1,6 @@
 <script setup>
-import { useStyleResolver } from "@nui/composables";
+import { useVarsResolver } from "@nui/composables";
 import { createVariantColorResolver, getRadius, getSize, getThemeColor } from "@nui/utils";
-import { computed } from "vue";
 import Box from "./box.vue";
 const {
   variant = "filled",
@@ -12,39 +11,41 @@ const {
   circle,
   icon
 } = defineProps({
-  variant: { type: String, required: false },
-  size: { type: String, required: false },
+  size: { type: [String, Object], required: false },
   circle: { type: Boolean, required: false },
   radius: { type: [String, Number], required: false },
   color: { type: null, required: false },
   gradient: { type: Object, required: false },
   fullWidth: { type: Boolean, required: false },
   icon: { type: String, required: false },
+  variant: { type: String, required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false }
 });
-const style = computed(() => useStyleResolver((theme) => {
+const style = useVarsResolver((theme) => {
   const { background, border, text } = createVariantColorResolver({
     theme,
     variant: variant === "dot" ? "default" : variant,
     color
   });
   return {
-    "--badge-height": getSize(size, "badge-height"),
-    "--badge-padding-x": getSize(size, "badge-padding-x"),
-    "--badge-fz": getSize(size, "badge-fz"),
-    "--badge-radius": circle || radius === void 0 ? void 0 : getRadius(radius),
-    "--badge-bg": color || variant ? background : void 0,
-    "--badge-color": color || variant ? text : void 0,
-    "--badge-bd": color || variant ? border : void 0,
-    "--badge-dot-color": variant === "dot" ? getThemeColor(color, theme) : void 0
+    root: {
+      "--badge-height": getSize(size, "badge-height"),
+      "--badge-padding-x": getSize(size, "badge-padding-x"),
+      "--badge-fz": getSize(size, "badge-fz"),
+      "--badge-radius": circle || radius === void 0 ? void 0 : getRadius(radius),
+      "--badge-bg": color || variant ? background : void 0,
+      "--badge-color": color || variant ? text : void 0,
+      "--badge-bd": color || variant ? border : void 0,
+      "--badge-dot-color": variant === "dot" ? getThemeColor(color, theme) : void 0
+    }
   };
-}));
+});
 </script>
 
 <template>
 	<Box
-		:style
+		:style='style.root'
 		:class='$style.root'
 		:mod='[
   {
@@ -75,143 +76,6 @@ const style = computed(() => useStyleResolver((theme) => {
 	</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);
-	}
-}
+<style 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;align-items:center;background:var(--badge-bg);border:var(--badge-bd);border-radius:var(--badge-radius);color:var(--badge-color);cursor:default;display:inline-grid;font-size:var(--badge-fz);font-weight:700;height:var(--badge-height);justify-content:center;letter-spacing:.25px;line-height:var(--badge-lh);overflow:hidden;padding:0 var(--badge-padding-x);text-decoration:none;text-overflow:ellipsis;text-transform:uppercase;width:-moz-fit-content;width:fit-content;-webkit-tap-highlight-color:transparent}.root:where([data-with-left-section],[data-variant=dot]){grid-template-columns:auto 1fr;padding-left:calc(var(--badge-padding-x) - var(--spacing-xs)/2)}.root:where([data-with-right-section]){grid-template-columns:1fr auto;padding-right:calc(var(--badge-padding-x) - var(--spacing-xs)/2)}.root: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)}.root:where([data-block]){display:flex;width:100%}.root:where([data-circle]){display:flex;padding-inline:2px;width:var(--badge-height)}.root: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);background-color:var(--badge-dot-color,var(--badge-color));border-radius:var(--badge-dot-size);display:block;height:var(--badge-dot-size);margin-inline-end:calc(var(--badge-dot-size)/2);width:var(--badge-dot-size)}.label{cursor:inherit;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}.section{--badge-section-margin:calc(var(--spacing-xs)/2);align-items:center;display:inline-flex;justify-content:center;max-height:calc(var(--badge-height) - var(--badge-border-width)*2)}.section:where([data-position=left]){margin-inline-end:var(--badge-section-margin)}.section:where([data-position=right]){margin-inline-start:var(--badge-section-margin)}
 </style>