nuance-ui 0.2.5 → 0.2.7

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

@@ -7,37 +7,37 @@ const { mod } = defineProps({
 </script>
 
 <template>
-	<Box is='header' :mod :class='$style.root'>
-		<slot />
-	</Box>
+	<Box is='header' :mod :class='$style.root'>
+		<slot />
+	</Box>
 </template>
 
 <style module lang="postcss">
-.root {
-	position: fixed;
-	z-index: 2;
-	top: 0;
-	inset-inline: 0;
-	transform: var(--app-shell-header-transform);
-
-	display: flex;
-
-	height: var(--app-shell-header-height);
-	padding-block: var(--app-shell-element-padding);
-	padding-inline: 1rem;
-
-	background-color: var(--color-header);
-
-	transition-timing-function: var(--app-shell-transition-timing-function);
-	transition-duration: var(--app-shell-transition-duration);
-	transition-property: transform, left, right;
-
-	:where([data-with-border]) > & {
-		border-bottom: 1px solid var(--app-shell-border-color);
-	}
-
-	:where([data-layout='alt']) > & {
-		inset-inline-start: var(--app-shell-navbar-offset, 0rem);
-	}
-}
+.root {
+	position: fixed;
+	z-index: 2;
+	top: 0;
+	inset-inline: 0;
+	transform: var(--app-shell-header-transform);
+
+	display: flex;
+
+	height: var(--app-shell-header-height);
+	padding-block: var(--app-shell-element-padding);
+	padding-inline: 1rem;
+
+	background-color: var(--color-header);
+
+	transition-timing-function: var(--app-shell-transition-timing-function);
+	transition-duration: var(--app-shell-transition-duration);
+	transition-property: transform, left, right;
+
+	:where([data-with-border]) > & {
+		border-bottom: 1px solid var(--app-shell-border-color);
+	}
+
+	:where([data-layout='alt']) > & {
+		inset-inline-start: var(--app-shell-navbar-offset, 0rem);
+	}
+}
 </style>

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

@@ -7,25 +7,25 @@ const { mod } = defineProps({
 </script>
 
 <template>
-	<Box is='main' :mod :class='$style.root'>
-		<slot />
-	</Box>
+	<Box is='main' :mod :class='$style.root'>
+		<slot />
+	</Box>
 </template>
 
 <style module lang="postcss">
-.root {
-	display: flex;
-	flex-direction: column;
-
-	min-height: 100dvh;
-	padding-top: calc(var(--app-shell-header-offset, 0rem) + var(--app-shell-padding));
-	padding-bottom: calc(var(--app-shell-footer-offset, 0rem) + var(--app-shell-padding));
-	padding-inline-start: calc(var(--app-shell-navbar-offset, 0rem) + var(--app-shell-padding));
-	padding-inline-end: calc(var(--app-shell-aside-offset, 0rem) + var(--app-shell-padding));
-
-	transition-timing-function: var(--app-shell-transition-timing-function);
-	transition-duration: var(--app-shell-transition-duration);
-
-	transition-property: padding;
-}
+.root {
+	display: flex;
+	flex-direction: column;
+
+	min-height: 100dvh;
+	padding-top: calc(var(--app-shell-header-offset, 0rem) + var(--app-shell-padding));
+	padding-bottom: calc(var(--app-shell-footer-offset, 0rem) + var(--app-shell-padding));
+	padding-inline-start: calc(var(--app-shell-navbar-offset, 0rem) + var(--app-shell-padding));
+	padding-inline-end: calc(var(--app-shell-aside-offset, 0rem) + var(--app-shell-padding));
+
+	transition-timing-function: var(--app-shell-transition-timing-function);
+	transition-duration: var(--app-shell-transition-duration);
+
+	transition-property: padding;
+}
 </style>

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

@@ -7,41 +7,41 @@ const { mod } = defineProps({
 </script>
 
 <template>
-	<Box is='nav' :mod :class='$style.root'>
-		<slot />
-	</Box>
+	<Box is='nav' :mod :class='$style.root'>
+		<slot />
+	</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);
-	}
-}
+.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>

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

@@ -1,6 +1,9 @@
 import type { BoxProps } from '../box.vue.js';
 export interface AppShellSectionProps extends BoxProps {
-    /** Determines whether the section should take all available space, `false` by default */
+    /**
+     * Stretches the section to fill all available space
+     * @default false
+     */
     grow?: boolean;
 }
 declare var __VLS_8: {};

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

@@ -8,17 +8,17 @@ const { is = "section", mod, grow } = defineProps({
 </script>
 
 <template>
-	<Box :is :class='$style.root' :mod='[mod, { grow }]'>
-		<slot />
-	</Box>
+	<Box :is :class='$style.root' :mod='[mod, { grow }]'>
+		<slot />
+	</Box>
 </template>
 
 <style module lang="postcss">
-.root {
-	flex-grow: 0;
-
-	&:where([data-grow]) {
-		flex-grow: 1;
-	}
-}
+.root {
+	flex-grow: 0;
+
+	&:where([data-grow]) {
+		flex-grow: 1;
+	}
+}
 </style>

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

@@ -1,6 +1,9 @@
 import type { BoxProps } from '../box.vue.js';
 export interface AppShellSectionProps extends BoxProps {
-    /** Determines whether the section should take all available space, `false` by default */
+    /**
+     * Stretches the section to fill all available space
+     * @default false
+     */
     grow?: boolean;
 }
 declare var __VLS_8: {};

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

@@ -1,10 +1,18 @@
-import type { DateConfig } from '@nui/composals';
+import type { DateConfig } from '@nui/composables';
 import type { BoxProps } from '../box.vue.js';
 export interface AppShellProps extends BoxProps {
-    /** Determines how Navbar/Aside are arranged relative to Header/Footer, `default` by default */
+    /**
+     * Layout mode. `alt` stretches Navbar/Aside to the full viewport height,
+     * pushing Header/Footer between them.
+     * @default 'default'
+     */
     layout?: 'default' | 'alt';
+    /**
+     * Renders dividers between shell sections
+     * @default false
+     */
     withBorder?: boolean;
-    /** Provide app config for dates */
+    /** Locale configuration for date-aware features */
     dateConfig?: Partial<DateConfig>;
 }
 type __VLS_Props = AppShellProps;

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

@@ -1,5 +1,5 @@
 <script setup>
-import { useProvideDatesConfig } from "@nui/composals";
+import { useProvideDatesConfig } from "@nui/composables";
 import { computed } from "vue";
 import Box from "../box.vue";
 import { useProvideAppShell } from "./context";
@@ -35,41 +35,41 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<Box :is :style :class='$style.root' :mod='[mod, { layout, "with-border": withBorder }]'>
-		<slot />
-	</Box>
+	<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);
-	}
-}
+.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>

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

@@ -1,10 +1,18 @@
-import type { DateConfig } from '@nui/composals';
+import type { DateConfig } from '@nui/composables';
 import type { BoxProps } from '../box.vue.js';
 export interface AppShellProps extends BoxProps {
-    /** Determines how Navbar/Aside are arranged relative to Header/Footer, `default` by default */
+    /**
+     * Layout mode. `alt` stretches Navbar/Aside to the full viewport height,
+     * pushing Header/Footer between them.
+     * @default 'default'
+     */
     layout?: 'default' | 'alt';
+    /**
+     * Renders dividers between shell sections
+     * @default false
+     */
     withBorder?: boolean;
-    /** Provide app config for dates */
+    /** Locale configuration for date-aware features */
     dateConfig?: Partial<DateConfig>;
 }
 type __VLS_Props = AppShellProps;

package/dist/runtime/components/app-shell/context.d.ts

@@ -1,8 +1,13 @@
 import type { ModelRef } from 'vue';
+/** Open/closed state of each AppShell region. */
 interface AppShellState {
+    /** Whether the header is collapsed. */
     header: ModelRef<boolean>;
+    /** Whether the navbar is collapsed. */
     navbar: ModelRef<boolean>;
+    /** Whether the aside panel is collapsed. */
     aside: ModelRef<boolean>;
+    /** Whether the footer is collapsed. */
     footer: ModelRef<boolean>;
 }
 export declare const useProvideAppShell: (args_0: AppShellState) => AppShellState;

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

@@ -1,7 +1,7 @@
 import type { BoxProps } from '@nui/components';
 import type { NuanceSpacing } from '@nui/types';
 export interface AvatarGroupProps extends BoxProps {
-    /** Negative space between Avatar components @default `'sm'` */
+    /** Negative spacing applied between child avatars to overlap them */
     spacing?: NuanceSpacing | string;
 }
 declare var __VLS_8: {};

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

@@ -2,8 +2,8 @@
 import { getSpacing } from "@nui/utils";
 import { computed } from "vue";
 import Box from "../box.vue";
-import { useProvideAvatarGroup } from "./_lib/context";
 import css from "./avatar.module.css";
+import { useProvideAvatarGroup } from "./lib/context";
 const { mod, is, spacing } = defineProps({
   spacing: { type: [String, Number], required: false },
   is: { type: null, required: false },

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

@@ -1,7 +1,7 @@
 import type { BoxProps } from '@nui/components';
 import type { NuanceSpacing } from '@nui/types';
 export interface AvatarGroupProps extends BoxProps {
-    /** Negative space between Avatar components @default `'sm'` */
+    /** Negative spacing applied between child avatars to overlap them */
     spacing?: NuanceSpacing | string;
 }
 declare var __VLS_8: {};

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

@@ -1,24 +1,28 @@
 import type { BoxProps } from '@nui/components';
 import type { NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
 export interface AvatarProps extends BoxProps {
-    /** Width and height of the avatar, numbers are converted to rem @default `'md'` */
+    /** Component size */
     size?: NuanceSize | string;
-    /** Key of `theme.radius` or any valid CSS value to set border-radius @default `'1000px'` */
+    /** Border radius */
     radius?: NuanceRadius;
-    /** Key of `theme.colors` or any valid CSS color @default `'gray'` */
+    /** Color from theme. Pass `'initials'` to derive the color from the user's name. */
     color?: NuanceColor | 'initials';
-    /** Gradient configuration for `variant="gradient"` @default `theme.defaultGradient` */
+    /** Gradient configuration (used with `variant="gradient"`) */
     gradient?: NuanceGradient;
-    /** Image url, if the image cannot be loaded or `src={null}`, then placeholder is displayed instead */
+    /** Image URL. When the image fails to load or is `null`, a placeholder is shown instead. */
     src?: string | null;
-    /** Image `alt` attribute, also used as `title` attribute for placeholder */
+    /** Image `alt` attribute. Also used as `title` for the placeholder. */
     alt?: string;
-    /** Name of the user. When `src` is not set, used to display initials and to generate color when `color="initials"` is set. */
+    /** Name of the user. Used to render initials and to generate a color when `color="initials"`. */
     name?: string;
-    /** A list of colors that is used for autogenerated initials. By default, all default colors can be used except gray and dark. */
+    /** Palette of colors picked from for autogenerated initials. Defaults to all theme colors except gray and dark. */
     allowedInitialsColors?: NuanceColor[];
-    /** Placeholder icon */
+    /**
+     * Icon rendered when no `src` and no `name` are provided
+     * @default 'gravity-ui:person'
+     */
     placeholder?: string;
+    /** Visual variant */
     variant?: 'filled' | 'light' | 'gradient' | 'outline' | 'default';
 }
 declare var __VLS_8: {};

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

@@ -1,12 +1,12 @@
 <script setup>
-import { getInitialsColor } from "@nui/components/avatar/_lib/get-initials-color";
-import { useStyleResolver } from "@nui/composals";
+import { useStyleResolver } from "@nui/composables";
 import { createVariantColorResolver, getRadius, getSize } from "@nui/utils";
 import { computed } from "vue";
 import Box from "../box.vue";
-import { useAvatarGroupState } from "./_lib/context";
-import { getInitials } from "./_lib/get-initials";
 import css from "./avatar.module.css";
+import { useAvatarGroupState } from "./lib/context";
+import { getInitials } from "./lib/get-initials";
+import { getInitialsColor } from "./lib/get-initials-color";
 const {
   alt,
   src,

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

@@ -1,24 +1,28 @@
 import type { BoxProps } from '@nui/components';
 import type { NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
 export interface AvatarProps extends BoxProps {
-    /** Width and height of the avatar, numbers are converted to rem @default `'md'` */
+    /** Component size */
     size?: NuanceSize | string;
-    /** Key of `theme.radius` or any valid CSS value to set border-radius @default `'1000px'` */
+    /** Border radius */
     radius?: NuanceRadius;
-    /** Key of `theme.colors` or any valid CSS color @default `'gray'` */
+    /** Color from theme. Pass `'initials'` to derive the color from the user's name. */
     color?: NuanceColor | 'initials';
-    /** Gradient configuration for `variant="gradient"` @default `theme.defaultGradient` */
+    /** Gradient configuration (used with `variant="gradient"`) */
     gradient?: NuanceGradient;
-    /** Image url, if the image cannot be loaded or `src={null}`, then placeholder is displayed instead */
+    /** Image URL. When the image fails to load or is `null`, a placeholder is shown instead. */
     src?: string | null;
-    /** Image `alt` attribute, also used as `title` attribute for placeholder */
+    /** Image `alt` attribute. Also used as `title` for the placeholder. */
     alt?: string;
-    /** Name of the user. When `src` is not set, used to display initials and to generate color when `color="initials"` is set. */
+    /** Name of the user. Used to render initials and to generate a color when `color="initials"`. */
     name?: string;
-    /** A list of colors that is used for autogenerated initials. By default, all default colors can be used except gray and dark. */
+    /** Palette of colors picked from for autogenerated initials. Defaults to all theme colors except gray and dark. */
     allowedInitialsColors?: NuanceColor[];
-    /** Placeholder icon */
+    /**
+     * Icon rendered when no `src` and no `name` are provided
+     * @default 'gravity-ui:person'
+     */
     placeholder?: string;
+    /** Visual variant */
     variant?: 'filled' | 'light' | 'gradient' | 'outline' | 'default';
 }
 declare var __VLS_8: {};

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

@@ -1 +1,2 @@
 export type * from './avatar.vue';
+export { useAvatarGroupState } from './lib/context.js';

package/dist/runtime/components/avatar/index.js

@@ -0,0 +1 @@
+export { useAvatarGroupState } from "./lib/context.js";

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

@@ -1,8 +1,9 @@
 import type { NuanceRadius } from '@nui/types';
 import type { BoxProps } from './box.vue.js';
 export interface BackgroundImageProps extends BoxProps {
+    /** Border radius */
     radius?: NuanceRadius | string;
-    /** Image url */
+    /** Image URL */
     src: string;
 }
 declare const __VLS_export: import("vue").DefineComponent<BackgroundImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BackgroundImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,8 +1,9 @@
 import type { NuanceRadius } from '@nui/types';
 import type { BoxProps } from './box.vue.js';
 export interface BackgroundImageProps extends BoxProps {
+    /** Border radius */
     radius?: NuanceRadius | string;
-    /** Image url */
+    /** Image URL */
     src: string;
 }
 declare const __VLS_export: import("vue").DefineComponent<BackgroundImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BackgroundImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

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: {};