bitboss-ui 2.1.116 → 2.1.118

package/dist/ai/BaseRating.md

@@ -69,7 +69,7 @@ import type {
 	BaseRatingEvents,
 	BaseRatingSlots,
 } from './types';
-import type { Size } from '../BbIcon/BbIcon.vue';
+import type { Size } from '../BbIcon/types';
 import { useLocale } from '@/composables/useLocale';
 
 type Option = {
@@ -236,7 +236,7 @@ const outerContainerAttributes = computed(() => {
 
 ```ts
 import type { InputHTMLAttributes, HTMLAttributes } from 'vue';
-import type { BbIconProps, Size } from '../BbIcon/BbIcon.vue';
+import type { BbIconProps } from '../BbIcon/types';
 
 /**
  * Props for the star rating input component with customizable star count and visual feedback.

package/dist/ai/BaseTag.md

@@ -92,7 +92,6 @@ import CommonInputOuterContainer from '../CommonInputOuterContainer/CommonInputO
 import type { Option as BaseOption } from '@/types/Option';
 import { isEmpty } from '@/utilities/functions/empty';
 import type { BaseTagProps, BaseTagEvents, BaseTagSlots } from './types';
-export type { BaseTagProps, BaseTagEvents, BaseTagSlots };
 
 const props = withDefaults(defineProps<BaseTagProps>(), {
 	autocomplete: 'off',

package/dist/ai/BbAccordion.md

@@ -36,7 +36,6 @@ import type {
 	BbAccordionEvents,
 	BbAccordionSlots,
 } from './types';
-export type { BbAccordionProps, BbAccordionEvents, BbAccordionSlots };
 
 const emit = defineEmits<BbAccordionEvents>();
 
@@ -75,7 +74,7 @@ defineSlots<BbAccordionSlots>();
 ## Types
 
 ```ts
-import type { BbCollapsibleProps } from '../BbCollapsible/BbCollapsible.vue';
+import type { BbCollapsibleProps } from '../BbCollapsible/types';
 import type { CommonProps } from '@/types/CommonProps';
 
 export type BbAccordionProps = Pick<

package/dist/ai/BbAlert.md

@@ -57,7 +57,6 @@ import BbCollapsible from '../BbCollapsible/BbCollapsible.vue';
 import BbIcon from '../BbIcon/BbIcon.vue';
 import { useLocale } from '@/composables/useLocale';
 import type { BbAlertProps, BbAlertEvents, BbAlertSlots } from './types';
-export type { BbAlertProps, BbAlertEvents, BbAlertSlots };
 
 const props = withDefaults(defineProps<BbAlertProps>(), {
 	theme: 'default',
@@ -97,7 +96,7 @@ const onClickClose = () => {
 
 ```ts
 import type { CommonProps } from '@/types/CommonProps';
-import type { BbIconProps } from '../BbIcon/BbIcon.vue';
+import type { BbIconProps } from '../BbIcon/types';
 
 export type BbAlertProps = Pick<
 	CommonProps,

package/dist/ai/BbAvatar.md

@@ -28,7 +28,6 @@ import { isCssColor } from '@/utilities/functions/isCssColor';
 import type { Classes } from '@/types/Classes';
 import { wait } from '@/utilities/functions/wait';
 import type { BbAvatarProps, BbAvatarSlots, Size } from './types';
-export type { BbAvatarProps, BbAvatarSlots };
 
 const props = withDefaults(defineProps<BbAvatarProps>(), {
 	timeout: 400,

package/dist/ai/BbBadge.md

@@ -8,7 +8,7 @@
 		<span class="bb-badge__wrapper">
 			<slot></slot>
 			<span class="bb-badge__content-container" v-bind="contentAttributes">
-				<span class="bb-badge__content-inner"
+				<span v-if="!props.dot" class="bb-badge__content-inner"
 					><slot name="content">{{ content }}</slot></span
 				>
 			</span>
@@ -21,7 +21,6 @@ import { computed, useSlots } from 'vue';
 import { isCssColor } from '@/utilities/functions/isCssColor';
 import { isNil } from '@/utilities/functions/isNil';
 import type { BbBadgeProps, BbBadgeSlots } from './types';
-export type { BbBadgeProps, BbBadgeSlots };
 
 const slots = useSlots();
 
@@ -36,7 +35,8 @@ const classes = computed(() => {
 		'bb-badge--left': props.left,
 		'bb-badge--positioned': slots.default,
 		'bb-badge--floating': props.floating,
-		'bb-badge--empty': isNil(props.content),
+		'bb-badge--dot': props.dot,
+		'bb-badge--empty': !props.dot && isNil(props.content),
 		[`bb-badge--${props.color}`]: props.color && !isCssColor(props.color),
 	};
 });
@@ -78,6 +78,10 @@ export type BbBadgeProps = Pick<CommonProps, 'color'> & {
 	 * Text content of the badge.
 	 */
 	content?: string | number | null;
+	/**
+	 * Renders a small dot with no content instead of the full badge.
+	 */
+	dot?: boolean;
 	/**
 	 * Renders the badge a little further from the wrapped component,
 	 * making it look like it's floating and not stacked.
@@ -105,77 +109,131 @@ export type BbBadgeSlots = {
 
 ```css
 .bb-badge {
-	--color: var(--bb-primary);
-	--radius: 999px;
+	/* ── Configurable tokens ─────────────────────────────────── */
+	--bb-badge-bg: var(--bb-primary);
+	--bb-badge-color: var(--bb-contrasting);
+	--bb-badge-radius: 999px;
+	--bb-badge-font-size: 0.75rem;
+	--bb-badge-min-size: 1.375rem;
+	--bb-badge-dot-size: 0.625rem;
+	--bb-badge-border-width: 0px;
+	--bb-badge-border-color: transparent;
+	--bb-badge-offset: 0.625rem;
+	--bb-badge-float-offset: 1.25rem;
+	--bb-badge-dot-offset: 0.125rem;
+	--bb-badge-dot-float-offset: 0.5rem;
+
 	display: inline-flex;
 
+	/* ── Positioned mode ─────────────────────────────────────── */
 	&--positioned {
 		position: relative;
 
-		&.bb-badge--left {
-			.bb-badge__content-container {
-				left: calc(0% - 10px);
-			}
+		.bb-badge__content-container {
+			position: absolute;
+			top: calc(0% - var(--bb-badge-offset));
+			right: calc(0% - var(--bb-badge-offset));
+			bottom: auto;
+			left: auto;
 		}
 
-		&.bb-badge--bottom {
-			.bb-badge__content-container {
-				bottom: calc(0% - 10px);
-			}
+		&.bb-badge--left .bb-badge__content-container {
+			right: auto;
+			left: calc(0% - var(--bb-badge-offset));
 		}
 
-		&.bb-badge--empty {
-			.bb-badge__content-container {
-				transform: scale(0);
-			}
+		&.bb-badge--bottom .bb-badge__content-container {
+			top: auto;
+			bottom: calc(0% - var(--bb-badge-offset));
+		}
+
+		&.bb-badge--empty .bb-badge__content-container {
+			transform: scale(0);
+		}
+
+		/* Dot: smaller so it needs a tighter offset */
+		&.bb-badge--dot .bb-badge__content-container {
+			top: calc(0% - var(--bb-badge-dot-offset));
+			right: calc(0% - var(--bb-badge-dot-offset));
+		}
+
+		&.bb-badge--dot.bb-badge--left .bb-badge__content-container {
+			right: auto;
+			left: calc(0% - var(--bb-badge-dot-offset));
 		}
 
-		&.bb-badge--floating {
+		&.bb-badge--dot.bb-badge--bottom .bb-badge__content-container {
+			top: auto;
+			bottom: calc(0% - var(--bb-badge-dot-offset));
+		}
+
+		/* Floating */
+		&.bb-badge--floating .bb-badge__content-container {
+			top: calc(0% - var(--bb-badge-float-offset));
+			right: calc(0% - var(--bb-badge-float-offset));
+			bottom: auto;
+			left: auto;
+		}
+
+		&.bb-badge--floating.bb-badge--left .bb-badge__content-container {
+			right: auto;
+			left: calc(0% - var(--bb-badge-float-offset));
+		}
+
+		&.bb-badge--floating.bb-badge--bottom .bb-badge__content-container {
+			top: auto;
+			bottom: calc(0% - var(--bb-badge-float-offset));
+		}
+
+		/* Floating dot */
+		&.bb-badge--floating.bb-badge--dot .bb-badge__content-container {
+			top: calc(0% - var(--bb-badge-dot-float-offset));
+			right: calc(0% - var(--bb-badge-dot-float-offset));
+			bottom: auto;
+			left: auto;
+		}
+
+		&.bb-badge--floating.bb-badge--dot.bb-badge--left
 			.bb-badge__content-container {
-				bottom: calc(100% - 4px);
-				left: calc(100% - 4px);
-
-				&.bb-badge--left {
-					left: calc(0% + 4px);
-					transform: translateX(-100%);
-				}
-
-				&.bb-badge--bottom {
-					bottom: calc(0% + 4px);
-					transform: translateY(100%);
-				}
-			}
+			right: auto;
+			left: calc(0% - var(--bb-badge-dot-float-offset));
 		}
 
-		.bb-badge__content-container {
-			bottom: calc(100% - 10px);
-			left: calc(100% - 10px);
-			min-height: 18px;
-			min-width: 18px;
-			position: absolute;
+		&.bb-badge--floating.bb-badge--dot.bb-badge--bottom
+			.bb-badge__content-container {
+			top: auto;
+			bottom: calc(0% - var(--bb-badge-dot-float-offset));
 		}
 	}
 
+	/* ── Badge bubble ────────────────────────────────────────── */
 	&__content-container {
 		align-items: center;
-		background-color: var(--color);
-		border-radius: var(--radius);
-		color: var(--bb-contrasting);
+		background-color: var(--bb-badge-bg);
+		border: var(--bb-badge-border-width) solid var(--bb-badge-border-color);
+		border-radius: var(--bb-badge-radius);
+		color: var(--bb-badge-color);
 		display: inline-flex;
-		font-size: 12px;
+		font-size: var(--bb-badge-font-size);
+		font-weight: 600;
 		justify-content: center;
-		line-height: 0;
-		min-height: 22px;
-		padding-bottom: 3px;
-		padding-left: 6px;
-		padding-right: 6px;
-		padding-top: 3px;
+		line-height: 1;
+		min-height: var(--bb-badge-min-size);
+		min-width: var(--bb-badge-min-size);
+		padding-block: 0.1875rem;
+		padding-inline: 0.375rem;
 		transition:
 			color 0.2s,
-			background-color 0.2s;
+			background-color 0.2s,
+			transform 0.15s;
+		white-space: nowrap;
 	}
 
-	&__content-inner {
+	/* ── Dot mode ────────────────────────────────────────────── */
+	&--dot .bb-badge__content-container {
+		min-height: var(--bb-badge-dot-size);
+		min-width: var(--bb-badge-dot-size);
+		padding: 0;
 	}
 
 	&__wrapper {

package/dist/ai/BbBreadcrumbs.md

@@ -129,7 +129,6 @@ import {
 	estimateEllipsisWidth,
 } from './estimateBreadcrumbItemWidth';
 import type { BbBreadcrumbsProps, BbBreadcrumbsSlots, Item } from './types';
-export type { BbBreadcrumbsProps, BbBreadcrumbsSlots, Item };
 
 const props = withDefaults(defineProps<BbBreadcrumbsProps>(), {
 	divider: '/',

package/dist/ai/BbButton.md

@@ -66,7 +66,6 @@ import { useLocale } from '@/composables/useLocale';
 import { extractDomContainer } from '@/utilities/functions/extractDomContainer';
 import { isEqual } from '@/utilities/functions/isEqual';
 import type { BbButtonProps, BbButtonSlots } from './types';
-export type { BbButtonProps, BbButtonSlots };
 
 const BbTooltipAsync = defineAsyncComponent(
 	() => import('../BbTooltip/BbTooltip.vue')

package/dist/ai/BbCheckbox.md

@@ -56,7 +56,6 @@ import type {
 	BbCheckboxEvents,
 	BbCheckboxSlots,
 } from './types';
-export type { BbCheckboxProps, BbCheckboxEvents, BbCheckboxSlots };
 
 const props = withDefaults(defineProps<BbCheckboxProps>(), {
 	direction: 'auto',

package/dist/ai/BbCheckboxGroup.md

@@ -80,11 +80,6 @@ import type {
 	BbCheckboxGroupEvents,
 	BbCheckboxGroupSlots,
 } from './types';
-export type {
-	BbCheckboxGroupProps,
-	BbCheckboxGroupEvents,
-	BbCheckboxGroupSlots,
-};
 
 const props = withDefaults(defineProps<BbCheckboxGroupProps<T>>(), {
 	inputPosition: 'left',

package/dist/ai/BbChip.md

@@ -26,7 +26,6 @@
 <script setup lang="ts">
 import { useLocale } from '@/composables/useLocale';
 import type { BbChipProps, BbChipEvents, BbChipSlots } from './types';
-export type { BbChipProps, BbChipEvents, BbChipSlots };
 
 withDefaults(defineProps<BbChipProps>(), {
 	clearable: true,

package/dist/ai/BbCollapsible.md

@@ -18,7 +18,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
 import type { BbCollapsibleProps, BbCollapsibleSlots } from './types';
-export type { BbCollapsibleProps, BbCollapsibleSlots };
 
 const props = withDefaults(defineProps<BbCollapsibleProps>(), {
 	transitionDuration: 250,

package/dist/ai/BbColorInput.md

@@ -65,7 +65,6 @@ import type {
 	BbColorInputEvents,
 	BbColorInputSlots,
 } from './types';
-export type { BbColorInputProps, BbColorInputEvents, BbColorInputSlots };
 
 const props = defineProps<BbColorInputProps>();
 

package/dist/ai/BbColorPalette.md

@@ -57,7 +57,6 @@ import type {
 	BbColorPaletteEvents,
 	BbColorPaletteSlots,
 } from './types';
-export type { BbColorPaletteProps, BbColorPaletteEvents, BbColorPaletteSlots };
 
 const props = withDefaults(defineProps<BbColorPaletteProps>(), {
 	alpha: false,

package/dist/ai/BbDatePickerInput.md

@@ -72,12 +72,6 @@ import type {
 	BbDatePickerInputSlots,
 	DatePickerInputError,
 } from './types';
-export type {
-	BbDatePickerInputProps,
-	BbDatePickerInputEvents,
-	BbDatePickerInputSlots,
-};
-export type { DatePickerInputError } from './types';
 
 const props = withDefaults(defineProps<BbDatePickerInputProps>(), {
 	allowWriting: true,

package/dist/ai/BbDialog.md

@@ -33,12 +33,6 @@ import type {
 	BaseDialogEvents,
 	BaseDialogSlots,
 } from '../BaseDialog/types';
-export type {
-	BbDialogProps,
-	BbDialogEvents,
-	BbDialogSlots,
-	Sizes,
-} from './types';
 
 const props = withDefaults(defineProps<BaseDialogProps>(), {
 	showClose: true,

package/dist/ai/BbDropdown.md

@@ -129,13 +129,6 @@ import type {
 	MappedItem,
 	DropdownTrigger,
 } from './types';
-export type {
-	BbDropdownProps,
-	BbDropdownSlots,
-	Item,
-	MappedItem,
-	DropdownTrigger,
-};
 
 type InferredBodySlots = ColumnName<BbDropdownProps['items'][number]['key']>;
 defineSlots<BbDropdownSlots>();

package/dist/ai/BbDropdownButton.md

@@ -104,7 +104,6 @@ import { ref } from 'vue';
 import { BbIcon, BbSpinner } from '@/index';
 import { useLocale } from '@/composables/useLocale';
 import type { BbDropdownButtonProps, BbDropdownButtonSlots } from './types';
-export type { BbDropdownButtonProps, BbDropdownButtonSlots };
 
 type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 

package/dist/ai/BbDropzone.md

@@ -61,12 +61,6 @@ import type {
 	BbDropzoneSlots,
 	DropZoneError,
 } from './types';
-export type {
-	BbDropzoneProps,
-	BbDropzoneEvents,
-	BbDropzoneSlots,
-	DropZoneError,
-};
 
 // This is the dynamic import for mime
 let mime: any;

package/dist/ai/BbIcon.md

@@ -21,7 +21,6 @@ import { isCssColor } from '@/utilities/functions/isCssColor';
 import { get } from '@/utilities/functions/get';
 import { useLogger } from '@/composables/useLogger';
 import type { BbIconProps, Size } from './types';
-export type { BbIconProps, Size };
 
 const props = withDefaults(defineProps<BbIconProps>(), {
 	size: 'md',

package/dist/ai/BbIntersection.md

@@ -17,7 +17,6 @@ import type {
 	BbIntersectionEvents,
 	BbIntersectionSlots,
 } from './types';
-export type { BbIntersectionProps, BbIntersectionEvents, BbIntersectionSlots };
 
 const props = withDefaults(defineProps<BbIntersectionProps>(), {
 	debounceTime: 0,

package/dist/ai/BbNumberInput.md

@@ -73,7 +73,6 @@ import type {
 	BbNumberInputEvents,
 	BbNumberInputSlots,
 } from './types';
-export type { BbNumberInputProps, BbNumberInputEvents, BbNumberInputSlots };
 
 const props = withDefaults(defineProps<BbNumberInputProps>(), {});
 

package/dist/ai/BbOffCanvas.md

@@ -108,7 +108,6 @@ import type {
 	BbOffCanvasSlots,
 	Sizes,
 } from './types';
-export type { BbOffCanvasProps, BbOffCanvasEvents, BbOffCanvasSlots, Sizes };
 
 const props = withDefaults(defineProps<BbOffCanvasProps>(), {
 	direction: 'left',

package/dist/ai/BbPagination.md

@@ -89,7 +89,6 @@ import type {
 	BbPaginationEvents,
 	BbPaginationSlots,
 } from './types';
-export type { BbPaginationProps, BbPaginationEvents, BbPaginationSlots };
 
 const props = withDefaults(defineProps<BbPaginationProps>(), {
 	align: 'right',

package/dist/ai/BbPopover.md

@@ -82,7 +82,6 @@ import type {
 	BbPopoverSlots,
 	PopoverTrigger,
 } from './types';
-export type { BbPopoverProps, BbPopoverEvents, BbPopoverSlots, PopoverTrigger };
 
 const props = withDefaults(defineProps<BbPopoverProps>(), {
 	arrowPadding: 10,

package/dist/ai/BbProgress.md

@@ -19,7 +19,6 @@ import { clamp } from '@/utilities/functions/clamp';
 import { getAsPercentageBetween } from '@/utilities/functions/percentage';
 import { computed } from 'vue';
 import type { BbProgressProps } from './types';
-export type { BbProgressProps };
 
 /**
  * You can get percentage between 250 and 370 and have it compute it automatically.

package/dist/ai/BbRadio.md

@@ -49,7 +49,6 @@ import BaseInputContainer from '../BaseInputContainer/BaseInputContainer.vue';
 import BaseRadio from '../BaseRadio/BaseRadio.vue';
 import { ref, computed } from 'vue';
 import type { BbRadioProps, BbRadioEvents, BbRadioSlots } from './types';
-export type { BbRadioProps, BbRadioEvents, BbRadioSlots };
 
 const props = withDefaults(defineProps<BbRadioProps>(), {
 	direction: 'auto',

package/dist/ai/BbRadioGroup.md

@@ -79,7 +79,6 @@ import type {
 	BbRadioGroupEvents,
 	BbRadioGroupSlots,
 } from './types';
-export type { BbRadioGroupProps, BbRadioGroupEvents, BbRadioGroupSlots };
 
 const props = withDefaults(defineProps<BbRadioGroupProps<T>>(), {
 	inputPosition: 'left',

package/dist/ai/BbRating.md

@@ -54,7 +54,6 @@ import BaseRating from '../BaseRating/BaseRating.vue';
 import type { BaseRatingEvents } from '../BaseRating/types';
 import { ref, computed } from 'vue';
 import type { BbRatingProps, BbRatingEvents, BbRatingSlots } from './types';
-export type { BbRatingProps, BbRatingEvents, BbRatingSlots };
 
 const props = withDefaults(defineProps<BbRatingProps>(), {
 	inputPosition: 'left',

package/dist/ai/BbRatio.md

@@ -16,7 +16,6 @@
 
 <script setup lang="ts">
 import type { BbRatioProps, BbRatioSlots } from './types';
-export type { BbRatioProps, BbRatioSlots };
 
 withDefaults(defineProps<BbRatioProps>(), {
 	ratio: 1,

package/dist/ai/BbSelect.md

@@ -111,7 +111,6 @@ import BaseInputContainer from '../BaseInputContainer/BaseInputContainer.vue';
 import BaseSelect from '../BaseSelect/BaseSelect.vue';
 import { ref, computed } from 'vue';
 import type { BbSelectProps, BbSelectEvents, BbSelectSlots } from './types';
-export type { BbSelectProps, BbSelectEvents, BbSelectSlots };
 
 const props = withDefaults(defineProps<BbSelectProps<T>>(), {
 	allowWriting: true,
@@ -157,7 +156,7 @@ import type { NestedKeyOf } from '@/types/NestedKeyOf';
 import type { IconType } from '@/types/Icon';
 import type { BaseSelectEvents } from '../BaseSelect/types';
 
-export type BbSelectProps<T> = {
+export type BbSelectProps<T = any> = {
 	/**
 	 * Allows typing into the input.
 	 */