diff --git a/README.md b/README.md
index 9ff85a1..e367455 100644
--- a/README.md
+++ b/README.md
@@ -15,13 +15,13 @@ self-contained TSX components out of discrete parts.
- Styles are global and open - anything can override anything anywhere.
- No IDE-friendly link between the class name in markup and its definition.
-- All techniques are patterns a human must know and follow, not APIs.
+- Organizational techniques are patterns a human must know and follow, not APIs.
- Errors happen silently.
## forge solutions
- All styles are local to your TSX components.
-- Styles defined using TS typing.
+- Styles are defined using TS typing.
- Component styles are made up of independently styled "Parts".
- "Variants" replace inline styles with typed, declarative parameters.
- Style composition is deterministic.
@@ -35,7 +35,12 @@ self-contained TSX components out of discrete parts.
```tsx
import { define } from "forge"
-export const Button = define("button", {
+export const Container = define("Container", {
+ width: 600,
+ margin: '0 auto',
+})
+
+export const Button = define({
base: "button",
padding: 20,
@@ -43,7 +48,9 @@ export const Button = define("button", {
})
// Usage
-
+
+
+
```
### variants
@@ -51,7 +58,7 @@ export const Button = define("button", {
```tsx
import { define } from "forge"
-export const Button = define("button", {
+export const Button = define({
base: "button",
padding: 20,
diff --git a/src/index.tsx b/src/index.tsx
index db2c583..20aa512 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -308,7 +308,7 @@ function anonName(def: TagDef): string {
const base = (def.base ?? 'div')
const count = (anonComponents[base] ??= 1)
anonComponents[base] += 1
- return tagName(base) + String(count)
+ return tagName(base) + (count === 1 ? '' : String(count))
}
// a => Anchor, nav => Nav