@tcn/sb-blackcat-addon 4.0.0 → 6.0.0

package/README.md

@@ -2,6 +2,8 @@
 
 A Storybook addon that provides enhanced accessibility features, layout direction controls, and design system integration for the Blackcat UI component library.
 
+> **Integrating into a new storybook config?** This package ships CSS unbundled. Read the [Consumer Integration Guide](../../docs/consumer-integration.md) first — misconfigured `css.modules.localsConvention` will cause the addon to render unstyled.
+
 ## Overview
 
 `@tcn/sb-blackcat-addon` is a specialized Storybook addon that enhances the development experience for Blackcat UI components. It provides accessibility testing tools, layout direction controls, and design system integration features that help developers build and test components with accessibility and internationalization in mind.

package/dist/layers.css

@@ -0,0 +1 @@
+@layer tcn-reset, tcn-system, tcn-theme;

package/dist/preview.cjs

@@ -1,13 +1,13 @@
 "use strict";
-require('./preview.css');const index = require("./index.cjs");
+require("./layers.css");
+const index = require("./index.cjs");
 const jsxRuntime = require("react/jsx-runtime");
 const themes = require("@tcn/ui/themes");
 const react = require("react");
+const styles = require("./sb_decorator.module.css");
 const stacks = require("@tcn/ui/stacks");
 const windows98 = require("@tcn/ui/themes/windows98");
 const ergo = require("@tcn/ui/themes/ergo");
-const blackcatStorybookDecorator = `_blackcat-storybook-decorator_e27594c`;
-const styles = { "blackcat-storybook-decorator": blackcatStorybookDecorator };
 const sbThemes = Object.freeze({
   ergo: {
     value: "ergo",

package/dist/preview.js

@@ -1,12 +1,12 @@
+import "./layers.css";
 import { BLACKCAT_ADDON_ID as ADDON_ID } from "./index.js";
 import { jsx } from "react/jsx-runtime";
 import { Theme } from "@tcn/ui/themes";
 import { useEffect } from "react";
+import styles from "./sb_decorator.module.css";
 import { VStack } from "@tcn/ui/stacks";
 import { windows98StyleSheet } from "@tcn/ui/themes/windows98";
 import { ergoStyleSheet } from "@tcn/ui/themes/ergo";
-import './preview.css';const blackcatStorybookDecorator = `_blackcat-storybook-decorator_e27594c`;
-const styles = { "blackcat-storybook-decorator": blackcatStorybookDecorator };
 const sbThemes = Object.freeze({
   ergo: {
     value: "ergo",

package/dist/{preview.css → sb_decorator.module.css}

@@ -1,7 +1,6 @@
-@layer tcn-reset, tcn-system, tcn-theme;
-html,
-body,
-#storybook-root {
+:global(html),
+:global(body),
+:global(#storybook-root) {
   width: 100% !important;
   height: 100% !important;
   padding: 0 !important;
@@ -11,12 +10,12 @@ body,
   background-color: var(--body-color);
 }
 
-#storybook-docs {
+:global(#storybook-docs) {
   width: 100% !important;
   height: 100% !important;
   overflow: auto !important;
 }
 
-._blackcat-storybook-decorator_e27594c {
+.blackcat-storybook-decorator {
   background-color: var(--background-color-primary);
 }

package/dist/stories/button.css

@@ -0,0 +1,31 @@
+.storybook-button {
+  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  border: 0;
+  border-radius: 3em;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+}
+.storybook-button--primary {
+  color: white;
+  background-color: var(--tcn-primary-main);
+}
+.storybook-button--secondary {
+  color: var(--tcn-primary-main);
+  background-color: transparent;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+}
+.storybook-button--small {
+  font-size: calc(12px * var(--accessibility-scalar));
+  padding: 10px 16px;
+}
+
+.storybook-button--medium {
+  font-size: calc(14px * var(--accessibility-scalar));
+  padding: 11px 20px;
+}
+.storybook-button--large {
+  font-size: calc(16px * var(--accessibility-scalar));
+  padding: 12px 24px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/sb-blackcat-addon",
-  "version": "4.0.0",
+  "version": "6.0.0",
   "type": "module",
   "author": "TCN",
   "description": "Storybook addon that provides Blackcat accessibility scalar and layout direction.",
@@ -39,10 +39,10 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@tcn/ui": "^0.18.1"
+    "@tcn/ui": "^0.20.0"
   },
   "devDependencies": {
-    "@tcn/ui": "0.18.1"
+    "@tcn/ui": "0.20.0"
   },
   "dependencies": {
     "clsx": "^2.1.1",