bitboss-ui 2.1.116 → 2.1.117

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>
@@ -36,7 +36,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 +79,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 +110,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/components/BbBadge/types.d.ts

@@ -8,6 +8,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.