gbs-add-block 2.0.3 → 2.0.4

package/.gbs/skills/gbs-components/references/styling.md

@@ -134,7 +134,26 @@ Do not use `!important`, and do not write selectors against internal class names
 (`.bt-root`, `.dg-cell`) in app CSS — they are implementation detail. Use the
 variables or the slots.
 
-## 5. State attributes
+## 5. Unlayered resets (Bootstrap, Normalize)
+
+Component rules sit in `@layer components`. Any stylesheet that ships
+**unlayered** beats every layered rule regardless of specificity — the cascade
+settles layers before specificity. So Bootstrap's Reboot (`button { border-radius: 0 }`,
+`button, input, textarea { font-size: inherit }`) overrides our classes, and
+import order does not help.
+
+Fix it in the project's global CSS by giving the reset its own layer, declared
+before `components`:
+
+```css
+@layer bootstrap, theme, base, components, utilities;
+@import url("bootstrap/dist/css/bootstrap.min.css") layer(bootstrap);
+```
+
+Only components whose root is a native form element are affected (Button,
+Textarea). Class names never collide — ours are two-letter prefixed.
+
+## 6. State attributes
 
 Components expose their state as `data-*` attributes, so you can style states
 without tracking them in React.
@@ -155,7 +174,7 @@ without tracking them in React.
 .cb-option[data-active] { outline: 2px solid var(--gbs-focus); }
 ```
 
-## 6. Dark mode
+## 7. Dark mode
 
 Colours are `light-dark()` pairs driven by the page's `color-scheme`, so the
 default is whatever the device prefers. To pin it, set `color-scheme` — the
@@ -174,7 +193,7 @@ Do not maintain a second palette for dark mode. Override the `--gbs-*` variables
 with `light-dark()` pairs, or set them inside your own `[data-theme="dark"]`
 block, and every component follows.
 
-## 7. Right-to-left
+## 8. Right-to-left
 
 The components use logical properties and read `dir` from the document, so RTL
 works without configuration. Arrow keys in Menu, Switch and Tabs mirror

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v2.0.3)
+# GBS Building Blocks 2.0 (v2.0.4)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -33,13 +33,13 @@ Pick a subset with `--for claude,codex`, or `--for none` for just `.gbs/`.
 Commit the result so everyone's agent picks it up. Re-run to update; a file you
 have edited is never replaced without `--force`.
 
-## What's New 🎉 (Ver 2.0.3)
+## What's New 🎉 (Ver 2.0.4)
 
-- Agent skill: stylesheets are now documented as a single import in the
-  project's global CSS. The previous wording showed the stylesheet import
-  beside the component import, which led coding agents to repeat it in every
-  component file they wrote — making CSS order depend on module import order,
-  and arriving late on lazy-loaded routes.
+- Agent skill: added guidance for projects that load an unlayered CSS reset
+  such as Bootstrap or Normalize. Component rules live in the `components`
+  cascade layer, and an unlayered reset outranks every layered rule whatever
+  its selectors look like, so Bootstrap's Reboot was restyling the Button.
+  Importing the reset into its own layer fixes it; the skill now says so.
 
 ## Authors
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "React Component Library",
   "type": "module",
   "files": [