gbs-add-block 2.0.2 → 2.0.4

package/.gbs/skills/gbs-components/SKILL.md

@@ -15,11 +15,14 @@ npx gbs-add-block -a Button,Input,Modal --beta
 ```
 
 Writes `component-lib/<folder>/` plus `component-lib/shared/`. Always pass
-`--beta`. Import the folder barrel **and its stylesheet** (or the repo's alias):
+`--beta`. Import the barrel in your component; each stylesheet goes in the
+global CSS **once** (Vite: `src/index.css`), never in a component file:
 
 ```ts
 import { Button } from "component-lib/button";
-import "component-lib/button/styles.css";
+```
+```css
+@import "../component-lib/button/styles.css";
 ```
 
 Folder = lowercased name, except `data-grid`, `date-picker`, `file-uploader`,
@@ -78,7 +81,6 @@ import { Input } from "component-lib/input";
 import { Select } from "component-lib/combobox";
 import { Modal } from "component-lib/modal";
 import { toast } from "component-lib/toaster";
-// plus each styles.css, once
 
 const ROLES = [{ value: "admin", label: "Admin" }, { value: "dev", label: "Dev" }];
 
@@ -121,12 +123,12 @@ export function InviteButton() {
 
 ## Details (in `references/`)
 
-- `install.md` — CLI flags, folders, `shared/`, 1.x vs beta.
-- `forms.md` — text and choice fields, controlled state, form posting.
-- `pickers.md` — Select, MultiSelect, DatePicker, FileUploader.
+- `install.md` — CLI flags, folders, 1.x vs beta.
+- `forms.md` — fields, controlled state, form posting.
+- `pickers.md` — Select, MultiSelect, DatePicker, Uploader.
 - `overlays.md` — Modal, dialog, Popover, Menu, Tooltip.
 - `toaster.md` — `toast()` and `<Toaster />`.
 - `data-grid.md` — columns, API, export.
-- `data-display.md` — Card, Tabs, Accordion, Badge, Avatar, Progress.
-- `styling.md` — tokens, layers, Tailwind, slots, `data-*`, dark.
+- `data-display.md` — Card, Tabs, Accordion, Badge, Avatar.
+- `styling.md` — tokens, layers, slots, `data-*`, dark.
 - `accessibility.md` — what is supplied, what you add.

package/.gbs/skills/gbs-components/references/data-grid.md

@@ -5,7 +5,6 @@ A virtualized grid. Import `DataGrid` and `createColumnHelper` from
 
 ```tsx
 import { createColumnHelper, DataGrid } from "component-lib/data-grid";
-import "component-lib/data-grid/styles.css";
 
 interface Employee { id: number; name: string; salary: number; active: boolean }
 

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

@@ -151,14 +151,13 @@ is replaced on update. Put your changes in your own module instead.
 
 ## Importing
 
-Import the folder barrel, plus the stylesheet once anywhere in the app:
+Import the barrel in the component that uses it:
 
 ```ts
 import { Input, OtpInput } from "component-lib/input";
-import "component-lib/input/styles.css";
 ```
 
-Or import the CSS from your root stylesheet:
+Put the stylesheet in the project's global CSS, once — never in a component file:
 
 ```css
 @import "../component-lib/input/styles.css";

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

@@ -25,7 +25,6 @@ dismiss rules, a close guard, sizes, drawers and animation.
 
 ```tsx
 import { Modal } from "component-lib/modal";
-import "component-lib/modal/styles.css";
 
 const [open, setOpen] = useState(false);
 
@@ -73,7 +72,6 @@ React.
 ```tsx
 // once, e.g. app/layout.tsx or App.tsx
 import { DialogHost } from "component-lib/dialog";
-import "component-lib/dialog/styles.css";
 <DialogHost />
 
 // anywhere
@@ -142,7 +140,6 @@ import {
   Menu, MenuItem, MenuCheckboxItem, MenuRadioGroup, MenuRadioItem,
   MenuGroup, MenuSeparator, MenuSub,
 } from "component-lib/menu";
-import "component-lib/menu/styles.css";
 
 <Menu trigger={<Button variant="outline">Actions</Button>} label="Row actions">
   <MenuItem icon={<EditIcon />} shortcut="⌘E" onSelect={edit}>Edit</MenuItem>

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

@@ -6,18 +6,20 @@ state attributes.
 
 ## 1. Stylesheets are per component
 
-Each folder has its own `styles.css`. Import the ones you use, once, anywhere:
-
-```ts
-import "component-lib/button/styles.css";
-```
-
-or from a root stylesheet:
+Each folder has its own `styles.css`. Put the ones you use in the project's
+**global** stylesheet — `src/index.css` in Vite, the root layout's CSS in Next —
+once each:
 
 ```css
 @import "../component-lib/button/styles.css";
 ```
 
+**Never import a stylesheet from a component file.** `import
+"component-lib/button/styles.css"` inside a `.tsx` does bundle, but it makes CSS
+order depend on module import order — which decides whether Tailwind utilities
+still beat the component's own rules — and a lazy-loaded component then pulls its
+styles in late, flashing unstyled. One global import per component, nowhere else.
+
 Nothing renders correctly without it — the components emit class names only.
 
 ## 2. Theme with `--gbs-*` on `:root`
@@ -132,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.
@@ -153,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
@@ -172,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/.gbs/skills/gbs-components/references/toaster.md

@@ -12,7 +12,6 @@ shared module-level store; two import paths can create two stores.
 ```tsx
 // once, near the root
 import { Toaster } from "component-lib/toaster";
-import "component-lib/toaster/styles.css";
 <Toaster />
 
 // anywhere

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v2.0.2)
+# GBS Building Blocks 2.0 (v2.0.4)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -33,9 +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.2)
+## What's New 🎉 (Ver 2.0.4)
 
-- Update Candidate for next major change 2.0.0
+- 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.2",
+  "version": "2.0.4",
   "description": "React Component Library",
   "type": "module",
   "files": [