@repobuddy/storybook 2.26.0 → 2.28.0

package/esm/index.d.ts

@@ -1,8 +1,8 @@
 
 import { UserConfig } from "htmlfy";
-import * as react from "react";
+import * as _$react from "react";
 import { ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { AnyFunction, CreateTuple, IsStringLiteral, Properties, Tail } from "type-plus";
 import { ClassNameProps, StyleProps } from "@just-web/css";
 import { Args, DecoratorFunction, Renderer } from "storybook/internal/csf";
@@ -39,7 +39,7 @@ declare function ShowHtml({
   selector,
   config,
   ...props
-}: ShowHtmlProps): react_jsx_runtime0.JSX.Element;
+}: ShowHtmlProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/story_card.d.ts
 /**
@@ -99,7 +99,14 @@ type StoryCardThemeState = Pick<StoryCardProps, 'status' | 'appearance'> & {
  * @param props - StoryCard component props
  * @returns A section element containing the card content
  */
-declare const StoryCard: react.NamedExoticComponent<StoryCardProps>;
+declare const StoryCard: _$react.MemoExoticComponent<({
+  status,
+  appearance,
+  className,
+  children,
+  title,
+  ...rest
+}: StoryCardProps) => _$react_jsx_runtime0.JSX.Element>;
 //#endregion
 //#region src/decorators/show_source.d.ts
 /**

package/esm/index.js

@@ -8,9 +8,7 @@ import { twJoin, twMerge } from "tailwind-merge";
 import { SyntaxHighlighter } from "storybook/internal/components";
 import { addons } from "storybook/preview-api";
 import { ThemeProvider, convert, themes } from "storybook/theming";
-
-export * from "@repobuddy/test"
-
+export * from "@repobuddy/test";
 //#region src/components/show_html.tsx
 /**
 * A component that displays the HTML of a subject element.
@@ -36,7 +34,6 @@ function ShowHtml({ selector = "[data-testid=\"subject\"]", config, ...props })
 		children: html
 	});
 }
-
 //#endregion
 //#region src/components/story_card.tsx
 function resolveAppearance(appearance, status) {
@@ -79,7 +76,6 @@ const StoryCard = memo(function StoryCard({ status, appearance, className, child
 		}), children]
 	});
 });
-
 //#endregion
 //#region src/utils/generate_key.ts
 /**
@@ -92,11 +88,9 @@ function generateKey(prefix) {
 	const randomId = typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
 	return prefix ? `${prefix}-${randomId}` : randomId;
 }
-
 //#endregion
 //#region src/contexts/_story_card_registry_context.tsx
 const StoryCardRegistryContext = createContext(null);
-
 //#endregion
 //#region src/contexts/_story_card_scope.tsx
 /**
@@ -182,7 +176,6 @@ const StoryCardCollector = memo(function StoryCardCollector({ Story, title, stat
 	}, [context, entry]);
 	return /* @__PURE__ */ jsx(Story, {});
 }, entryPropsEqual);
-
 //#endregion
 //#region src/decorators/show_source.tsx
 const channel = addons.getChannel();
@@ -257,7 +250,6 @@ function showSource({ className, placement, showOriginalSource, source, ...optio
 		});
 	};
 }
-
 //#endregion
 //#region src/decorators/show_doc_source.tsx
 /**
@@ -274,7 +266,6 @@ function showDocSource(options) {
 		...options
 	});
 }
-
 //#endregion
 //#region src/decorators/with_story_card.tsx
 /**
@@ -379,7 +370,6 @@ function withStoryCard({ title, status, appearance, content: contentProp, classN
 		});
 	};
 }
-
 //#endregion
 //#region src/parameters/define_actions_param.ts
 /**
@@ -393,7 +383,6 @@ function withStoryCard({ title, status, appearance, content: contentProp, classN
 function defineActionsParam(actions) {
 	return { actions };
 }
-
 //#endregion
 //#region src/parameters/define_backgrounds_param.ts
 /**
@@ -403,7 +392,6 @@ function defineActionsParam(actions) {
 * @returns An object containing the backgrounds parameter configuration
 */
 const defineBackgroundsParam = (backgrounds) => ({ backgrounds });
-
 //#endregion
 //#region src/parameters/define_docs_param.ts
 /**
@@ -436,7 +424,6 @@ const defineBackgroundsParam = (backgrounds) => ({ backgrounds });
 function defineDocsParam(docs) {
 	return { docs };
 }
-
 //#endregion
 //#region src/parameters/define_layout_param.ts
 /**
@@ -454,7 +441,6 @@ function defineDocsParam(docs) {
 * ```
 */
 const defineLayoutParam = (layout) => ({ layout });
-
 //#endregion
 //#region src/parameters/define_parameters.ts
 /**
@@ -489,7 +475,6 @@ const defineLayoutParam = (layout) => ({ layout });
 function defineParameters(param, ...rest) {
 	return rest.reduce((acc, param) => Object.assign(acc, param), param);
 }
-
 //#endregion
 //#region src/parameters/define_story_card_param.ts
 /**
@@ -537,7 +522,6 @@ function defineParameters(param, ...rest) {
 function defineStoryCardParam(storyCard) {
 	return { storyCard };
 }
-
 //#endregion
 //#region src/parameters/define_test_param.ts
 /**
@@ -559,7 +543,6 @@ function defineStoryCardParam(storyCard) {
 function defineTestParam(test) {
 	return { test };
 }
-
 //#endregion
 //#region src/parameters/define_viewport_param.ts
 /**
@@ -592,11 +575,9 @@ function defineTestParam(test) {
 function defineViewportParam(viewport) {
 	return { viewport };
 }
-
 //#endregion
 //#region src/testing/decorators/when_running_in_text.ctx.ts
 const ctx = { isRunningInTest };
-
 //#endregion
 //#region src/testing/decorators/when_running_in_test.tsx
 /**
@@ -607,6 +588,5 @@ function whenRunningInTest(decoratorOrHandler) {
 		return ctx.isRunningInTest() ? decoratorOrHandler(Story, context) ?? /* @__PURE__ */ jsx(Story, {}) : /* @__PURE__ */ jsx(Story, {});
 	};
 }
-
 //#endregion
-export { ShowHtml, StoryCard, defineActionsParam, defineBackgroundsParam, defineDocsParam, defineLayoutParam, defineParameters, defineStoryCardParam, defineTestParam, defineViewportParam, showDocSource, showSource, whenRunningInTest, withStoryCard };
+export { ShowHtml, StoryCard, defineActionsParam, defineBackgroundsParam, defineDocsParam, defineLayoutParam, defineParameters, defineStoryCardParam, defineTestParam, defineViewportParam, showDocSource, showSource, whenRunningInTest, withStoryCard };

package/esm/manager/index.js

@@ -28,6 +28,5 @@ function brandTitle(options) {
 		${options.title}
 	</span>`;
 }
-
 //#endregion
-export { brandTitle };
+export { brandTitle };

package/esm/storybook-addon-tag-badges/index.d.ts

@@ -8,7 +8,7 @@ type TagBadgeParameter = TagBadgeParameters[0];
 /**
  * Type representing the names of predefined tags used in Storybook stories.
  */
-type TagNames = '!test' | 'editor' | 'source' | 'type' | '!type' | 'func' | '!func' | 'var' | '!var' | 'new' | 'a11y' | 'alpha' | 'beta' | 'rc' | 'props' | 'deprecated' | 'outdated' | 'danger' | 'todo' | 'code-only' | 'spec' | 'snapshot' | '!snapshot' | 'unit' | 'integration' | 'keyboard' | 'internal' | 'usecase' | 'use-case' | 'playground' | 'example' | 'perf' | 'version:next' | 'remove' | 'remove:next' | 'autodocs';
+type TagNames = '!test' | 'editor' | 'source' | 'type' | '!type' | 'class' | '!class' | 'func' | '!func' | 'var' | '!var' | 'new' | 'a11y' | 'alpha' | 'beta' | 'bug' | 'rc' | 'props' | 'deprecated' | 'outdated' | 'danger' | 'todo' | 'code-only' | 'spec' | 'snapshot' | '!snapshot' | 'unit' | 'integration' | 'keyboard' | 'internal' | 'usecase' | 'use-case' | 'playground' | 'example' | 'perf' | 'version:next' | 'remove' | 'remove:next' | 'autodocs';
 /** Badge (✏️) for stories with a live editor. Shown in sidebar on story and inherited. */
 declare const editorBadge: TagBadgeParameter;
 /** Badge (🆕) for recently added stories. */
@@ -29,6 +29,8 @@ declare const removeBadge: TagBadgeParameter;
 declare const outdatedBadge: TagBadgeParameter;
 /** Badge (🚨) for stories demonstrating dangerous or cautionary patterns. */
 declare const dangerBadge: TagBadgeParameter;
+/** Badge (🐛) for stories that document or reproduce a known bug. */
+declare const bugBadge: TagBadgeParameter;
 /** Badge (📜) for stories that serve as the specification of the component or code. */
 declare const specBadge: TagBadgeParameter;
 /** Badge (📋) for stories marked as todo or incomplete. */
@@ -37,6 +39,8 @@ declare const todoBadge: TagBadgeParameter;
 declare const codeOnlyBadge: TagBadgeParameter;
 /** Badge (<T>) for stories that showcase or document TypeScript types. Hidden in MDX. */
 declare const typeBadge: TagBadgeParameter;
+/** Badge (🔷) for stories that showcase or document classes. Hidden in MDX. */
+declare const classBadge: TagBadgeParameter;
 /** Badge (ƒ(x)) for stories that showcase or document functions. Hidden in MDX. */
 declare const functionBadge: TagBadgeParameter;
 /** Badge (var) for stories that describe values and variables. */
@@ -67,8 +71,8 @@ declare const perfBadge: TagBadgeParameter;
  * Configuration for story tag badges that appear in the Storybook sidebar.
  * Each badge is associated with a specific tag and displays an emoji or symbol with a tooltip.
  *
- * Badge order (first match wins): New → Alpha → Beta → RC → Deprecated → Remove → Outdated → Danger → Use Case →
- * Spec → Playground → Example → Perf → A11y → Keyboard → Source → Type → Function → Var → Props → Todo → Unit →
+ * Badge order (first match wins): New → Alpha → Beta → RC → Deprecated → Remove → Outdated → Danger → Bug → Use Case →
+ * Spec → Playground → Example → Perf → A11y → Keyboard → Source → Type → Class → Function → Var → Props → Todo → Unit →
  * Integration → Editor → Code Only → Version → Internal → Snapshot.
  *
  * - 🆕 New - Recently added stories
@@ -79,6 +83,7 @@ declare const perfBadge: TagBadgeParameter;
  * - ☠️ Remove - (`remove` or `remove:next` = next release; `remove:<version>` = specific version) The feature or component will be removed in the specified version
  * - ⚠️ Outdated - Stories that need updating
  * - 🚨 Danger - Stories demonstrating dangerous patterns
+ * - 🐛 Bug - Stories that document or reproduce a known bug
  * - 🎯 Use Case - Stories that demonstrate a specific use case or scenario
  * - 📜 Spec - Stories that serve as the specification of the component or code
  * - ▶️ Playground - High-quality interactive stories for users to explore and interact with the component
@@ -87,10 +92,11 @@ declare const perfBadge: TagBadgeParameter;
  * - ♿ A11y - Stories that demonstrate or test accessibility
  * - ⌨️ Keyboard - Stories that demonstrate or test keyboard interaction
  * - `</>` Source - Source-code-focused stories
+ * - 🔧 Props - Stories that demonstrate props or configuration
  * - `<T>` Type - Stories that showcase or document TypeScript types
+ * - 🔷 Class - Stories that showcase or document classes
  * - `ƒ(x)` Function - Stories that showcase or document functions
  * - `var` Variables - Stories that describe values and variables
- * - 🔧 Props - Stories that demonstrate props or configuration
  * - 📋 Todo - Stories marked as todo/incomplete
  * - 🧪 Unit - Stories with unit tests
  * - 🔗 Integration - Stories with integration tests
@@ -174,4 +180,4 @@ type StoryObj<TMetaOrCmpOrArgs = Args> = ExtendStoryObj<TMetaOrCmpOrArgs, StoryO
   tag: TagNames;
 }>;
 //#endregion
-export { Meta, StoryObj, TagNames, a11yBadge, alphaBadge, betaBadge, codeOnlyBadge, dangerBadge, deprecatedBadge, editorBadge, exampleBadge, functionBadge, integrationBadge, internalBadge, keyboardBadge, newBadge, outdatedBadge, perfBadge, playgroundBadge, propsBadge, rcBadge, removeBadge, snapshotBadge, sourceBadge, specBadge, tagBadges, todoBadge, typeBadge, unitBadge, useCaseBadge, varBadge };
+export { Meta, StoryObj, TagNames, a11yBadge, alphaBadge, betaBadge, bugBadge, classBadge, codeOnlyBadge, dangerBadge, deprecatedBadge, editorBadge, exampleBadge, functionBadge, integrationBadge, internalBadge, keyboardBadge, newBadge, outdatedBadge, perfBadge, playgroundBadge, propsBadge, rcBadge, removeBadge, snapshotBadge, sourceBadge, specBadge, tagBadges, todoBadge, typeBadge, unitBadge, useCaseBadge, varBadge };

package/esm/storybook-addon-tag-badges/index.js

@@ -1,8 +1,17 @@
 
 import { defaultConfig } from "storybook-addon-tag-badges/manager-helpers";
-
 //#region src/storybook-addon-tag-badges/tag_badges.ts
 const [, , , , , , versionBadge] = defaultConfig;
+const componentDisplay = {
+	mdx: true,
+	sidebar: [{
+		type: "component",
+		skipInherited: false
+	}, {
+		type: "story",
+		skipInherited: false
+	}]
+};
 /** Badge (✏️) for stories with a live editor. Shown in sidebar on story and inherited. */
 const editorBadge = {
 	tags: "editor",
@@ -144,6 +153,22 @@ const dangerBadge = {
 		tooltip: "Dangerous"
 	}
 };
+/** Badge (🐛) for stories that document or reproduce a known bug. */
+const bugBadge = {
+	tags: "bug",
+	badge: {
+		text: "🐛",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "Known bug"
+	},
+	display: { sidebar: {
+		type: "story",
+		skipInherited: false
+	} }
+};
 /** Badge (📜) for stories that serve as the specification of the component or code. */
 const specBadge = {
 	tags: "spec",
@@ -196,7 +221,20 @@ const typeBadge = {
 		},
 		tooltip: "TypeScript Types"
 	},
-	display: { mdx: true }
+	display: componentDisplay
+};
+/** Badge (🔷) for stories that showcase or document classes. Hidden in MDX. */
+const classBadge = {
+	tags: "class",
+	badge: {
+		text: "🔷",
+		style: {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		},
+		tooltip: "Class"
+	},
+	display: componentDisplay
 };
 /** Badge (ƒ(x)) for stories that showcase or document functions. Hidden in MDX. */
 const functionBadge = {
@@ -209,7 +247,7 @@ const functionBadge = {
 		},
 		tooltip: "Function"
 	},
-	display: { mdx: true }
+	display: componentDisplay
 };
 /** Badge (var) for stories that describe values and variables. */
 const varBadge = {
@@ -222,7 +260,7 @@ const varBadge = {
 		},
 		tooltip: "Variables"
 	},
-	display: { mdx: true }
+	display: componentDisplay
 };
 /** Badge (`</>`) for source-code-focused stories. Hidden in MDX. */
 const sourceBadge = {
@@ -240,7 +278,8 @@ const sourceBadge = {
 		sidebar: {
 			type: "story",
 			skipInherited: false
-		}
+		},
+		toolbar: ["story"]
 	}
 };
 /** Badge (📸) for stories with snapshot tests. Shown in toolbar only, not in sidebar. */
@@ -399,8 +438,8 @@ const perfBadge = {
 * Configuration for story tag badges that appear in the Storybook sidebar.
 * Each badge is associated with a specific tag and displays an emoji or symbol with a tooltip.
 *
-* Badge order (first match wins): New → Alpha → Beta → RC → Deprecated → Remove → Outdated → Danger → Use Case →
-* Spec → Playground → Example → Perf → A11y → Keyboard → Source → Type → Function → Var → Props → Todo → Unit →
+* Badge order (first match wins): New → Alpha → Beta → RC → Deprecated → Remove → Outdated → Danger → Bug → Use Case →
+* Spec → Playground → Example → Perf → A11y → Keyboard → Source → Type → Class → Function → Var → Props → Todo → Unit →
 * Integration → Editor → Code Only → Version → Internal → Snapshot.
 *
 * - 🆕 New - Recently added stories
@@ -411,6 +450,7 @@ const perfBadge = {
 * - ☠️ Remove - (`remove` or `remove:next` = next release; `remove:<version>` = specific version) The feature or component will be removed in the specified version
 * - ⚠️ Outdated - Stories that need updating
 * - 🚨 Danger - Stories demonstrating dangerous patterns
+* - 🐛 Bug - Stories that document or reproduce a known bug
 * - 🎯 Use Case - Stories that demonstrate a specific use case or scenario
 * - 📜 Spec - Stories that serve as the specification of the component or code
 * - ▶️ Playground - High-quality interactive stories for users to explore and interact with the component
@@ -419,10 +459,11 @@ const perfBadge = {
 * - ♿ A11y - Stories that demonstrate or test accessibility
 * - ⌨️ Keyboard - Stories that demonstrate or test keyboard interaction
 * - `</>` Source - Source-code-focused stories
+* - 🔧 Props - Stories that demonstrate props or configuration
 * - `<T>` Type - Stories that showcase or document TypeScript types
+* - 🔷 Class - Stories that showcase or document classes
 * - `ƒ(x)` Function - Stories that showcase or document functions
 * - `var` Variables - Stories that describe values and variables
-* - 🔧 Props - Stories that demonstrate props or configuration
 * - 📋 Todo - Stories marked as todo/incomplete
 * - 🧪 Unit - Stories with unit tests
 * - 🔗 Integration - Stories with integration tests
@@ -434,35 +475,39 @@ const perfBadge = {
 * - 📸 Snapshot - Stories with snapshot tests
 */
 const tagBadges = [
+	[bugBadge, todoBadge],
 	newBadge,
-	alphaBadge,
-	betaBadge,
-	rcBadge,
-	deprecatedBadge,
-	removeBadge,
-	outdatedBadge,
-	dangerBadge,
+	[
+		alphaBadge,
+		betaBadge,
+		rcBadge
+	],
+	[
+		deprecatedBadge,
+		removeBadge,
+		outdatedBadge,
+		dangerBadge
+	],
 	useCaseBadge,
 	specBadge,
 	playgroundBadge,
 	exampleBadge,
 	perfBadge,
-	a11yBadge,
-	keyboardBadge,
 	sourceBadge,
-	typeBadge,
-	functionBadge,
-	varBadge,
-	propsBadge,
-	todoBadge,
+	[a11yBadge, keyboardBadge],
+	[
+		propsBadge,
+		typeBadge,
+		classBadge,
+		functionBadge,
+		varBadge
+	],
 	unitBadge,
 	integrationBadge,
 	editorBadge,
 	codeOnlyBadge,
 	versionBadge,
-	internalBadge,
-	snapshotBadge
-];
-
+	[internalBadge, snapshotBadge]
+].flat();
 //#endregion
-export { a11yBadge, alphaBadge, betaBadge, codeOnlyBadge, dangerBadge, deprecatedBadge, editorBadge, exampleBadge, functionBadge, integrationBadge, internalBadge, keyboardBadge, newBadge, outdatedBadge, perfBadge, playgroundBadge, propsBadge, rcBadge, removeBadge, snapshotBadge, sourceBadge, specBadge, tagBadges, todoBadge, typeBadge, unitBadge, useCaseBadge, varBadge };
+export { a11yBadge, alphaBadge, betaBadge, bugBadge, classBadge, codeOnlyBadge, dangerBadge, deprecatedBadge, editorBadge, exampleBadge, functionBadge, integrationBadge, internalBadge, keyboardBadge, newBadge, outdatedBadge, perfBadge, playgroundBadge, propsBadge, rcBadge, removeBadge, snapshotBadge, sourceBadge, specBadge, tagBadges, todoBadge, typeBadge, unitBadge, useCaseBadge, varBadge };

package/esm/storybook-dark-mode/index.d.ts

@@ -2,7 +2,7 @@
 import { DocsContextProps } from "@storybook/addon-docs/blocks";
 import { PropsWithChildren } from "react";
 import { ThemeVars } from "storybook/theming";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { CSSProperties } from "@just-web/css";
 import { DecoratorFunction } from "storybook/internal/types";
 
@@ -29,7 +29,7 @@ declare function createDarkModeDocsContainer(customThemes?: {
   dark?: ThemeVars | undefined;
 } | undefined): (props: PropsWithChildren<{
   context: DocsContextProps;
-}>) => react_jsx_runtime0.JSX.Element;
+}>) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/storybook-dark-mode/define_dark_mode.d.ts
 /**

package/esm/storybook-dark-mode/index.js

@@ -5,7 +5,6 @@ import { useEffect, useState } from "react";
 import { themes } from "storybook/theming";
 import { jsx } from "react/jsx-runtime";
 import { toDOMStyle } from "@just-web/css";
-
 //#region src/storybook-dark-mode/dark_mode_docs_container.tsx
 /**
 * Creates a `DocsContainer` for `storybook` that works with `@storybook-community/storybook-dark-mode`.
@@ -38,7 +37,6 @@ function createDarkModeDocsContainer(customThemes) {
 		});
 	};
 }
-
 //#endregion
 //#region src/storybook-dark-mode/define_dark_mode.ts
 /**
@@ -60,7 +58,6 @@ function createDarkModeDocsContainer(customThemes) {
 function defineDarkModeParam(darkMode) {
 	return { darkMode };
 }
-
 //#endregion
 //#region src/storybook-dark-mode/with_dark_mode.tsx
 /**
@@ -98,6 +95,5 @@ function addStyle(target, style) {
 function removeStyle(target, style) {
 	if (style) for (const key of Object.keys(toDOMStyle(style))) target.style.removeProperty(key);
 }
-
 //#endregion
-export { createDarkModeDocsContainer, defineDarkModeParam, withDarkMode };
+export { createDarkModeDocsContainer, defineDarkModeParam, withDarkMode };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobuddy/storybook",
-  "version": "2.26.0",
+  "version": "2.28.0",
   "description": "Storybook repo buddy",
   "keywords": [
     "storybook",
@@ -87,8 +87,8 @@
     "@repobuddy/vitest": "^2.1.1",
     "@storybook-community/storybook-dark-mode": "^7.1.0",
     "@storybook/addon-docs": "^10.2.8",
-    "@storybook/addon-vitest": "^10.2.8",
-    "@storybook/react-vite": "^10.2.8",
+    "@storybook/addon-vitest": "^10.3.3",
+    "@storybook/react-vite": "^10.3.3",
     "@tailwindcss/cli": "^4.1.17",
     "@tailwindcss/vite": "^4.1.17",
     "@vitest/browser": "^4.0.16",
@@ -99,12 +99,12 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "rimraf": "^6.1.0",
-    "storybook": "^10.2.8",
+    "storybook": "^10.3.3",
     "storybook-addon-code-editor": "^6.1.3",
     "storybook-addon-tag-badges": "^3.0.6",
     "storybook-addon-vis": "^3.1.2",
-    "tsdown": "^0.20.0",
-    "vite": "^7.3.0",
+    "tsdown": "^0.21.4",
+    "vite": "^8.0.0",
     "vitest": "^4.0.16"
   },
   "peerDependencies": {

package/readme.md

@@ -88,6 +88,7 @@ we provide a different set of badges that uses emojis (order: first match wins):
 | ☠️      | `remove`<br/>`remove:next` (same)<br/>`remove:<version>` | Will be removed in the next or specified version                                          |
 | ⚠️      | `outdated`                                               | Stories that need updating                                                                |
 | 🚨      | `danger`                                                 | Dangerous or cautionary patterns                                                          |
+| 🐛      | `bug`                                                    | Known bug (documents or reproduces the issue)                                             |
 | 🎯      | `use-case`                                               | Specific use case or scenario                                                             |
 | 📜      | `spec`                                                    | Specification of the component or code                                                    |
 | ▶️      | `playground`                                             | High-quality interactive stories for users to explore and interact with the component     |
@@ -97,6 +98,7 @@ we provide a different set of badges that uses emojis (order: first match wins):
 | ⌨️      | `keyboard`                                               | Keyboard interaction                                                                      |
 | `</>`   | `source`                                                 | Source-code-focused stories                                                               |
 | `<T>`   | `type`                                                   | TypeScript types (shown in MDX)                                                           |
+| 🔷      | `class`                                                  | Classes (shown in MDX)                                                                    |
 | `ƒ(x)`  | `func`                                                   | Functions (shown in MDX)                                                                  |
 | `var`   | `var`                                                    | Variables (shown in MDX)                                                                  |
 | 🔧      | `props`                                                  | Props or configuration                                                                    |

package/src/storybook-addon-tag-badges/tag_badges.ts

@@ -4,6 +4,20 @@ const [, , , , , , versionBadge] = defaultConfig
 
 type TagBadgeParameter = TagBadgeParameters[0]
 
+const componentDisplay: TagBadgeParameter['display'] = {
+	mdx: true,
+	sidebar: [
+		{
+			type: 'component',
+			skipInherited: false
+		},
+		{
+			type: 'story',
+			skipInherited: false
+		}
+	]
+}
+
 /**
  * Type representing the names of predefined tags used in Storybook stories.
  */
@@ -13,6 +27,8 @@ export type TagNames =
 	| 'source'
 	| 'type'
 	| '!type'
+	| 'class'
+	| '!class'
 	| 'func'
 	| '!func'
 	| 'var'
@@ -21,6 +37,7 @@ export type TagNames =
 	| 'a11y'
 	| 'alpha'
 	| 'beta'
+	| 'bug'
 	| 'rc'
 	| 'props'
 	| 'deprecated'
@@ -201,6 +218,25 @@ export const dangerBadge: TagBadgeParameter = {
 	}
 }
 
+/** Badge (🐛) for stories that document or reproduce a known bug. */
+export const bugBadge: TagBadgeParameter = {
+	tags: 'bug',
+	badge: {
+		text: '🐛',
+		style: {
+			backgroundColor: 'transparent',
+			borderColor: 'transparent'
+		},
+		tooltip: 'Known bug'
+	},
+	display: {
+		sidebar: {
+			type: 'story',
+			skipInherited: false
+		}
+	}
+}
+
 /** Badge (📜) for stories that serve as the specification of the component or code. */
 export const specBadge: TagBadgeParameter = {
 	tags: 'spec',
@@ -260,9 +296,21 @@ export const typeBadge: TagBadgeParameter = {
 		},
 		tooltip: 'TypeScript Types'
 	},
-	display: {
-		mdx: true
-	}
+	display: componentDisplay
+}
+
+/** Badge (🔷) for stories that showcase or document classes. Hidden in MDX. */
+export const classBadge: TagBadgeParameter = {
+	tags: 'class',
+	badge: {
+		text: '🔷',
+		style: {
+			backgroundColor: 'transparent',
+			borderColor: 'transparent'
+		},
+		tooltip: 'Class'
+	},
+	display: componentDisplay
 }
 
 /** Badge (ƒ(x)) for stories that showcase or document functions. Hidden in MDX. */
@@ -276,9 +324,7 @@ export const functionBadge: TagBadgeParameter = {
 		},
 		tooltip: 'Function'
 	},
-	display: {
-		mdx: true
-	}
+	display: componentDisplay
 }
 
 /** Badge (var) for stories that describe values and variables. */
@@ -292,9 +338,7 @@ export const varBadge: TagBadgeParameter = {
 		},
 		tooltip: 'Variables'
 	},
-	display: {
-		mdx: true
-	}
+	display: componentDisplay
 }
 
 /** Badge (`</>`) for source-code-focused stories. Hidden in MDX. */
@@ -313,7 +357,8 @@ export const sourceBadge: TagBadgeParameter = {
 		sidebar: {
 			type: 'story',
 			skipInherited: false
-		}
+		},
+		toolbar: ['story']
 	}
 }
 
@@ -497,8 +542,8 @@ export const perfBadge: TagBadgeParameter = {
  * Configuration for story tag badges that appear in the Storybook sidebar.
  * Each badge is associated with a specific tag and displays an emoji or symbol with a tooltip.
  *
- * Badge order (first match wins): New → Alpha → Beta → RC → Deprecated → Remove → Outdated → Danger → Use Case →
- * Spec → Playground → Example → Perf → A11y → Keyboard → Source → Type → Function → Var → Props → Todo → Unit →
+ * Badge order (first match wins): New → Alpha → Beta → RC → Deprecated → Remove → Outdated → Danger → Bug → Use Case →
+ * Spec → Playground → Example → Perf → A11y → Keyboard → Source → Type → Class → Function → Var → Props → Todo → Unit →
  * Integration → Editor → Code Only → Version → Internal → Snapshot.
  *
  * - 🆕 New - Recently added stories
@@ -509,6 +554,7 @@ export const perfBadge: TagBadgeParameter = {
  * - ☠️ Remove - (`remove` or `remove:next` = next release; `remove:<version>` = specific version) The feature or component will be removed in the specified version
  * - ⚠️ Outdated - Stories that need updating
  * - 🚨 Danger - Stories demonstrating dangerous patterns
+ * - 🐛 Bug - Stories that document or reproduce a known bug
  * - 🎯 Use Case - Stories that demonstrate a specific use case or scenario
  * - 📜 Spec - Stories that serve as the specification of the component or code
  * - ▶️ Playground - High-quality interactive stories for users to explore and interact with the component
@@ -517,10 +563,11 @@ export const perfBadge: TagBadgeParameter = {
  * - ♿ A11y - Stories that demonstrate or test accessibility
  * - ⌨️ Keyboard - Stories that demonstrate or test keyboard interaction
  * - `</>` Source - Source-code-focused stories
+ * - 🔧 Props - Stories that demonstrate props or configuration
  * - `<T>` Type - Stories that showcase or document TypeScript types
+ * - 🔷 Class - Stories that showcase or document classes
  * - `ƒ(x)` Function - Stories that showcase or document functions
  * - `var` Variables - Stories that describe values and variables
- * - 🔧 Props - Stories that demonstrate props or configuration
  * - 📋 Todo - Stories marked as todo/incomplete
  * - 🧪 Unit - Stories with unit tests
  * - 🔗 Integration - Stories with integration tests
@@ -532,32 +579,23 @@ export const perfBadge: TagBadgeParameter = {
  * - 📸 Snapshot - Stories with snapshot tests
  */
 export const tagBadges: TagBadgeParameters = [
+	// Story states
+	[bugBadge, todoBadge],
 	newBadge,
-	alphaBadge,
-	betaBadge,
-	rcBadge,
-	deprecatedBadge,
-	removeBadge,
-	outdatedBadge,
-	dangerBadge,
+	[alphaBadge, betaBadge, rcBadge],
+	[deprecatedBadge, removeBadge, outdatedBadge, dangerBadge],
 	useCaseBadge,
 	specBadge,
 	playgroundBadge,
 	exampleBadge,
 	perfBadge,
-	a11yBadge,
-	keyboardBadge,
 	sourceBadge,
-	typeBadge,
-	functionBadge,
-	varBadge,
-	propsBadge,
-	todoBadge,
+	[a11yBadge, keyboardBadge],
+	[propsBadge, typeBadge, classBadge, functionBadge, varBadge],
 	unitBadge,
 	integrationBadge,
 	editorBadge,
 	codeOnlyBadge,
 	versionBadge,
-	internalBadge,
-	snapshotBadge
-]
+	[internalBadge, snapshotBadge]
+].flat()

package/styles.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme {
   :root, :host {